@charset 'utf-8';

/* initial Setting *********************************** */
article, aside, dialog, figure, footer, header, hgroup, nav, section {
 display: block;
 }
ul, ol, li, dl, dt, dd, form, p, h1, h2, h3, h4, h5 {
 margin:  0;
 padding: 0;
 font-size:   100%;
 font-weight: normal;
 }
html, body {
 margin:  0;
 padding: 0;
 width: 100%;
 background: #f6f6f6;
 }
img, area { border: 0 none; }
li  { list-style-type: none; }
p { margin-bottom: 0.5em; }

/* document Default ************************************* */
body, input, textarea {
 color:       #333;
 font-size:   14px;
 line-height: 1.2;
 font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
 Osaka, "ＭＳ Ｐゴシック", "HelveticaNeue", "Helvetica Neue", Helvetica, sans-serif; /* "Segoe UI", Helvetica,*/
 -webkit-font-smoothing: antialiased; /* fix for webkit rendering */
 -webkit-text-size-adjust: none;
 }
a, a:visited {
 color: #555;
 text-decoration: none;
 }
a:hover {
 text-decoration: underline;
 }

/* shell Design ***************************************** */

.shell {
 position: relative;
 margin:   0 auto;
 padding:  0;
 padding-top: 13px;  /* LOGO's top-margin adjust for global menu */
 }


/* page Title ***************************************** */

h1 {
 position: relative;
 height:   43px;  /* Header height */
 }
h1 a {
 display: block;
 width:   97px;
 height:  43px;
 text-indent: -1176px;
 background:  url(/jp/styles/images/justsystems.png) no-repeat 0 0;
 }

h1.nx {
 height: 90px;  /* Header height */
 }

h1.nx a { display:none; }

/* global Navigation 2014 ************************************ */
#nav {
 position: absolute;
 width: 100%;
 height: 52px;
 top: 30px;
 padding-left:3px;
 background: url(/jp/lib/contents/images/justsystems.png) no-repeat 99.5% 60%;
 }
#nav li {
 display:inline-block;
 width:179px;
 height:52px;
 line-height:52px;
 background:#34495e;
 text-align:center;
 font-size:18px;
 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,
 Osaka, "ＭＳ Ｐゴシック", "HelveticaNeue", "Helvetica Neue", Helvetica, sans-serif; /* "Segoe UI", Helvetica,*/
 }
#nav li.nav_fresh, #nav li.nav_career {
 width: 177px;
 height: 50px;
 line-height:50px;
 border: #f2f2f2 1px solid;
 border-radius: 5px;
 position:absolute;
 background: #3498DB;
 }
#nav li.nav_fresh a, #nav li.nav_career a {
 transition-duration: 0.5s;
 transition-property: color;
 transition-timing-function: ease-out;
}
#nav li.nav_fresh a:hover, #nav li.nav_career a:hover {
 color: #91d7ff;
 text-decoration: none;
}
#nav li.nav_rec {
 position:relative;
 }
#nav li.nav_rec ul{
 position:absolute;
 top:52px;
 z-index:10;
 }
#nav li.nav_fresh {
 top:0;
 }
#nav li.nav_career {
 top:51px;
 }
#nav a, #nav p {
 display:block;
 font-weight:bold;
 color:#fff;
 }
#nav a {
 -moz-transition-property:    color;
 -webkit-transition-property: color;
 -o-transition-property:      color;
 -ms-transition-property:     color;
 transition-property: color;

 -moz-transition-duration:    0.5s;
 -webkit-transition-duration: 0.5s;
 -o-transition-duration:      0.5s;
 -ms-transition-duration:     0.5s;
 transition-duration: 0.5s;

 -moz-transition-timing-function:    ease-out;
 -webkit-transition-timing-function: ease-out;
 -o-transition-timing-function:      ease-out;
 -ms-transition-timing-function:     ease-out;
 transition-timing-function: ease-out;
/*
 -moz-transition:    color 0.5s ease-out 0;
 -webkit-transition: color 0.5s ease-out 0;
 -o-transition:      color 0.5s ease-out 0;
 -ms-transition:     color 0.5s ease-out 0;
 transition: color 0.5s ease-out 0;
*/
 }
#nav a:hover {
 text-decoration:none;
 color: #91d7ff;
 }
#nav li.nav_one, #nav li.nav_prod {
 -webkit-border-radius: 5px 0 0 5px;
 border-radius:         5px 0 0 5px;
 }
#nav li.nav_biz, #nav li.nav_rec {
 -webkit-border-radius: 0 5px 5px 0;
 border-radius:         0 5px 5px 0;
 }
#nav li.nav_one, #nav li.nav_biz {
 width: 137px;
 }
#nav li.nav_biz {
 margin-right:54px;
 }
#nav li.nav_biz.selected {
 background:#3498db;
 }
#nav li.nav_one.selected {
 background:#e74c3c;
 }


/* global Navigation ***************************************** */

#gnav {
 position: absolute;
 top:  12px;  /* global Navigation's top-margin */
 left: 119px;
 }
#gnav:after { content:"."; display: block;
 height: 0; clear: both; visibility: hidden; }

#gnav li {
 float: left;
 margin-left: 4px;    /* spacing each nav buttons */
 -text-align: center;
 }
#gnav li.showProducts { position: relative; }
#gnav li.backHome { display: none; }
#gnav li.selectSearch input { font-size:11px; }
#gnav li.selectSearch input.searchExec { font-size:10px; }
#gnav li.selectSearch input.searchInput {
 width:  340px;
 border: 1px #ddd solid;
 margin-right: 2px;
 }
#gnav li.selectSearch .selectSearchMarker {
 background: url(/jp/styles/images/search-mark.png) no-repeat scroll 2px 2px #fdfdfd;
 }
#gnav li a {
 display:   block; 
 padding:   4px 30px;    /* nav button label margins */
 font-size: 12px;
 background-color: #fdfdfd;
 border: #ddd 1px solid;
 -webkit-border-radius: 4px;
 border-radius:         4px;
 }
#gnav li.selectOne a {
 -webkit-border-radius: 6px 0 0 6px;
 border-radius:         6px 0 0 6px;
 }
#gnav li.selectBiz { margin-left: 1px; }
#gnav li.selectBiz a {
 -webkit-border-radius: 0 6px 6px 0;
 border-radius:         0 6px 6px 0;
 }
#gnav li a, #gnav li a:visited {
 background: #fff;
 background: -moz-linear-gradient(top, #fff, #f0f0f0);
 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f0f0f0));
 background: linear-gradient(top, #fff, #f0f0f0);
 --background: -moz-linear-gradient(top, #fff, #f2f2f2 15%, #ededed);
 --background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.15, #f2f2f2), to(#ededed));
 }
#gnav li a:hover {
 text-decoration: none;
 background: #f2f2f2;
 background: -moz-linear-gradient(top, #f2f2f2, #fff);
 background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#fff));
 background: linear-gradient(top, #f2f2f2, #fff);
 --background: -moz-linear-gradient(top, #e0e0e0, #f0f0f0 85%, #f6f6f6);
 --background: -webkit-gradient(linear, left top, left bottom, from(#e0e0e0), color-stop(0.85, #f0f0f0), to(#f6f6f6));
 }
.open {
 display: none;
 float:   left;
 width:   54px;
 height:  44px;
 margin-right: 10px;
 background: url(images/phone-menu.png) center center no-repeat; /*#2c2e34; #333;#494d57;*/
 text-indent: -1170px;
 }


/* grid settings ***************************************** */

.mainStage {
/* background-color:#eee;*/
 margin:20px 3px 10px 3px;
 max-width:933px;
 position:relative;
 }

.subStage {
 position:absolute;
 margin:10px 3px 20px 3px;
 }

.multiLanes {
 -width:100%;
 position:relative;
 }
.multiLanes:after { content:"."; display: block;
 height: 0; clear: both; visibility: hidden; }

.lanes {
 float: left;
 width:222px;
 margin-left:15px;
 }
.lane1 { margin-left:3px; }
.lane5 { margin-right:3px; }
.stockLane { display:none; }


/* pmark settings ***************************************** */
.pmark {
 float:right;
 margin:0 0 13px 13px;
 }


/* footer settings ***************************************** */
#footer {
 height:32px;
 overflow-y:hidden;
 position:relative;
 margin:0 3px;
 }
.footerInner {
 font-size:11px;
 height:84px;
 background:#585D69;
 color:#f2f2f2;
 }
.footerInner a,.footerInner a:visited,.footerInner a:hover{
 color:#f2f2f2;
 }
#footer:after { content:"."; display: block;
 height: 0; clear: both; visibility: hidden; }

.footer_copyright {
 float:left;
 margin:5px 1.5em 0 8px;
 }
.footer_update {
 float:left;
 margin-top:5px;
 }
.footer_statement {
 float:right;
 margin:5px 8px 0 5px;
 }


/* footerGuide settings ***************************************** */
.footerGuide {
 position:relative;
 background:#585D69;
 color:#e3f9fc;
 margin:0 3px 1px 3px;
 padding:15px 0;
 }

.footerGuide:after { content:"."; display: block;
 height: 0; clear: both; visibility: hidden; }

.footerGuide a, .footerGuide a:visited, .footerGuide a:hover {
 color: #f2f2f2;
 }

.category {
 float: left;
 width:202px;
 margin-left:20px;
 font-size:12px;
 line-height:15px;
 }

.category li {
 margin-left:16px;
 list-style: disc outside;
 padding-bottom:5px;
 }

.category h4 {
 font-weight:bold;
 padding-top:12px;
 }

/* media Query settings ***************************************** */

/* 5Lanes (222px*5+15px*4+3px*2) */
@media only screen and (min-width: 1192px) {
	.shell { width: 1176px; }
}

/* 4Lanes (222px*4+15px*3+3px*2) */
@media only screen and (min-width: 957px) and (max-width: 1191px) {
	.shell { width: 939px; }
	#gnav li a { padding: 4px 15px; }
	#gnav li.selectSearch input.searchInput { width: 260px; }


	h1.nx { height: 72px; }
	#nav {
	 height: 42px;
	 top: 26px;
	 padding-left:3px;
	 background: url(/jp/lib/contents/images/justsystems-m.png) no-repeat 99.5% 60%;
	 }
	#nav li {
	 width:144px;
	 height:42px;
	 line-height:42px;
	 font-size:14px;
	 }
	#nav li.nav_fresh, #nav li.nav_career {
	 width:142px;
	 height:40px;
	 line-height:40px;
	 font-size:14px;
	 }
	#nav li.nav_rec ul{
	 top:42px;
	 }
	#nav li.nav_career {
	 top:41px;
	 }
	#nav li.nav_one, #nav li.nav_prod {
	 -webkit-border-radius: 4px 0 0 4px;
	 border-radius:         4px 0 0 4px;
	 }
	#nav li.nav_biz, #nav li.nav_rec {
	 -webkit-border-radius: 0 4px 4px 0;
	 border-radius:         0 4px 4px 0;
	 }
	#nav li.nav_one, #nav li.nav_biz {
	 width: 110px;
	 }
	#nav li.nav_biz {
	 margin-right:43px;
	 }


	.lane5 { display:none; }
}

/* 3Lanes (222px*3+15px*2+3px*2) */
@media only screen and (min-width: 720px) and (max-width: 956px) {
	.shell { width: 702px; }
	#gnav li a { padding: 4px 8px; }
	#gnav li.selectSearch input.searchInput { width: 92px; }

	h1.nx { height: 54px; }
	#nav {
	 height: 31px;
	 top: 21px;
	 padding-left:3px;
	 background: url(/jp/lib/contents/images/justsystems-s.png) no-repeat 99.5% 70%;
	 }
	#nav li {
	 width:107px;
	 height:31px;
	 line-height:31px;
	 font-size:12px;
	 }
	#nav li.nav_fresh, #nav li.nav_career {
	 width:105px;
	 height:29px;
	 line-height:29px;
	 font-size:12px;
	 }
	#nav li.nav_rec ul{
	 top:31px;
	 }
	#nav li.nav_career {
	 top:30px;
	 }
	#nav li.nav_one, #nav li.nav_prod {
	 -webkit-border-radius: 3px 0 0 3px;
	 border-radius:         3px 0 0 3px;
	 }
	#nav li.nav_biz, #nav li.nav_rec {
	 -webkit-border-radius: 0 3px 3px 0;
	 border-radius:         0 3px 3px 0;
	 }
	#nav li.nav_one, #nav li.nav_biz {
	 width: 82px;
	 }
	#nav li.nav_biz {
	 margin-right:32px;
	 }


	.lane5,.lane4 { display:none; }
}

/* 2Lanes for Mobile Display (222px*2+15px+3px*2) */
@media only screen and (max-width: 719px) {
	.shell { width: 465px; padding-top:0; }
	#gnav { display: none; }
	.lane5,.lane4,.lane3 { display:none; }
	h1 {
	 height: 44px;  /* Header height */
	 background: #323232 url(images/phone-justsystems.png) center center no-repeat; /*#111;#585D69;*/
	 }


	h1.nx {
	 height: 44px;
	 }


	h1 a, #nav { display: none; }
	.open { display: block; }


	h1.nx .open { display: block; }


	#pageslide {
	 width: 200px;
	 overflow-x: hidden;
	 }
	#pageslide #gnav {
	 margin-bottom: 0;
	 position: static;
	 }
	#pageslide #gnav li {
	 float: none;
	 margin-left: 0;
	 padding: 10px 0;
	 border-bottom: 1px solid #666;
	 }
	#pageslide #gnav li.selectSearch { display: none; }
	#pageslide #gnav li.backHome     { display: block; }
	#pageslide #gnav li a {
	 display: inline; 
	 font-size: 14px;    /* check! */
	 background: none;
	 border: none;
	 padding: 0;
	 }
	#pageslide #gnav li a, #pageslide #gnav li a:visited {
	 color: #f2f2f2;
	 background:none;
	 text-decoration: none;;
	 }
	#pageslide #gnav li a:hover {
	 color: #fff;
	 background:none;
	 text-decoration: underline;
	 }
	#footer { height:47px; }
}

/* 1Lane minimum (222px+3px*2) */
@media only screen and (max-width: 481px) and not(-webkit-min-device-pixel-ratio:2) {
	.shell    { width: 228px; }
	.shell h1 { font-size: 14px; }
	.lane5,.lane4,.lane3,.lane2 { display:none; }
	#footer { height:77px; }
}