@charset "utf-8";
/* CSS Document */

body {
	padding-top:87px;
}
body {
	color: #6d6d6d;
	font: 14px/1.6 "Meiryo", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "MS P Gothic", "ＭＳ Ｐゴシック", Osaka, Helvetica, Arial, sans-serif;
}
.container.cf {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}
p {
	margin: 0 0 15px;
}
section {
	padding:30px 0;
}
section.grey {
	background:#3D4647;
}
nav {
    height: auto;
}
.navbar-default {
	background-color: rgba(73, 84, 85, 0.89);
	left: 0;
	position: fixed;
	right: 0;
	top: 0 !important;
	padding:15px 0;
	border-top:#5BB73B solid 5px;
}
nav.navbar {
	border-bottom: 0 solid transparent;
	margin-bottom: 0;
	min-height: auto;
}

.navbar-default .navbar-nav > li > a.btn-nav {
    background-color: inherit;
    border:#5BB73B solid 1px;
    color: #5BB73B;

}
.navbar-default .navbar-nav > li > a.btn-nav:hover {
	 color: #fff;
}
.logo {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #E0E2E2), color-stop(0.00, #fff));
	background: -webkit-linear-gradient(#fff, #E0E2E2);
	background: -moz-linear-gradient(#fff, #E0E2E2);
	background: -o-linear-gradient(#fff, #E0E2E2);
	background: -ms-linear-gradient(#fff, #E0E2E2);
	background: linear-gradient(#fff, #E0E2E2);
	overflow:hidden;
	margin-bottom:-30px;
	margin-top:-15px;
	padding:30px 15px 30px;
}
.navbar-brand {
	padding:0 0 0 15px;
	height:auto;
}
.navbar-default .navbar-nav > li > a {
	color: #fff;
}
.navbar-default .navbar-nav > li > a:hover {
	color:#5BB73B;
 -webkit-transition: all .3s;
 transition: all .3s;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	color:#5BB73B;
	background:none;
}
.main .container, .content .container , .second  .container {
	width:970px
}
.main {

	padding-top:40px;
	padding-bottom:40px;
}

.main h1 {
	border-left:solid #5BB73B 5px;
	padding-left:10px;
}

.second {
	background-color: #CED1D1;
	padding-top:40px;
	padding-bottom:40px;
	margin-bottom:30px;
}
.content h2 {
	border-left:solid #5BB73B 5px;
	padding-left:10px;
	font-size: 2.5em;
	margin:0 0 1em;
}
.content h3 {
	font-size:18px;
	margin:0 0 10px;
}
.content h4 {
	font-size:18px;
	margin:10px 0 10px;
}
section.grey h2 {
	border-left:solid #5BB73B 5px;
	padding-left:10px;
	font-size: 2.5em;
	color:#fff;
}
section.grey p {
	color:#fff;
}
section.grey h3 {
	color:#fff;
}
p.font16 {
	font-size:16px;
}
.green {
	border-left:solid #5BB73B 5px;
	padding-left:10px
}
.blue {
	border-left:solid #00ACC8 5px;
	padding-left:10px
}
.red {
	border-left:solid #912F46 5px;
	padding-left:10px
}
.bo {
	margin:45px 0 15px;
	text-align:center
}
.button {
	text-align: center;
	text-decoration: none;
	outline: none;
}
.button::before, .button::after {
 position: absolute;
 z-index: -1;
 display: block;
 content: '';
}
.button, .button::before, .button::after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all .3s;
 transition: all .3s;
}
.button {
	position: relative;
	z-index: 2;
	border: 2px solid #5BB73B;
	color: #5BB73B;
	line-height: 50px;
	overflow: hidden;
	padding: 15px;
	font-size:18px;
}
.button:hover {
	color: #fff;
	text-decoration:none;
}
.button::after {
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 -webkit-transform: scale(.5);
 transform: scale(.5);
}
.button:hover::after {
 background: #5BB73B;
 -webkit-transform: scale(1);
 transform: scale(1);
}

#product , #portal ,#quickstart {
    margin: -100px 0 0;
    padding: 100px 0 0;
}
/* Lサイズ、ワイドスクリーン : Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Mサイズ、デスクトップ : Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
.main .container, .content .container {
	width:auto
}
}

/* Sサイズ、タブレット : Small Devices, Tablets */
@media only screen and (max-width : 768px) {
		.navbar-default {
		background:#FFF;
		padding:0
	}
.navbar-brand {
	padding:15px;
}
.logo {
    background: none;
    margin-bottom: 0;
    margin-top: 0;
    overflow: hidden;
    padding: 0;
}
.navbar-default .navbar-nav > li > a {
    color: #777;
}
.navbar-default .navbar-nav > li > a:hover {
	background:#CCC
}

}

/* XSサイズ : Extra Small Devices, Phones */  
@media only screen and (max-width : 480px) {

}

/* カスタム, iPhone Retinaディスプレイ */ 
@media only screen and (max-width : 320px) {