@charset "utf-8";

/*********************************************************************
Copyright (C) 2009 WEB DESIGN LAB (http://www.webdlab.com/)
Licensed under the MIT License:
http://www.opensource.org/licenses/mit-license.php
*********************************************************************/

/*--Base------------------------------------------------------------*/

html,body {
	width: 100%;
	height: 100%;
}

html {
	height: 100%;
	overflow-y: scroll;
}

/*--Reset-----------------------------------------------------------*/

* {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

img {
	border: none;
	vertical-align: middle;
}

ul,ol {
	list-style: none;
}

/*--Text------------------------------------------------------------*/

body {
	font-size: 88%;
	font-weight: normal;
	line-height: 1.5;
	font-family:Century Gothic, Helvetica , Arial , Verdana , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	-webkit-text-size-adjust: 100%;
	color: #545454;
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
}

/*--Link------------------------------------------------------------*/

a,
a:link {
	color: #545454;
}

a:visited {
	color: #545454;
}

a:hover,
a:active {
	color: #545454;
}

a:focus {
	outline: none;
}

/*--HTML5-----------------------------------------------------------*/

article,aside,details,footer,header,main,menu,nav,section,summary {
	display: block;
}

/*--sample----------------------------------------------------------*/

/*--layout----------------------------------------------------------*/

#wrapper {
	width: 100%;
}

#header {
	width: 100%;
}

#header header {
	margin: 0 auto;
}

#contents {
	margin: 0 auto;
	min-width: 960px;
	width: 100%;
	min-height: 500px;
}

#footer {
	min-width: 960px;
}

#footer footer {
	margin: 0 auto;
	height: 30px;
}

#header header,
#footer footer {
	width: 86%;/*�Z���^�[�Œ� or ���L�b�h���C�A�E�g�̕ύX(���L�b�h���C�A�E�g�ɂ���ꍇ��width��100%�ɕύX)*/
}

/*--common----------------------------------------------------------*/

#header h1,
#header h2,
#contents h3,
#header p,
#contents p,
#footer p {
	padding: 0px;
}

/*top*/

.topLogo {
	float: left;
}

.gnav {
	float: right;
}

.headerInner {
	overflow: hidden;
	margin-top: 72px;
}

/* clearfix */
.headerInner:before,
.headerInner:after {
    content: "";
    display: table;
}
 
.headerInner:after {
    clear: both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.headerInner {
    zoom: 1;
}

.gnav01 {
	float: left;
	margin-left: 20px;
}

.gnav {
	overflow: hidden;
	margin-top: 15px;
	font-size: 15px;
}

/* clearfix */
.gnav:before,
.gnav:after {
    content: "";
    display: table;
}
 
.gnav:after {
    clear: both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.gnav {
    zoom: 1;
}

.mainLogo {
	text-align: center;
	width: 723px;
	margin: 300px auto;
	position: relative;
}

.mainLogoBox {
	margin: 0 auto;
	width: 723px;
	height: 250px;
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
}

.concept {
	padding-top: 510px;
}

.conceptBg {
	background-image: url(../img/top/concept_bg.png);
	background-position: center center;
	background-size: cover;
	height: 100vh;
	width: 100%;
}

.contentTitle {
	text-align: center;
	font-size: 34px;
	letter-spacing: 0.17em;
	font-weight: normal;
	margin-bottom: 100px;
}

.conceptText {
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	line-height: 300%;
	letter-spacing: 0.2em;
	margin-top: 100px;
}

.contentLogo {
	text-align: center;
	margin-top: 50px;
}

.about {
	margin-top: 200px;
}

.aboutTable {
	max-width: 700px;
	margin: 100px auto 0 auto;
	font-weight: 500;
	font-size: 14px;
	line-height: 200%;
}

.aboutTable th {
	width: 20%;
	text-align: left;
	font-weight: 500;
	vertical-align: top;
	padding-top: 16px;
}

.aboutTable td {
	padding-top: 16px;
}

.service {
	margin-top: 200px;
}

.moreBox {
	margin: 80px auto 0 auto;
	border: 1px #555555 solid;
	width: 418px;
	height: 53px;
	text-align: center;
	line-height: 53px;
	font-size: 23px;
}

.works {
	margin-top: 200px;
}

.works02 {
	margin-top: 60px;
}

.worksBoxContainer {
    display:-webkit-box;
    display:-moz-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-pack:justify;
    -moz-box-pack:justify;
    -webkit-flex-pack:justify;
    -moz-flex-pack:justify;
    -ms-flex-pack:justify;
    -webkit-justify-content:space-between;
    -moz-justify-content:space-between;
    justify-content:space-between;
}

.worksBox {
	text-align: center;
	background-color: #525252;
	margin: 0 20px;
	width: 25%;
	color: #FFF;
	height: 260px;
	line-height: 260px;
	font-size: 16px;
}

.worksBox a{
	color: #FFF;
}

.news {
	margin-top: 200px;
	text-align: center;
}

.blogNewBox {
	margin: 0 auto;
	width: 750px;
}

.contact {
	margin-top: 200px;
}

.contactLeft {
	float: left;
	width: 618px;
}

.contactRight {
	float: left;
	margin-top: 55px;
	font-size: 18px;
	color: #535353;
	line-height: 300%;
}

.contactContainer {
	overflow: hidden;
	width: 962px;
	margin: 0 auto;
}

/* clearfix */
.contactContainer:before,
.contactContainer:after {
    content: "";
    display: table;
}
 
.contactContainer:after {
    clear: both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.contactContainer {
    zoom: 1;
}

/**/
.contactLeft {
	max-width: 618px;
	width:100%;
	margin:0 auto;
	position:relative;
	margin-right: 112px;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }

#contact {
	padding:25px;
	margin: 30px 0;
}

#contact h3 {
	color: #F96;
	display: block;
	font-size: 30px;
	font-weight: 400;
}

#contact h4 {
	margin:5px 0 15px;
	display:block;
	font-size:13px;
}

fieldset {
	border: medium none !important;
	margin: 0 0 10px;
	min-width: 100%;
	padding: 0;
	width: 100%;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
	width:100%;
	border:1px solid #CCC;
	background: #999999;
	margin: 0 0 5px;
	padding: 10px;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
	-webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid #AAA;
}

#contact textarea {
	height:100px;
	max-width:100%;
  resize:none;
}

#contact button[type="submit"] {
	cursor:pointer;
	width:162px;
	border: 1px solid #999999;
	background: #fff;
	color: #535353;
	margin:0 0 5px;
	padding:10px;
	font-size:15px;
}

#contact button[type="submit"]:hover {
	background:#535353;
	color: #FFF;
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
	outline:0;
	border:1px solid #999;
}
::-webkit-input-placeholder {
 color:#eee;
}
:-moz-placeholder {
 color:#eee;
}
::-moz-placeholder {
 color:#eee;
}
:-ms-input-placeholder {
 color:#eee;
}
/**/

.contactMap {
	margin: 20px 0;
	border: 1px #555555 solid;
	width: 162px;
	height: 39px;
	text-align: center;
	line-height: 39px;
	font-size: 18px;
}

.copy {
	margin: 200px auto 0 auto;
	width: 100%;
	text-align: center;
}

#filterlist p {
	line-height: 90%;
}

.topBannerBox {
	text-align: center;
	margin-top: 50px;
	margin-bottom: 200px;
}

.BannerBox01 {
	text-align: center;
	margin-top: 170px;
	margin-bottom: 50px;
}