@charset "utf-8";
@import url(reset.css);
@import url(base.css);
@import url('https://fonts.googleapis.com/css?family=Ropa+Sans');


#global-nav {
	display:none;
}

#header .navbtn {
	display:none;
}


br.sp {
	display:none;
}

input[type="submit"] {
   -webkit-appearance: none;
}


/*-------------------------------------------------------------------
	header
-------------------------------------------------------------------*/

#header .header {
	width:94%;
	margin:0 auto;
	overflow:hidden;
	zoom:1;
	padding:10px 0;
}

#header .header .logo {
	float:left;
	max-width:30%;
}

#header .header .logo .img,
#header .header .logo .text {
	display:inline-block;
	vertical-align:middle;
}

#header .header .logo .text {
	color:#0065b1;
	font-size:2.2em;
	margin-left:15px;
	font-weight:500;
}

#header .header .logo a {
	display:block;
	color:#0065b1;
	text-decoration:none;
}

#header .header .logo a:hover {
	opacity:0.7;
	text-decoration:none;
}

#header .header .hdnav {
	float:right;
	max-width:70%;
	text-align:right;
	padding-top:25px;
}

#header .header .hdnav li {
	display:inline-block;
	margin-right:30px;
}

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

#header .header .hdnav li a {
	color:#0065b1;
	font-weight:400;
	font-size:1.4em;
	position: relative;
}

#header .header .hdnav li a:hover {
	text-decoration:none;
}

#header .header .hdnav li a:before{
  position: absolute;
  top: 24px;
  left: 0;
  content: '';
  display: inline-block;
  width: 0;
  height: 1px;
  background: #0065b1;
  transition: .2s;
}

#header .header .hdnav li a:hover:before{
  width: 100%;
}

/*-------------------------------------------------------------------
	slider
-------------------------------------------------------------------*/

#slider {
	overflow:hidden;
	zoom:1;
}

#slider ul {
	width:100%;
}

#slider ul li,
#slider ul li img {
	width:100%;
}


#slider .bx-wrapper .bx-viewport {
	border:none !important;
	left:0 !important;
	background:none !important;
}

#slider .bx-wrapper {
	margin: 0 auto !important;
	padding:0 !important;
}


#slider .bx-wrapper .bx-prev {
  	background: url(../image/common/slide_before.png) no-repeat !important;
	z-index:999;
	left:20px;
}

#slider .bx-wrapper .bx-next {
  	background: url(../image/common/slide_after.png) no-repeat !important;
	right:0;
	z-index:999;
}


/*-------------------------------------------------------------------
	container
-------------------------------------------------------------------*/

#container {
	padding:80px 0;
	overflow:hidden;
	zoom:1;
}

#container h2 {
	margin:0 0 60px;
}

#container h2 .main {
	display:block;
	text-align:center;
	font-family: 'Ropa Sans', sans-serif;
	font-size:4.0em;
	color:#8fc43d;
	letter-spacing:0.2em;
	margin:0 0 7px;
}

#container h2 .sub {
	display:block;
	text-align:center;
	font-size:1.5em;
	font-weight:300;
}

/*-------------------------------------------------------------------
	view
-------------------------------------------------------------------*/

#view {
	width:94%;
	margin:0 auto 80px;
}

#view p {
	text-align:center;
	font-size:1.6em;
	line-height:2.4;
	margin:0 0 40px;
}

#view figure {
	text-align:center;
}

/*-------------------------------------------------------------------
	service
-------------------------------------------------------------------*/

#service {
	padding:80px 0 50px;
	background:url(../image/service_bg.jpg) center center no-repeat;
	background-size:cover;
}

#service .inner {
	width:840px;
	margin:0 auto;
}

#service .inner ul {
	overflow:hidden;
	zoom:1;
}

#service .inner ul li {
	float:left;
	margin:0 30px 30px 0;
	width:260px;
}

#service .inner ul li:nth-child(3n) {
	margin-right:0;
}
/*
#service .inner ul li a {
	display:table-cell;
	width:260px;
	height:260px;
	text-align:center;
	vertical-align:middle;
	color:#8fc43d;
	background:#FFF;
	font-size:2.8em;
	font-weight:500;
	border-radius:300px;
}


#service .inner ul li a:hover {
	background:#8fc43d;
	color:#FFF;
	text-decoration:none;
}
*/

/*-------------------------------------------------------------------
	flow
-------------------------------------------------------------------*/

#flow {
	padding:80px 0 40px;
}

#container #flow h2 {
	margin:0 0 50px;
}

#flow .inner {
	width:800px;
	margin:0 auto;
}

#flow .inner dl {
	position:relative;
	margin:0 0 25px;
	background:#ceead0;
	text-align:center;
	padding:15px 0 20px;
	border-radius:15px;
}

#flow .inner dl dt {
	font-weight:500;
	font-size:2.4em;
	margin:0 0 10px;
}

#flow .inner dl dd {
	font-size:1.5em;
	line-height:1.6;
}

#flow .inner dl:after {
	position:absolute;
	bottom:-25px;
	left:50%;
	transform:translateX(-50%);
	content:'';
	width:8px;
	height:25px;
	background:#ceead0;
}

#flow .inner dl.last {
	margin:0 0 25px;
}

#flow .inner dl.last:after {
	display:none;
}


/*-------------------------------------------------------------------
	workers
-------------------------------------------------------------------*/

#workers {
	padding:40px 0 50px;
}

#workers .inner {
	width:1100px;
	margin:0 auto;
}

#workers .inner ul {
	overflow:hidden;
	zoom:1;
}

#workers .inner ul li {
	float:left;
	margin:0 40px 40px 0;
}

#workers .inner ul li:nth-child(3n) {
	margin-right:0;
}


/*-------------------------------------------------------------------
	voice
-------------------------------------------------------------------*/

#voice {
	background:#f4faea;
	padding:80px 0 60px;
}

#voice .inner {
	width:1100px;
	margin:0 auto;
}

#voice .inner ul {
	overflow:hidden;
	zoom:1;
}

#voice .inner ul li {
	position:relative;
	border:2px solid #8fc43d;
	background:#FFF;
	width:340px;
	height:200px;
	float:left;
	margin:0 34px 50px 0;
	border-radius:50px;
}

#voice .inner ul li:nth-child(3n) {
	margin-right:0;
}


#voice .inner ul li:before,
#voice .inner ul li:after {
    position: absolute;
		right: 20%;
		top: 100%;
		border: solid transparent;
		content: '';
		height: 0;
		width: 0;
		border-width: 20px;
}

#voice .inner ul li:before {
    border-top-color: #8fc43d;
    margin-left: -20px;
}

#voice .inner ul li:after {
    border-top-color: #FFFFFF;
    margin: -3px 0 0 -20px;
}

#voice .inner ul li span {
	display:table-cell;
	padding:0 30px;
	height:200px;
	vertical-align:middle;
	font-size:1.8em;
	line-height:1.6;
	font-weight:500;
}


/*-------------------------------------------------------------------
	message
-------------------------------------------------------------------*/

#message {
	padding:60px 0 50px;
}

#message .inner {
	width:1100px;
	margin:0 auto;
}

#message .inner .box {
	overflow:hidden;
	zoom:1;
}

#message .inner .box .text {
	width:640px;
	float:left;
}

#message .inner .box .text h3 {
	color:#7baf2a;
	font-size:2.8em;
	line-height:1.4;
	font-weight:400;
	margin:0 0 30px;
}

#message .inner .box .text p {
	font-size:1.5em;
	line-height:1.8;
}

#message .inner .box .text .name {
	font-size:2.0em;
	line-height:1.4;
	margin:20px 0 0;
	font-weight:300;
}

#message .inner .box .text .human {
	display:none;
}


#message .inner .box .photo {
	float:right;
}


/*-------------------------------------------------------------------
	company
-------------------------------------------------------------------*/

#company {
	padding:50px 0;
}

#company .inner {
	width:1100px;
	margin:0 auto;
}

#company .inner .imgs {
	margin:0 0 60px;
}

#company .inner h3 {
	color:#8fc43d;
	font-weight:400;
	font-size:1.8em;
	margin:0 0 30px;
}

#company .inner .box {
	overflow:hidden;
	zoom:1;
}

#company .inner .box .text {
	width:480px;
	float:left;
}

#company .inner .box .text table {
	width:100%;
	font-size:1.4em;
	line-height:1.4;
}

#company .inner .box .text table th,
#company .inner .box .text table td {
	text-align:left;
	vertical-align:top;
}

#company .inner .box .text table th {
	font-weight:300;
	width:80px;
}


#company .inner .box .map {
	width:600px;
	float:right;	
}

#company .inner .box .map iframe {
	width:100% !important;
	height:450px !important;
}

/*-------------------------------------------------------------------
	contact
-------------------------------------------------------------------*/

#contact {
	padding:50px 0 0;
}

#contact .inner {
	width:650px;
	margin:0 auto;
}

#contact .inner h3 {
	text-align:center;
	font-size:2.6em;
	color:#8fc43d;
	margin:0 0 10px;
}

#contact .inner .caution {
	text-align:center;
	margin:0 0 30px;
	font-size:1.5em;
}

#contact .inner .caution span {
	color:#e90506;
}

#contact .inner table {
	width:100%;
}

#contact .inner table th,
#contact .inner table td {
	font-size:1.5em;
	font-weight:300;
	padding:0 0 10px;
	text-align:left;
	vertical-align:top;
}

#contact .inner table td label {
	display:inline-block;
}


#contact .inner table td label.end {
	margin-left:30px;
}

#contact .inner table th span {
	color:#e90506;
	display:inline-block;
	font-size:0.8em;
	vertical-align:top;
	font-weight:600;
}

#contact .inner table th.even {
	width:360px;
}


#contact .inner table input[type="text"] {
	background:#efefef;
	height: 35px;
	padding: 0 2px;
	font-family: inherit;
	line-height: 1.2;
	font-size:0.9em;
	border-radius:5px;
	border:none;
}

#contact .inner table td .short {
	width: 20%;
}
#contact .inner table td .middle {
	width: 85%;
}
#contact .inner table td .long {
	width: 100%;
}

#contact .inner table textarea {
	background:#efefef;
	width: 100%;
	height: 200px;
	font-family: inherit;
	font-size:0.9em;
	line-height: 1.6;
	border-radius:5px;
	border:none;
}

#contact .inner .submit {
	text-align:center;
	margin:20px 0 0;
}

#contact .inner .submit input {
	display:inline-block;
	border: 2px solid #94c746;
	width:300px;
	color:#94c746;
	padding:15px 0;
	text-align:center;
	line-height:1.0;
	font-family: 'Noto Sans Japanese', sans-serif;
	-moz-transition:all,.4s;
	-o-transition:all,.4s;
	-webkit-transition:all,.4s;
	transition:all,.4s;
	cursor: pointer;
	font-size:1.5em;
	border-radius:30px;
	background-color:#FFF;
}

#contact .inner .submit input:hover {
	background:#94c746;
	color:#FFF;
}



/*-------------------------------------------------------------------
	footer
-------------------------------------------------------------------*/

#footer {
	background:#eeeeee;
	text-align:center;
	padding:25px 0;
}

#footer p,
#footer address {
	display:inline-block;
	font-size:1.2em;
}

#footer p span.corp {
	font-size:1.15em;
	font-weight:300;
}

#footer address {
	margin-left:50px;
}



#thanks {
	width:1100px;
	margin:0 auto;
	font-size:1.4em;
	line-height:1.6;
}

#thanks h3 {
	text-align:center;
	font-size:1.8em;
	color:#8fc43d;
	margin:0 0 10px;
}

#thanks .red {
	color:#F00;
}

#thanks .right {
	text-align:right;
}

#thanks input {
	display:inline-block;
	border: 2px solid #94c746;
	color:#94c746;
	padding:15px 20px;
	text-align:center;
	line-height:1.0;
	font-family: 'Noto Sans Japanese', sans-serif;
	-moz-transition:all,.4s;
	-o-transition:all,.4s;
	-webkit-transition:all,.4s;
	transition:all,.4s;
	cursor: pointer;
	font-size:1.5em;
	border-radius:30px;
	margin-right:30px;
	background:#FFF;
}

#thanks input:hover {
	background:#94c746;
	color:#FFF;
}

#thanks input.last {
	margin-right:0;
}


/*===============================================
  画面の横幅が1300px以下に適用（ノートPC）
===============================================*/
@media screen and (max-width: 1300px){
	
	
	img {
		max-width:100%;
	}
	
	#header .header .logo {
		max-width:25%;
	}
	
	#header .header .logo .img {
		max-width:50px;
		
	}

	#header .header .logo .text {
		font-size:1.4em;
		margin-left:10px
	}
	
	#header .header .hdnav {
		max-width:75%;
		padding-top:15px;
	}

	#header .header .hdnav li {
		display:inline-block;
		margin-right:20px;
	}

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

	#header .header .hdnav li a {
		font-size:1.2em;
	}



}

/*===============================================
  画面の横幅が1024px以下に適用
===============================================*/
@media screen and (max-width: 1024px){
	
	
	
	br.sp {
		display:inline;
	}
	
	input[type="submit"]{
		-webkit-appearance: none;
	}
	
	#wrap {
		padding-top:60px;
	}
	
	
	/* header */
	
	#header {
		position:fixed;
		top:0;
		left:0;
		width:100%;
		
		z-index:9999;
	}
	
	#header .header {
		width:100%;
		margin:0 auto;
		overflow:hidden;
		zoom:1;
		padding:10px 0;
		position:relative;
		background:#FFF;
	}

	#header .header .logo {
		float:none;
		max-width:70%;
		padding-left:3%;
	}
	
	

	#header .header .logo .img,
	#header .header .logo .text {
		display:block;
	}
	
	#header .header .logo .img {
		float:left;
		max-width:100%;
	}
	
	#header .header .logo .img img {
		max-height:40px;
	}

	#header .header .logo .text {
		font-size:1.6em;
		margin-left:60px;
		padding-top:7px;
	}

	#header .header .logo a {
		overflow:hidden;
		zoom:1;
	}

	#header .header .hdnav {
		display:none;
	}

	#header .navbtn {
		display:block;
		position:absolute;
		top:18px;
		right:10px;
		width:40px;
		cursor: pointer;
	}
	
	#header .navbtn span {
		display: block;
		position: absolute;
		height: 3px;
		width: 100%;
		background: #0065b1;
		left: 0;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
	}
	
	#header .navbtn span:nth-child(1) {
		top: 0;
	}
	
	#header .navbtn span:nth-child(2) {
		top: 10px;
	}
	
	#header .navbtn span:nth-child(3) {
		top: 20px;
	}
	
	/* global-nav */
	
	#global-nav.open {
		display:block;
	}
	
	#global-nav ul {
		font-size:1.4em;
		line-height:1.0;
	}
	
	#global-nav ul li {
		border-bottom:1px solid #fff;
	}
	
	#global-nav ul li:last-child {
		border-bottom:none;
	}
	
	#global-nav ul li a {
		display: block;
		color: #fff;
		text-align:center;
		padding:15px 0;
		background:rgba(0,101,177,0.9);
		text-decoration:none;
	}
	
	#global-nav ul li a:hover {
		text-decoration:none;
	}
	
	/* 切り替えアニメーション */
	#header .navbtn.move span:nth-child(1) {
		top: 12px;
		-webkit-transform: rotate(315deg);
		-moz-transform: rotate(315deg);
		transform: rotate(315deg);
	}
	#header .navbtn.move span:nth-child(2) {
		width: 0;
		left: 50%;
	}
	#header .navbtn.move span:nth-child(3) {
		top: 12px;
		-webkit-transform: rotate(-315deg);
		-moz-transform: rotate(-315deg);
		transform: rotate(-315deg);
	}
	
	/* container */
	
	#container {
		padding:50px 0;
	}

	#container h2 {
		margin:0 0 40px;
	}

	#container h2 .main {
		display:block;
		text-align:center;
		font-family: 'Ropa Sans', sans-serif;
		font-size:3.5em;
		color:#8fc43d;
		letter-spacing:0.2em;
		margin:0 0 5px;
	}

	#container h2 .sub {
		display:block;
		text-align:center;
		font-size:1.4em;
		font-weight:300;
	}
	
	
	/* view */
	
	#view {
		margin:0 auto 50px;
	}

	#view p {
		text-align:center;
		font-size:1.4em;
		line-height:1.8;
		margin:0 0 30px;
	}
	
	#view figure img {
		max-width:35%;
	}
	
	
	/* service */

	#service {
		padding:50px 0 30px;
		background:url(../image/service_bg.jpg) center center no-repeat;
		background-size:auto 100%;
	}

	#service .inner {
		width:94%;
		margin:0 auto;
	}

	#service .inner ul {
		overflow:hidden;
		zoom:1;
	}

	#service .inner ul li,
	#service .inner ul li:nth-child(3n) {
		width:48%;
		margin:0 0 20px;
	}

	#service .inner ul li:nth-child(even) {
		float:right;
	}


	/* flow */

	#flow {
		padding:50px 0;
	}

	#container #flow h2 {
		margin:0 0 20px;
	}

	#flow .inner {
		width:94%;
		margin:0 auto;
	}

	#flow .inner dl {
		padding:10px 5% 15px;
		margin:0 0 20px;
	}
	
	#flow .inner dl dt {
		font-weight:500;
		font-size:1.6em;
		margin:0 0 5px;
	}

	#flow .inner dl dd {
		font-size:1.2em;
		line-height:1.6;
	}
	
	#flow .inner dl:after {
		position:absolute;
		bottom:-20px;
		left:50%;
		transform:translateX(-50%);
		content:'';
		width:5px;
		height:20px;
		background:#ceead0;
	}

	/* workers */

	#workers {
		padding:20px 0 30px;
	}

	#workers .inner {
		width:94%;
		margin:0 auto;
	}


	#workers .inner ul li,
	#workers .inner ul li:nth-child(3n) {
		float:left;
		max-width:48%;
		margin:0 0 20px;
	}

	#workers .inner ul li:nth-child(even) {
		float:right;
	}


	/* voice */

	#voice {
		background:#f4faea;
		padding:40px 0 30px;
	}

	#voice .inner {
		width:94%;
		margin:0 auto;
	}

	#voice .inner ul li,
	#voice .inner ul li:nth-child(3n) {
		position:relative;
		border:2px solid #8fc43d;
		background:#FFF;
		width:340px;
		height:150px;
		float:none;
		margin:0 auto 40px;
		border-radius:30px;
	}
	



	#voice .inner ul li span {
		display:table-cell;
		padding:0 30px;
		height:150px;
		vertical-align:middle;
		font-size:1.6em;
		line-height:1.6;
		font-weight:500;
	}


	/* message */

	#message {
		padding:50px 0;
	}

	#message .inner {
		width:94%;
		margin:0 auto;
	}

	#message .inner .box .text {
		width:auto;
		float:none;
	}

	#message .inner .box .text h3 {
		font-size:1.8em;
		margin:0 0 20px;
	}

	#message .inner .box .text p {
		font-size:1.4em;
		line-height:1.6;
	}
	
	#message .inner .box .text .name {
		font-size:1.6em;
	}

	#message .inner .box .photo {
		float:none;
		text-align:center;
		margin:0 0 30px;
	}
	
	#message .inner .box .photo img {
		max-width:70%;
	}
	
	

	/*-------------------------------------------------------------------
		company
	-------------------------------------------------------------------*/

	#company {
		padding:30px 0;
	}

	#company .inner {
		width:94%;
		margin:0 auto;
	}

	#company .inner .imgs {
		margin:0 0 30px;
	}

	#company .inner .box .text {
		width:auto;
		float:none;
	}

	#company .inner .box .text table th {
		font-weight:300;
		width:25%;
	}


	#company .inner .box .map {
		width:auto;
		float:none;
		margin:30px 0 0;	
	}

	#company .inner .box .map iframe {
		width:100% !important;
		height:300px !important;
	}

	/* contact */

	#contact {
		padding:20px 0 0;
	}

	#contact .inner {
		width:94%;
		margin:0 auto;
	}

	#contact .inner table th,
	#contact .inner table td {
		font-size:1.4em;
	}

	#contact .inner table th.even {
		width:52%;
	}

	#contact .inner table td .short {
		width: 30%;
	}
	#contact .inner table td .middle {
		width: 90%;
	}
	#contact .inner table td .long {
		width: 100%;
	}

	#contact .inner table textarea {
		height: 100px;
	}


	#contact .inner .submit input {
		width:200px;
		font-size:1.4em;
	}


	/* footer */

	#footer {
		padding:10px 3%;
	}

	#footer p,
	#footer address {
		display:block;
		font-size:1.2em;
	}
	
	.tellink a {
		color:#000;
		text-decoration:none;
	}
	
	.tellink a:hover {
		text-decoration:none;
	}
	
	#footer address {
		margin:10px 0 0;
	}

	#thanks {
		width:94%;
		margin:0 auto;
		font-size:1.2em;
		line-height:1.4;
	}



}

/*===============================================
  画面の横幅が768px以下に適用
===============================================*/
@media screen and (max-width: 768px){
	

}

/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px){
	
	
}

/*===============================================
  画面の横幅が360px以下に適用
===============================================*/
@media screen and (max-width: 360px){
	
	#voice .inner ul li,
	#voice .inner ul li:nth-child(3n) {
		width:94%;
	}
	
}