@charset "UTF-8";

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

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

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

/* --------------------------------------------------
flexbox set
-------------------------------------------------- */
.flexbox { display: -webkit-flex; display: flex; }
.flexbox.flex-row {-webkit-flex-direction: row; flex-direction: row; }
.flexbox.flex-r-reverse { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; }
.flexbox.flex-column { -webkit-flex-direction: column; flex-direction: column; }
.flexbox.flex-c-reverse { -webkit-flex-direction: column-reverse; flex-direction: column-reverse; }
.flexbox.nowrap { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; }
.flexbox.wrap { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.flexbox.wrap-r { -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
.flexbox.lefted { -webkit-justify-content: flex-start; justify-content: flex-start; }
.flexbox.righted { -webkit-justify-content: flex-end; justify-content: flex-end; }
.flexbox.centered { -webkit-justify-content: center; justify-content: center; }
.flexbox.between { -webkit-justify-content: space-between; justify-content: space-between; }
.flexbox.around { -webkit-justify-content: space-around; justify-content: space-around; }
.flexbox.v-center { -webkit-align-items: center; align-items: center; }
.flexbox.v-top { -webkit-align-content: flex-start; align-content: flex-start;}

/* --------------------------------------------------
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; }
.mb0 { margin-bottom:0px !important; }
.mb60 { margin-bottom:60px !important; }

/* --------------------------------------------------
Button
-------------------------------------------------- */
.btn {
  display:inline-block;
  font-weight:bold;
	position:relative;
	border-radius:5px;
	text-align:center;
	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 {
	color:#fff;
	text-shadow: 0 2px 0 rgba(0,0,0,0.2);
	box-shadow: 0 3px 0 rgba(0,0,0,0.2);
  background:#2ec0dd;
} .btn.standard:hover { background:#0795b1; text-decoration:none;}

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

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

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

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

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

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

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

/* --------------------------------------------------
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%;
}

.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:8px;
  left:50%;
	width:16px;
	height:16px;
	background:url(../images/common/ico-another_link_gray.svg) no-repeat 50% 50%;
	background-size:contain;
  margin-left:-8px;
  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%;
}