@charset "UTF-8";

/* ------------------------------------------------------------------
	Font&Link
-------------------------------------------------------------------*/
html {
	color:#333;
}
a {
	color:#333;
	text-decoration:none;
}
a {
	-webkit-transition:all 0.4s;
	-moz-transition:all 0.4s;
	-o-transition:all 0.4s;
	-ms-transition:all 0.4s;
	transition:all 0.4s;
}
a i {
	margin-right:0.2em;
}
a:hover {
	color:#ff0000;
}
a img{
	-webkit-transition:all 0.4s;
	-moz-transition:all 0.4s;
	-o-transition:all 0.4s;
	-ms-transition:all 0.4s;
	transition:all 0.4s;
}
a:hover img{
	opacity:0.4;
}
.touchHover,
.noTapColor,
button {
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}



/* ------------------------------------------------------------------
	Headline Pattern
-------------------------------------------------------------------*/
.hlPt01 {
	font-size:2em;
	font-weight:bold;
	background:#ddd;
	padding:10px 0 10px 20px;
	margin-bottom:30px;
}
.hlPt02 {
	font-size:3em;
	font-family: 'Montserrat', sans-serif;
	padding:0 0 10px;
	margin-bottom:40px;
}
.hlPt03 {
	font-weight: bold;
	font-size:2.2em;
	padding:0;
	margin-bottom:40px;
}



/* ------------------------------------------------------------------
	Button Pattern
-------------------------------------------------------------------*/
.btPt01 {
	padding:10px 30px;
	color:#fff;
	background:#5DA2D2;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.btPt01:hover {
	color:#fff;
	background:#425996;
}
.btPt02 {
	padding:10px 30px;
	color:#333;
	border-bottom:4px solid #333;
}
.btPt02:hover {
	color:#fff;
	border-bottom-color:#425996;
	background:#425996;
}
.btPt03 {
	display:inline-block;
	width:100%;
	text-align:center;
	padding:20px 30px;
	color:#fff;
	background:#439B75;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.btPt03:hover {
	color:#fff;
	background:#3F6E5A;
}



/* ------------------------------------------------------------------
	Form
-------------------------------------------------------------------
#form {
	width:100%;
	position:relative;
	z-index:0;
	color:#666;
	background:#fafafa;
}
#form p {
	margin-bottom:20px;
}
#form .must {
	color:#d3323e;
}
#form dl {
	font-size:16px;
}
#form dt {
	font-weight:bold;
	margin-bottom:10px;
}
#form dd {
	margin-bottom:20px;
}
#form dd.privacy {
	height:10em;
	font-size:12px;
	color:#999;
	overflow:scroll;
}
#form .button {
	width:100%;
	height:3em;
	border:none;
	background:#d3323e;
	color:#fff;
}
#form input.buttonback[type="button"]{
	width:100%;
	height:3em;
	border:none;
	background:#666;
	color:#fff;
}
input.buttontop[type="button"] {
	width:100%;
	height:3em;
	border:none;
	background:#d3323e;
	color:#fff;
}
table.form {
	width:100%;
	border-collapse:collapse;
	margin-bottom:20px;
}
table.form th{
	padding:5px;
	background:#E1E9EC;
	width:30%;
}
table.form td{
	width:100%;
	padding:5px;
	background:#FFF;
}
input,
select,
textarea,
button {
	font:16px Arial, Helvetica, sans-serif;
	vertical-align:middle;
	color:#333333;
	height:40px;
}
textarea {
	height:auto !important;
}
input:focus,
select:focus,
textarea:focus {
	color:#000000;
}
input[type="text"],
input[type="password"],
textarea {
	width:100%;
	padding:5px;
	border:1px solid #aaa;
	background:#fff;
	font-weight:normal;
	outline:none;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
select {
	width:4em;
	padding:5px;
	border:1px solid #aaa;
	background:#fff;
	font-weight:normal;
	outline:none;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
input[type="text"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
	border:1px solid #41210f;
}
input[type="checkbox"],
input[type="radio"] {
	margin-right:0.8em;
	-moz-transform-origin: left center;
	-moz-transform: scale( 1.5 , 1.5 );
	-webkit-transform-origin: left center;
	-webkit-transform: scale( 1.5 , 1.5 );
 }
input[type="button"] {
	-webkit-transition:all 0.4s;
	-moz-transition:all 0.4s;
	-o-transition:all 0.4s;
	-ms-transition:all 0.4s;
	transition:all 0.4s;
}
input[type="button"]:hover {
	opacity:0.4;
	cursor:pointer;
}
input[type="file"] {
	width:100%;
	font-size:12px;
}
*/

/* ------------------------------------------------------------------
	Base
-------------------------------------------------------------------*/
body {
	min-width:320px;
	position:relative;
	height:auto !important;
}
#container {
}
#contents {
	padding-top:0;
}
.innerBox {
	width:960px;
	margin:0 auto;
	padding:160px 0;
}
.innerBoxForm {
	width:640px;
	margin:0 auto;
	padding:70px 0;
}
#top,
#loopSlide,
#about,
#recruit,
#company,
#contact {
	margin-top:-100px;
	padding-top:100px;
}
h2 {
	margin-bottom:60px;
	text-align:center;
}
img {
	vertical-align:bottom;
}


/* ------------------------------------------------------------------
	Header
-------------------------------------------------------------------*/
#header {
	width:100%;
	height:80px;
	position:fixed;
	top:0;
	left:0;
	z-index:9999;
}
.headerInner {
	position:relative;
}
.headerInner #logo {
	display:inline-block;
	position:absolute;
	top:20px;
	left:20px;
}
.headerInner #navi {
	display:inline-block;
	position:absolute;
	top:30px;
	right:0;
}

/* ------------------------------------------------------------------
	Navi
-------------------------------------------------------------------*/
#navi ul {
	display:inline-block;
}
#navi li {
	font-family:'Montserrat', sans-serif;
	font-size:16px;
	display:inline-block;
	padding:0 30px 0 15px;
	background:url(../img/bg_menu_border.png) 100% 50% no-repeat;
}
#navi li:last-child {
	background:none;
}
#navi li a {
	color: #2476B5;
}
#navi li a:hover {
	color:#9FD7F4;
}


/* ------------------------------------------------------------------
	Keyv
-------------------------------------------------------------------*/
#keyv {
	width:100%;
	height:780px;
	background-image:url(../img/bg_keyv.png);
	background-position:0 0;
	background-size:cover;
	background-repeat:no-repeat;
	text-align:center;
	padding-top:320px;
}

.keyvImg p {
	color: #fff;
	padding-top: 30px;
	font-size: 26px;
}
.keyvImg p span {
	letter-spacing:-0.3em;
}
.simply-scroll-container {
    position: relative;
}
.simply-scroll-clip {
    position: relative;
    overflow: hidden;
}
.simply-scroll-list {
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.simply-scroll-list li {
    float: left; /* Horizontal scroll only */
    padding: 0;
    margin: 0;
    width: 640px;
    height: 440px;
}
.simply-scroll-list li img {
    display: block;
}


/* ------------------------------------------------------------------
	Message
-------------------------------------------------------------------*/
#loopSlide {
	position:relative;
	z-index:60;
}
#message {
	width:100%;
	position:absolute;
	top:0;
	left:0;
	margin-top:-60px;
}
#message .mesInner {
	width:960px;
	margin:0 auto;
	z-index:999;
}
#message .mesInner .mesBox {
	display:inline-block;
	background-color:#2476B5;
	padding:60px 50px;
	width:500px;
	height:300px;
	color:#fff;
}
#message .mesInner .mesBox dt {
	font-family: 'Montserrat', sans-serif;
	font-size:22px;
}
#message .mesInner .mesBox dd {
	font-size:28px;
	font-weight: bold;
}


/* ------------------------------------------------------------------
	about
-------------------------------------------------------------------*/
#about {
	width:100%;
	padding-top:60px;
	background:url(../img/bg_ourmerit.gif);
	position:relative;
	z-index:50;
}
#about div.aboutBox {
	margin-bottom:100px;
}
#about div.aboutBox dl {
	width:410px;
}
#about div.aboutBox dt {
	margin-bottom:20px;
}
#about div.aboutBox dd strong {
	font-size: 1.2em;
}


#about div.aboutBox dl.box01,
#about div.aboutBox dl.box03 {
	float:left;
}
#about div.aboutBox dl.box02 {
	float:right;
}
#about div.aboutBox .imgBox01,
#about div.aboutBox .imgBox03 {
	width:480px;
	float:right;
}
#about div.aboutBox .imgBox02 {
	width:480px;
	float:left;
}


/* ------------------------------------------------------------------
	Company
-------------------------------------------------------------------*/
#company {
	width:100%;
	color:#fff;
	background-image:url(../img/bg_keyv_mono.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:50% 50%;
	position:relative;
	z-index:30;
}
#company dl {
	margin-bottom:40px;
}
#company dt {
	position: absolute;
	left: 0;
	width: 9em;
	padding:20px 0;
	font-size:16px;
}
#company dd {
	padding:20px 20px 20px 9em;
	border-bottom: solid 1px #fff;
}
@media only screen and (max-width:640px) {
}


/* ------------------------------------------------------------------
	GoogleMap
-------------------------------------------------------------------*/
#googlemap {
	width:100%;
    height:300px;
	position:relative;
	z-index:20;
}


/* ------------------------------------------------------------------
	Contact
-------------------------------------------------------------------*/
#contact {
	width:100%;
	position:relative;
	z-index:10;
	background:#fff;
}
#contact p {
	text-align:center;
	font-size:1.5em;
	margin-bottom:40px;
}
#contact ul {
	width:640px;
	display:block;
	height:120px;
	margin:0 auto;
	border: 4px solid #2476B5;
}
#contact li {
	padding-top: 35px;
	width: 300px;
	display:block;
	margin:0 auto;
	font-size:2em;
	color: #2476B5;
	font-family: 'Montserrat', sans-serif;
}


/* ------------------------------------------------------------------
	Page Top
-------------------------------------------------------------------*/
#pagetop {
	width:100%;
	background:#2476B5;
	text-align:center;
}
#pagetop a {
	font-size:1.5em;
	font-family: 'Montserrat', sans-serif;
	display:block;
	padding:20px;
	color:#fff;
}
#pagetop a:hover {
	color: #2476B5;
	background:#9FD7F4;
}


/* ------------------------------------------------------------------
	Footer
-------------------------------------------------------------------*/
#footer {
	clear:both;
	padding:20px;
	background:#444;
	text-align:center;
}
#footer small {
	color:#fff;
	font-size:12px;
}