@charset "EUC-JP";

* { zoom:1; margin: 0; padding: 0; font-size: 18px; line-height: 180%;}

body {
    text-align: center;
    font-family: Helvetica, sans-serif;
	-webkit-text-size-adjust: none;
	color: #000;
}

img, iframe { border: 0; max-width: 100%;}
a { text-decoration: none; color: #005FB0; }
a:hover { color: #0081f1; }
ul { list-style-type: none; }
.left { float: left; }
.right { float: right; }
.center { margin: 0 auto; }
.clear { clear: both; }
.tac { text-align: center; }
.tal { text-align: left; }
.tar { text-align: right; }
.hidden { display: none; }
.ml5 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml20 { margin-left: 20px; }
.ml30 { margin-left: 30px; }
.ml40 { margin-left: 40px; }
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mr10 { margin-right: 10px; }
.mr20 { margin-right: 20px; }
.mr30 { margin-right: 30px; }
.pt10 { padding-top: 10px; }
.pt20 { padding-top: 20px; }
.fs24 { font-size: 24px; }
.fs12 { font-size: 12px; }
.bold { font-weight: bold; }
.futura { font-family: futura; }
.relative { position: relative; }
.bgy { background-color: #FFFFCC; }
em { color: #FF0000; font-style: normal; font-weight: bold; }
.pc { display: none;}

.clearfix:before, .clearfix:after {
    content:"";
    display:table;
}
 
.clearfix:after {
    clear:both;
}

/*
------------------------------------
WIRE
------------------------------------
*/

header {
	margin: 0;
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	background-color: #FFF;
	width: 100%;
}

h1 {
	width: 220px;
	float: left;
	margin: 15px 0 0 15px;
	height: 48px;
}

#insta-icon {
	margin: 17px 20px 0 0;
}

header ul {
	clear: both;
	padding-top: 0px;
	float: none;
	width: 100%;
	background-color: #000;
	height: 37px;
	display: table;
}

#m1 {
	display: none;
}

header li {
	float: none;
	margin-right: 0;
	display: table-cell;
	padding-top: 2px;
}

header li img {
	-webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
    -ms-filter: invert(100%);
    filter: invert(100%);
    height: 13px;
}

#eye-catch {
	margin: 85px 0 30px 0;
}

#eye-catch p {
	height: 275px;
	text-indent: -9999px;
	background: url(../img/main_image_sp.jpg) center top no-repeat;
}

#lead-txt {
	margin: 0 15px 40px 15px;
	text-align: left;
}

#sp-widget {
	margin: 0 15px 40px 15px;
}

section {
	clear: both;
	text-align: left;
}

#staff {
	background: url(../img/bg_stone.png);
	margin-bottom: 30px;
}

#staff h2 {
	margin: 25px 0 0 25px;
}

#staff ul {
	margin: 10px 10px 0 25px;
}

#staff li {
	float: left;
	width: 46%;
	font-size: 20px;
	line-height: 120%;
	margin: 0 4% 0 0;
}

#staff li img {
	/*display: block;*/
	margin-bottom: 5px;
	width: 100%;
}

#staff li p {
	line-height: 120%;
	min-height: 90px;
}

#staff small {
	display: block;
	font-size: 14px;
}

#google-map {
	margin: 20px auto 40px auto;
	height: 250px;
	width: 94%;
	display: block;
}

#map dt {
	font-size: 28px;
	margin-bottom: 10px;
	font-weight: bold;
	text-align: center;
}

#map dd {
	margin-bottom: 15px;
	text-align: center;
}

#concept {
	margin-bottom: 60px;
}

#concept h2 {
	height: 278px;
	text-indent: -9999px;
	background: url(../img/concept_sp.png) center top no-repeat;
	margin-bottom: 50px;
}

#concept ul {
	margin: 0 10px;
}

#concept p {
	margin: 0 15px 30px 15px;
}

#works {
	background: url(../img/bg_gray.png) 0px 1px repeat-x;
	text-align: center;
	margin-bottom: 60px;
}

#works h2 {
	height: 278px;
	text-indent: -9999px;
	background: url(../img/works.png) center 1px no-repeat;
	margin-bottom: 40px;
}

#works h3 {
	margin-bottom: 30px;
}

#works ul {
	clear: both;
	margin: 0 0 60px 0;
	box-sizing: border-box;
	padding-left: 2%;
}

#works li {
	width: 31.2%;
	margin-right: 2%;
	margin-bottom: 2%;
	float: left;
}

#works li img {
	display: block;
	width: 100%;
}

#viewBg {
	display: none;
	background-color: #000;
	opacity: 0.3;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
}

#viewBox {
	position: fixed;
	z-index: 999;
	top: 80px;
	background-color: #FFF;
	border-radius: 6px;
	box-sizing: border-box;
	padding: 10px;
	width: 680px;
	max-width: 680px;
	display: none;
	left: 680px;
	margin-left: -340px;
}

#viewBox h3 {
	margin: -52px auto 20px auto;
	font-weight: bold;
	color: #FFF;
}

#viewBox img {
	display: block;
}

#viewClose {
	display: none;
}

.view-btn {
	display: block;
	width: 50%;
	height: 50%;
	position: absolute;
	margin-top: -25%;
	top: 50%;
	box-sizing: border-box;
	padding-top: 25%;
	display: none;
}

.view-btn img {
	width: 64px;
	margin-top: -32px;
}

#viewPrev {
	left: 0px;
}

#viewNext {
	right: 0px;
}

#viewPrev img {
	float: left;
}

#viewNext img {
	float: right;
}

#company {
	margin-bottom: 60px;
}

#company h2 {
	height: 278px;
	text-indent: -9999px;
	background: url(../img/company.png) center top no-repeat;
	margin-bottom: 50px;
}

#company dl {
	margin: 0 15px 20px 15px;
	border-bottom: 1px solid #666;
}

#company dt {
	font-weight: bold;
	width: 120px;
	border-top: 1px solid #666;
	clear: both;
	padding: 15px 10px;
	float: left;
}

#company dd {
	margin-left: 140px;
	padding: 15px 10px;
	border-top: 1px solid #666;
}

#company p {
	text-align: left;
	margin: 0 15px;
}

#contact {
	background: url(../img/bg_contact_s.png);
	margin-bottom: 20px;
}

#contact-inner {
	margin: 0 auto;
}

#contact h2 {
	height: 73px;
	text-indent: -9999px;
	background: url(../img/contact_s.png) center top no-repeat;
	margin-bottom: 30px;
}

#contact p {
	color: #FFF;
	margin: 0 15px 30px 15px;
}

#contact form {
	margin: 0 15px;
}

#contact ul {
	width: 100%;
	margin-bottom: 60px;
}

#contact li {
	width: 100%;
	margin-bottom: 20px;
}

#contact input, #contact textarea {
	width: 100%;
	background-color: #EEE;
	display: inline-block;
	box-sizing: border-box;
	padding: 7px 10px;
	border: none;
	border-radius: 6px;
}

#contact textarea {
	height: 200px;
}

#contact input#input-veri, #contact input#input-reset {
	-webkit-appearance: none;
	border: 1px solid #FFF;
	font-weight: bold;
	width: 44%;
	margin: 0 3%;
	color: #FFF;
}

#contact input#input-veri {
	background-color: #A4CF21;
}

#contact input#input-reset {
	background-color: transparent;
}

footer {
	padding-bottom: 50px;
}

#totop {
	display: none;
}

#form-veri {
	max-width: 700px;
	margin: 30px auto;
	padding: 0 20px;
}

.veri-btn {
	-webkit-appearance: none;
	font-weight: bold;
	color: #FFF;
	width: 130px;
	border-radius: 6px;
	border: none;
	cursor: pointer;
	display: inline-block;
	padding: 7px 10px;
	box-sizing: border-box;
	background-color: #CCC;
}

#submit-btn {
	background-color: #A4CF21;
}

/*
------------------------------------
1000px
------------------------------------
*/

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

.pc { display: block; }
.sp { display: none; }

header {
	max-width: 1000px;
	margin: 0 auto 0 auto;
	position: static;
	padding-top: 25px;
}

h1 {
	width: 285px;
	margin: 25px 0 10px 0;
	height: auto;
}

#insta-icon {
	margin: 0;
}

header ul {
	clear: right;
	padding-top: 10px;
	float: right;
	width: 518px;
	background-color: #FFF;
	height: auto;
	display: block;
}

#m1 {
	display: block;
}

header li {
	float: left;
	margin-right: 50px;
	display: block;
	padding: 0;
}

header li img {
	-webkit-filter: invert(0%);
    -moz-filter: invert(0%);
    -o-filter: invert(0%);
    -ms-filter: invert(0%);
    filter: invert(0%);
    height: auto;
}

header li:last-child {
	margin-right: 0;
}

#eye-catch {
	clear: both;
	background: url(../img/bg_stone.png) center top repeat-x;
	margin: 0 0 80px 0;
}

#eye-catch p {
	height: 428px;
	background: url(../img/main_image.png) center top no-repeat;
}

#lead-txt {
	margin: 0 0 50px 0;
	text-align: center;
}

section {
	clear: both;
	text-align: left;
}

#staff {
	background: url(../img/bg_stone.png);
	margin-bottom: 80px;
}

#staff h2 {
	display: none;
}

#staff ul {
	margin: 40px auto 0 auto;
	max-width: 1000px;
}

#staff li {
	width: 177px;
	font-size: 20px;
	margin: 0 0 30px 30px;
}

#staff li#staff-boss {
	width: 379px;
	margin-left: 0;
	box-sizing: border-box;
	padding: 205px 0 0 205px;
	position: relative;
}

#staff-boss img {
	position: absolute;
	top: 0px;
	left: -60px;
	z-index: 10;
}

#staff li p {
	min-height: 0;
}

#map {
	max-width: 1000px;
	margin: 0 auto;
}

#google-map {
	float: right;
	margin: 0 0 100px 0;
	height: 350px;
	width: 470px;
}

#map dl {
	float: left;
	margin-left: 250px;
}

#map dt {
	text-align: left;
	margin-bottom: 20px;
}

#map dd {
	text-align: left;
}

#concept {
	background: url(../img/bg_gray.png) 0px 0px repeat-x;
	margin-bottom: 0;
}

#concept h2 {
	background: url(../img/concept.png) center top no-repeat;
}

#concept ul {
	max-width: 1000px;
	margin: 0 auto;
}

#concept li {
	float: left;
	width: 50%;
	min-height: 350px;
}

#concept p {
	margin: 0 50px 0 20px;
}

#works {
	margin-bottom: 100px;
}

#works h2 {
	margin-bottom: 70px;
}

#works h3 {
	margin-bottom: 30px;
}

#works ul {
	width: 970px;
	padding-left: 10px;
	margin: 0 auto 100px auto;
}

#works li {
	width: 150px;
	margin-right: 10px;
	margin-bottom: 10px;
}

#works li img {
	width: auto;
}

#viewBox {
	padding: 15px;
}

#viewClose {
	display: block;
	position: absolute;
	top: -45px;
	right: -45px;
	width: 40px;
}

#viewPrev {
	left: -60px;
}

#viewNext {
	right: -60px;
}

#company {
	background: url(../img/bg_gray.png) 0px 0px repeat-x;
	margin-bottom: 90px;
}

#company h2 {
	margin-bottom: 70px;
}

#company dl {
	max-width: 755px;
	margin: 0 auto 40px auto;
}

#company dt {
	width: 170px;
}

#company dd {
	margin-left: 190px;
}

#company p {
	text-align: center;
	margin: 0;
}

#contact {
	background: url(../img/bg_contact.png) 0px 43px repeat-x;
}

#contact-inner {
	max-width: 930px;
}

#contact h2 {
	background: url(../img/contact.png) center top no-repeat;
	margin-bottom: 40px;
}

#contact p {
	width: 220px;
	float: left;
	margin: 0;
}

#contact form {
	width: 660px;
	float: right;
	margin: 0;
}

#contact input#input-veri, #contact input#input-reset {
	width: 150px;
	margin: 0 30px 0 0;
	cursor: pointer;
}

#contact #form-mail {
	width: 48.5%;
	float: left;
}

#contact #form-company {
	width: 48.5%;
	float: right;
}

#contact input#input-veri {
	background-color: #A4CF21;
}

#contact input#input-reset {
	background-color: transparent;
}

footer {
	padding-bottom: 50px;
}

#totop {
	/*display: block;*/
	width: 50px;
	height: 50px;
	position: fixed;
	bottom: 20px;
	right: 20px;
}

}