@charset "utf-8";

/*********************************************************************************/
/* Common
/*********************************************************************************/

/* IE */ * {zoom: 1;}

@font-face {
  font-family: 'FontAwesome';
  src: url('font-awesome/fonts/fontawesome-webfont.eot?v=4.0.3');
  src: url('font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('font-awesome/fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('font-awesome/fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('font-awesome/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/**/
html {
	font-size: 87.5%; /* 14px=14px/16px */
}
body, div, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, caption, form, fieldset, input, textarea, select, pre, address, blockquote, embed, object {
	margin: 0;
	padding: 0;
}
body, form textarea, form input {
	font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,"ＭＳ Ｐゴシック",sans-serif;
}
body {
	color: #333333;
	line-height: 1.7;
	text-align: center;
		-webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: bold;
}
p {
	font-weight: normal;
}
em, strong {
	font-style: normal;
	color: #2E772C;
}
ul, ol {
	list-style: none outside none;
}
dt img, dd img {
	vertical-align: bottom;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
}
caption, th {
	text-align: left;
}
img {
	border: 0 none;
	vertical-align: bottom;
}
a {
	cursor: pointer;
	outline: medium none;
	overflow: hidden;
}
a:link,
a:visited,
a:hover,
a:active,
a:focus
{
	/* color: #333333; */
	text-decoration: none;
}

.float-l {float: left; margin-right: 1em;}
.float-r {float: right; margin-left: 1em;}
.clear {clear: both;}

.mb20 {margin-bottom: 20px}

/* box-shadow
   Boxにシャドウを付ける際は要素を追記 */
#header h1,
#nav,
#slider,
[class^="panel-"],
#page2nd .contents
{
	width: 100%;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 3px 1px;
		-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 3px 1px;
		-moz-box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 3px 1px;
}

/* hidden-block
   txt非表示の際はここに要素を追記 */
#header h1 a,
#heading h1 a,
.contact,
#page2nd .contact a,
.support-form span,
input.login,
[class^="panel-"] a,
[class^="panel-"] span,
.more,
#footer h2,
.page-anchor
/* .add */
{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

/* hover-obj
   imgを背景に設定している要素にlinkを設定した際に追記 */
a:hover,
input.login:hover,
.panel a:hover
{
	opacity: .7;
		-moz-opacity: 0.7;
		filter: alpha(opacity=70);
}

/* form-parts */
::-webkit-input-placeholder {color: #CCCCCC;}
:-moz-placeholder {color: #CCCCCC;}

/* clear-obj */
#page:after,
#heading h1:after,
#news:after,
.info-block,
#news > div:after,
.news-nav:after,
#news-body .entry:after,
.panel-casestudies div:after,
#footer:after,
.links:after,
#page2nd:after
{content: ""; display: block; clear: both; height: 1%;}


/*********************************************************************************/
/* Page
/*********************************************************************************/

#page {
	text-align: left;
	padding-top: 20px;
	}
	#page > div {margin-bottom: 10px;}
	#page div > div {margin-bottom: 10px;}
	
	#page2nd {
		text-align: left;
		padding-top: 20px;
		width: 980px;
		margin: 0 auto;
		}
		#page2nd > div {margin-bottom: 20px;}
		/* #page2nd div > div {margin-bottom: 20px;} */
	
	#page .bx-pager-item {margin-bottom: 0;}

.inner,
.inner2nd
{
	text-align: left;
	margin: 0 auto;
	position: relative;
	}
	.inner2nd {width: 980px;}


/*********************************************************************************/
/* Column
/*********************************************************************************/

.left-container {
	float: left;
	width: 236px;
}

.right-container {
	float: left;
	position: relative;
	}
	.right-container2nd {
		float: left;
		width: 728px;
		margin-left: 16px;
	}

.se-service {
	width: 728px;
	height: 236px;
	position: absolute;
	top: 0;
	left: 0;
}

.panel-about {
	width: 236px;
	height: 236px;
	position: absolute;
	top: 0;
	left: 738px;
}

.info-block {
	width: 728px;
	height: 236px;
	position: absolute;
	top: 246px;
	left: 0;
}

.panel-trouble {
	width: 236px;
	height: 236px;
	position: absolute;
	top: 246px;
	left: 738px;
}

.panel-casestudies {
	width: 236px;
	height: 368px;
	position: absolute;
	top: 492px;
	left: 738px;
}


/*********************************************************************************/
/* Header
/*********************************************************************************/

#header {width: 236px;}

#header h1 {
	height: 352px;
	margin-bottom: 10px;
	background: #FFFFFF;
	}
	#header h1 a {
		display: block;
		width: 236px;
		height: 352px;
		background: url(../img/top/logo.png) no-repeat;
		}
		#page2nd #header h1 a {background: url(../img/top/logo-2nd.png) no-repeat;}

#nav {
	background: #000000;
	margin-bottom: 6px;
	}
	#nav li {
		width: 236px;
		position: relative;
	}
	#nav a {
		display: block;
		width: 216px;
		/*
		height: 51px;
		line-height: 50px;
		*/
		height: 45px;
		line-height: 44px;
		font-size: 13px;
		color: #FFFFFF;
		padding: 0 10px;
		background: url(../img/parts/underline-doted.png) repeat-x bottom;
		}
		#nav a:after {
			content: url(../img/parts/arrow-right-gray.png);
			float: right;
		}
		#nav li:last-child a {
			height: 44px;
			background: none;
		}

#nav .sub {
	background: #45A048;
	position: absolute;
	top: 0;
	left: 236px;
	z-index: 3000;
	display: none;
	}
	#nav .sub a {
		height: 30px;
		line-height: 30px;
		border-bottom: #65B064 solid 1px;
		background: none;
		}
		#nav .sub a:after {
			content: url(../img/parts/arrow-right-white.png);
			float: right;
		}
		#nav .sub li:last-child a {
			height: 30px;
			border-bottom: none;
		}

.left-container .contact {
	height: 180px;
	background: url(../img/top/contactus.png) no-repeat;
}

#page2nd .contact {
	color: #FFFFFF;
	width: 728px;
	height: 40px;
	background: url(../img/top/contactus-head.png) 46px 0 no-repeat;
	margin-bottom: 10px;
	position: relative;
	}
	#page2nd .contact a {
		display: block;
		background: url(../img/top/btn-contactus.png);
		width: 418px;
		height: 40px;
		position: absolute;
		top: 0;
		right: 0;
	}

#page2nd .header-links {
	float: right;
	margin-bottom: 10px;
	}
	#page2nd .header-links a {
		font-size: 12px;
		color: #FFFFFF;
		float: left;
		margin-left: 15px;
	}

/**/
#heading h1 {
	width: 210px;
	height: 23px;
	float: left;
	}
	#heading h1 a {
		display: block;
		width: 210px;
		height: 23px;
		background: url(../img/top/logo-global.png) no-repeat;
	}


/*********************************************************************************/
/* Banners
/*********************************************************************************/

#page .bx-controls-auto-item {
	margin-bottom: 0;
}

.bnr-large {/* margin-left: 10px; */}
.bnr-small {width: 236px;}

	.bnr-small a img {margin-bottom: 10px;}


/*********************************************************************************/
/* Support
/*********************************************************************************/

.support-form {
	float: right;
	width: 680px;
	margin: 0 0 15px 0;
	}
	#page2nd .support-form {margin-bottom: 10px;}

.support-form span {
	display: block;
	float: left;
	width: 262px;
	height: 26px;
	background: url(../img/top/support-txt.png) no-repeat;
	}
	#page2nd .support-form span {background: url(../img/top/support-txt-2nd.png) no-repeat;}

input.id,
input.password {
	font-size: 12px;
	height: 12px;
	border: #EEEEEE solid 1px;
	box-shadow: none;
	border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
	width: 138px;
	padding: 6px 5px;
	margin: 0 1px 0 0;
	float: left;
	}
	.support-form input:focus {border-color: #129FEA;}

input.login {
	display: block;
	width: 116px;
	height: 26px;
	background: url(../img/parts/button-login.png) no-repeat;
	border: none;
	cursor: pointer;
}


/*********************************************************************************/
/* main
/*********************************************************************************/

.crumb-list {margin-bottom: 10px;}

#page2nd .contents {
	clear: both;
	margin-bottom: 18px;
	background: #FFFFFF;
	/* border: #EBEBEB solid 1px; */
}

#page2nd .contents .inner {width: 688px; padding: 20px;}

#slider {
	width: 1220px;
	height: 482px;
	float: left;
	margin-right: 10px;
	overflow: hidden;
	background: #000000;
	#width: 726px;
	#height: 480px;
	#border: #EBEBEB solid 1px;
	}
	#slider .slide {
		margin-bottom: 0px;
		background: #FFFFFF;
	}

[class^="panel-"] {
	float: left;
	width: 236px;
	margin-right: 10px;
	}
	[class^="panel-"] > a {
		display: block;
		width: 236px;
		height: 236px;
	}
	.panel-about > a {background: url(../img/top/panel-about-portrait.png); /* height: 482px; */}
	.panel-dbcloud > a {background: url(../img/top/panel-dbcloud.png);}
	.panel-entry > a {background: url(../img/top/panel-entry.png);}
	.panel-staffneo > a {background: url(../img/top/panel-staffneo.png);}
	.panel-trouble > a {background: url(../img/top/panel-trouble.png);}

	.panel-casestudies div {padding: 5px;}

[class^="casestudies-"] {
	display: block;
	float: left;
	width: 226px;
	height: 134px;
	margin-top: 10px;
	}
	
	.panel-casestudies .title {display: block;}
	
	.casestudies-01 {background: url(../img/top/casestudies-01.png);}
	.casestudies-02 {background: url(../img/top/casestudies-02.png);}
	.casestudies-03 {background: url(../img/top/casestudies-03.png);}


/* 最新情報 */

.info-block {
	clear: both;
	width: 728px;
	margin-right: 10px;
	float: left;
}

#news {
	width: 728px;
	/* height: 482px; */
	position: relative;
	#width: 726px;
	/* #height: 480px; */
	#border: #EBEBEB solid 1px;
}

#news .title {
	display: block;
	background: url(../img/top/news-txt.png) no-repeat 25px 13px;
	width: 702px;
	height: 53px;
	margin: 0 13px;
	border-bottom: #2E772C solid 1px;
}

#news > div {padding: 13px;}

.news-nav {height: 38px;}

#page2nd .news-nav {margin-bottom: 0;}

.news-nav [class^="nav-"] {
	display: block;
	float: left;
	width: 120px;
	height: 38px;
	line-height: 38px;
	margin-right: 10px;
	}
	.news-nav [class^="nav-"]:last-child {margin-right: 0;}
	
	
	.news-nav a {
		text-indent: 0%;
		text-align: center;
		padding: 0;
	}
	
	/*
	.nav-01 {background: url(../img/top/btn-news-info.png);}
	.nav-02 {background: url(../img/top/btn-news-release.png);}
	.nav-03 {background: url(../img/top/btn-news-newfunction.png);}
	.nav-04 {background: url(../img/top/btn-news-media.png);}
	*/

#news-body .entry {
	font-size: 12px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: #EEEEEE solid 1px;
	}
	#news-body .entry:last-child {border-bottom: none;}
	
	.entry .date {font-size: 12px;} 
	
	#news-body .entry h4 a {
		color: #2E772C;
		/* text-decoration: underline; */
	}
	#news-body .entry h4 a, #news-body .entry span {
		text-indent: 0%;
		white-space: normal;
		overflow: visible;
	}
	p.description,
	#page2nd .contents #news p.description { margin-left: 91px; }
	
	/* #news-body .entry p {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		}
		#page2nd #news-body .entry p {
			overflow:  visible;
			white-space: normal;
			text-overflow: clip;
		} */
		
	#news-body .entry .img-container {
		float: left;
		margin: 0 10px 0 0;
		border: #EEEEEE solid 1px;
		display: table;
		}
		#news-body .entry .img-container p {
			display: table-cell;
			text-align: center;
			vertical-align: middle;
			padding: 0;
			border: none;
			width: 80px;
			height: 60px;
		}
		#news-body .entry .img-container img {
			width: 80px;
			/*
			position: relative;
			top: 50%;
			transform: translateY(-50%);
				-webkit-transform: translateY(-50%);
				-ms-transform: translateY(-50%);
			*/
		}
			
.hide {display: none;}

.more {
	display: block;
	width: 92px;
	height: 14px;
	background: url(../img/top/btn-more.png) no-repeat;
	position: absolute;
	bottom: 13px;
	right: 13px;
}

.information span:before {
	display: inline-block;
	font-family: FontAwesome;
	font-size: 10px;
	content: "\f05a  お知らせ";
	color: #FFFFFF;
	background: #87C083;
	padding: 0 5px;
	margin-right: .5em;
	height: 16px;
	line-height: 16px;
	vertical-align: text-bottom;
	width: 70px;
	text-align: center;
}

.release span:before {
	display: inline-block;
	font-family: FontAwesome;
	font-size: 10px;
	content: "\f067  リリース";
	color: #FFFFFF;
	background: #87C083;
	padding: 0 5px;
	margin-right: .5em;
	height: 16px;
	line-height: 16px;
	vertical-align: text-bottom;
	width: 70px;
	text-align: center;
}

.newfunction span:before {
	display: inline-block;
	font-family: FontAwesome;
	font-size: 10px;
	content: "\f013  新機能";
	color: #FFFFFF;
	background: #87C083;
	padding: 0 5px;
	margin-right: .5em;
	height: 16px;
	line-height: 16px;
	vertical-align: text-bottom;
	width: 70px;
	text-align: center;
}

.media span:before {
	display: inline-block;
	font-family: FontAwesome;
	font-size: 10px;
	content: "\f144  メディア掲載";
	color: #FFFFFF;
	background: #87C083;
	padding: 0 5px;
	margin-right: .5em;
	height: 16px;
	line-height: 16px;
	vertical-align: text-bottom;
	width: 70px;
	text-align: center;
}


/*********************************************************************************/
/* Footer
/*********************************************************************************/

.page-anchor {
	display: block;
	background: url(../img/top/page-anchor.png) no-repeat;
	width: 118px;
	height: 37px;
	position: absolute;
	top: -18px;
	right: 0;
}

#footer {
	clear: both;
	width: 100%;
	min-width: 980px;
	background: url(../img/top/footer-bg.gif) repeat;
	border-top: #EEEEEE solid 1px;
	margin-top: 50px;
	}
	#footer .info {
		width: 236px;
		/* background-color: #064A87; */
		background-color: #000000;
		}
		#footer h2 {
			width: 236px;
			height: 236px;
			background: url(../img/top/logo-footer.png) repeat;
		}
		#footer h2 a {
			display: block;
			width: 180px;
			height: 95px;
			margin: 20px 0 0 28px;
		}

.add {
	width: 600px;
	margin: 20px 0 20px 0;
	}
	.inner2nd .add {background-position: 18px 0;}
	
	.add span {
		color: #064A87;
		font-weight:bold;
		width: 120px;
		display: block;
		float: left;
	}

.links {margin-bottom: 20px;}

.links > ul {
	float: left;
	width: 290px;
	background: url(../img/top/section-line.gif) left repeat-y;
	margin: 0 0 20px 0;
	padding: 0 18px;
	}
	.inner2nd .links > ul {/* width: 154px; */ width: 218px;}
	.inner2nd .links > ul:last-child {padding-right: 0;}
	
	.links > ul:first-child {
		background: none;
		padding-left: 0;
	}
	.links > ul:last-child {padding-right: 0;}

.links a {text-decoration: underline;}

.links a,
.links span {
	color: #064A87;
	font-size: 13px;
	}
	[class^="level-1-"] {
		display: block;
		font-weight: bold;
		padding-left: 18px;
		}
		.level-1-down {background: url(../img/parts/arrow-down-blue.png) 0 3px no-repeat;}
		.level-1-right {background: url(../img/parts/arrow-right-blue.png) 0 3px no-repeat;}
		
	.links ul ul {margin-left: 0;}
	.links ul ul li {
		padding-left: 18px;
		background: url(../img/parts/arrow-right-blue-sub.png) 0 5px no-repeat;
	}

.copyright {
	clear: both;
	font-size: 10px;
	margin-bottom: 40px;
	}
	.copyright a {color: #65B064}

/* #footer .footer-link {font-size: x-small;} */


/*********************************************************************************/
/* Media Queries
/*********************************************************************************/

@media screen and (min-width: 1220px) {

	#page {
		width: 1220px;
		margin: 0 auto;
	}
	.inner {width: 1220px;}
	
	.right-container {width: 974px; margin-left: 10px;}
	
	.panel-casestudies {/*height: 482px;*/height: 368px; margin-right: 0;}
	
	.panel-casestudies .title {
		background: url(../img/top/casestudies-txt01.png);
		width: 236px;
		height: 65px;
	}
	.panel-casestudies div {height: 340px; overflow: hidden;}
	
	.panel-about,
	.panel-trouble,
	.panel-staffneo
	{margin-right: 0;}
	
	#footer .right-container {width: 984px; margin-left: 0;}
	#footer .right-container > div {margin-left: 40px;}

}

@media screen and (max-width: 1219px) {
	
	#page {
		width: 980px;
		margin: 0 auto;
	}
	#page:after, #page2nd:after {content: ""; display: block; clear: both; height: 1%;}
	
	.inner {width: 980px;}
	
	.right-container {
		width: 728px;
		margin-left: 16px;
		}
		#page .right-container {height: 1330px;}
		
	.panel-casestudies {
		width: 728px;
		/* height: 236px; */
		}
	.panel-casestudies .title {
		background: url(../img/top/casestudies-txt02.png) no-repeat 25px 13px;
		width: 702px;
		height: 53px;
		margin: 0 13px;
		border-bottom: #FFFFFF solid 1px;
		}
		.panel-casestudies div {
			padding: 0 13px;
		}
	
	#footer .add {background-position: 18px 0;}
			
	.links > ul {width: 218px;}
	
	.links > ul:last-child {
		padding-right: 0;
	}
	
	#slider {
		width: 980px;
		height: 391px;
		margin-left: 0;
	}
	/*
	.panel-entry,
	.panel-trouble,
	*/
	.panel-staffneo
	{margin-right: 0;}

	.panel-about {margin-right: 10px;}
	
	[class^="casestudies-"] {
		display: block;
		float: none;
		width: 702px;
		height: 60px;
		margin-top: 10px;
		}
		.casestudies-01 {background: url(../img/top/casestudies-01-landscape.png);}
		.casestudies-02 {background: url(../img/top/casestudies-02-landscape.png);}
		.casestudies-03 {background: url(../img/top/casestudies-03-landscape.png);}
	
	.panel-about {
		width: 482px;
		height: 236px;
		position: absolute;
		top: 246px;
		left: 0;
		}
		.panel-about > a {background: url(../img/top/panel-about-landscape.png); width: 482px;}
	
	.info-block {
		width: 728px;
		height: 236px;
		position: absolute;
		top: 706px;
		left: 0;
	}
	
	.panel-trouble {
		width: 236px;
		height: 236px;
		position: absolute;
		top: 246px;
		left: 492px;
	}
	
	.panel-casestudies {
		width: 728px;
		height: 204px;
		position: absolute;
		top: 492px;
		left: 0;
	}

}