/* -----------------------------------------------------------------------------
ヘッダー
----------------------------------------------------------------------------- */
header {
}
/* -----------------------------------------------------------------------------
ビジュアル
----------------------------------------------------------------------------- */
.mainvisual {
	height:360px;
	background:url(/images/gardencoordinate/visual.jpg) center center no-repeat;
	background-size:cover;
	position:relative;
}

.mainvisual h1 {
	position:absolute;
	top:50%;
	left:50%;
}
.mainvisual h1 img{
	width:548px;
	display:block;
	margin-left:-274px;
	margin-top:-21px;
}

/* -----------------------------------------------------------------------------
共通
----------------------------------------------------------------------------- */
.sectionHeader {
	padding-top:60px;
	margin-bottom:25px;
	text-align:center;
}
.sectionHeader span{
	display:block;
	font-size:0.875rem;
	margin-bottom:0.5em;
}
.sectionLead {
	font-size:1.25rem;
	font-weight:bold;
	text-align:center;
	margin-bottom:1.5em;
}



/* -----------------------------------------------------------------------------
SERVICE
----------------------------------------------------------------------------- */
.service {
	width:940px;
	margin-left:auto;
	margin-right:auto;
	padding:0 20px;
	background:url(/images/gardencoordinate/bg.png) center top no-repeat;
}

.servicePoints {
	position:relative;
	margin-bottom:60px;
}
.servicePoints:after{
	content:'';
	background:url(/images/gardencoordinate/service_deco7.png) center top no-repeat;
	width:100%;
	height:135px;
	position:absolute;
	left:0px;
	bottom:-90px;
}
.servicePoints ul {
	list-style-type:none;
	display:flex;
	justify-content:space-around ;
	flex-wrap: wrap;
}
.servicePoints li {
	background:url(/images/gardencoordinate/service_bg.png) center center;
	width:170px;
	height:164px;
	color:#629633;
	font-weight:bold;
	display:flex;
	align-items:center;
	text-align:center;
	margin-bottom:15px;
	position:relative;
}
.servicePoints li > span{
	width:100%;
}
.servicePoints li:after {
	background-size:contain;
	background-repeat:no-repeat;
	content:'';
	position:absolute;
	width:22.3%;
	height:15.8%;
	top:0px;
	right:11%;
}
.servicePoints li:nth-child(2):after {
	background-image:url(/images/gardencoordinate/service_deco1.png);
}
.servicePoints li:nth-child(3):after {
	background-image:url(/images/gardencoordinate/service_deco2.png);
	width:23.5%;
	height:14.7%;
	top:9.4%;
	right:4.7%
}
.servicePoints li:nth-child(5):after {
	background-image:url(/images/gardencoordinate/service_deco3.png);
	width:20.5%;
	height:32.3%;
	top:-7.0%;
	right:95px;
}
.servicePoints li:nth-child(6):after {
	background-image:url(/images/gardencoordinate/service_deco4.png);
	width:25.8%;
	height:22.3%;
	top:-1.17%;
	right:10%;
}
.servicePoints li:nth-child(7):after {
	background-image:url(/images/gardencoordinate/service_deco5.png);
	width:20%;
	height:18.2%;
	top:80%;
	right:50%;
}
.servicePoints li:nth-child(9):after {
	background-image:url(/images/gardencoordinate/service_deco6.png);
	width:17.6%;
	height:22.3%;
	top:1.1%;
	right:70.5%;
}
.serviceEtc {
	background-image:url(/images/gardencoordinate/service_bg2.png);
	width:622px;
	height:149px;
	margin:0 auto 30px auto;
	display:table;
}

.serviceEtc > div{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}
.serviceEtc h3{
	color:#629633;
	font-size:1.56rem;
	font-weight:bold;
}

/* -----------------------------------------------------------------------------
PORTFOLIO
----------------------------------------------------------------------------- */
.portfolioList {
	text-align:center;
}
.portfolioList .entries {
	list-style-type:none;
	display:inline-block;
}
.portfolioList .entry {
	background-color:#fff;
	padding:10px;
	width:170px;
	float:left;
	margin-right:23px;
	text-align:left;
	font-size:0.875rem;
}
.portfolioList .entry:last-child {
	margin-right:0px;
}
.portfolioList .entry span{
	display:block;
}
.portfolioList .entry .entrySubject{
	line-height:1.33;
	height:4em;
}




/* -----------------------------------------------------------------------------
WORKFLOW
----------------------------------------------------------------------------- */
.workflow {
	width:845px;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:50px;
}
.workflow_wrapper {
	background:url(/images/gardencoordinate/workflow_arrow2.svg) center center no-repeat;
}
.workflow_wrapper > div {
	width:365px;
}
.workflow_wrapper ul {
	list-style-type:none;
}
.workflow_flow1 {
	float:left;
}
.workflow_flow2 {
	float:right;
}
.workflow_wrapper .entry {
	background-color:#fff;
	margin-bottom:33px;
	line-height:1;
	font-size:1.125rem;
	font-weight:bold;
	padding:1.2em 0.7em;
	position:relative;
}
.workflow_wrapper .entry:after {
	position:absolute;
	top:calc(100% + 7px);
	left:calc(50% - 8px);
	width:16px;
	height:21px;
	background:url(/images/gardencoordinate/workflow_arrow.svg) center center no-repeat;
	content:'';
}
.workflow_wrapper .entry span {
	display:inline-block;
	width:calc(100% - 1em);
	text-align:center;
}
.workflow_wrapper .entry:last-child {
	margin-bottom:0px;
}
.workflow_wrapper .entry:last-child:after {
	display:none;
}
.workflow_wrapper li:before {
	color:#629633;
}
.workflow_flow1 li:nth-child(1):before{
	content:'1';
}
.workflow_flow1 li:nth-child(2):before{
	content:'2';
}
.workflow_flow1 li:nth-child(3):before{
	content:'3';
}
.workflow_flow1 li:nth-child(4):before{
	content:'4';
}
.workflow_flow2 li:nth-child(1):before{
	content:'5';
}
.workflow_flow2 li:nth-child(2):before{
	content:'6';
}
.workflow_flow2 li:nth-child(3):before{
	content:'7';
}
.workflow_flow2 li:nth-child(4):before{
	content:'8';
}





/* -----------------------------------------------------------------------------
FOOTER
----------------------------------------------------------------------------- */
footer {
	background-color:#c18842;
	color:#fff;
}




/* -----------------------------------------------------------------------------
中間
----------------------------------------------------------------------------- */
@media screen and (max-width: 980px)  {
/* ----------------------------------------------------------------------------- SERVICE */
	.service {
		width:calc(100% - 40px);
	}

/* ----------------------------------------------------------------------------- PORTFOLIO */
	.portfolio {
		width:90%;
		max-width:830px;
		margin-left:auto;
		margin-right:auto;
	}
	.portfolioList .entries {
		display:block;
		width:100%;
	}
	.portfolioList .entry {
		width:18.975%;
		max-width:170px;
		padding:2%;
		margin-right:2.7%;
	}
	.portfolioList .entryThumb img{
		width:100%;
	}
/* ----------------------------------------------------------------------------- WORKFLOW */
	.workflow {
		width:90%;
	}
	.workflow_wrapper {
		background:none;
	}
	.workflow_wrapper > div {
		margin-left:auto;
		margin-right:auto;
	}
	.workflow_flow1 ,
	.workflow_flow2 {
		float:none;
	}
	.workflow_wrapper .workflow_flow1 .entry:last-child {
		margin-bottom:33px;
	}
	.workflow_wrapper .workflow_flow1 .entry:last-child:after {
		display:block;
	}

}




/* -----------------------------------------------------------------------------
モバイル
----------------------------------------------------------------------------- */
@media screen and (max-width: 640px)  {

/* ----------------------------------------------------------------------------- VISUAL */
	.mainvisual {
		height:50vw;
	}
	.mainvisual h1 {
		position:absolute;
		top:60%;
		left:0%;
		width:100%;
		text-align:center;
	}
	.mainvisual h1 img{
		width:85%;
		margin-left:auto;
		margin-right:auto;
		margin-top:-3.3vw;
	}

/* ----------------------------------------------------------------------------- 共通 */
	.sectionHeader {
		padding-top:16vw;
		margin-bottom:2rem;
	}
	.sectionHeader h1 img {
		width:100%;
		margin-top:0.5rem;
	}
	.sectionLead {
		text-align:left;
	}



/* ----------------------------------------------------------------------------- SERVICE */
	.service {
		width:90%;
		padding:0;
	}
	.servicePoints {
		margin-bottom:2rem;
	}
	.servicePoints:after{
		content:'';
		background:url(/images/gardencoordinate/service_deco7.png) center top no-repeat;
		background-size:100%;
		width:100%;
		height:135px;
		position:absolute;
		left:0px;
		bottom:-90px;
	}
	.servicePoints li {
		background-size:contain;
		width:36vw;
		height:35vw;
		margin-bottom:1rem;
	}
	.servicePoints li:nth-child(7):after {
		top:30vw;
	}
	.serviceEtc {
		width:90%;
		padding:0 5%;
		height:37vw;
		background-image:url(/images/gardencoordinate/sp_service_bg2.png);
		background-position:center center;
		background-repeat:no-repeat;
		background-size:contain;
		margin-bottom:2rem;
		display:table;
	}

/* ----------------------------------------------------------------------------- PORTFOLIO */
	.portfolioList .entry {
		width:43%;
		max-width:none;
		max-width:initial;
		margin-bottom:1em;
		margin-right:0%
	}
	.portfolioList .entry:nth-child(2n) {
		float:right;
	}
/* ----------------------------------------------------------------------------- WORKFLOW */
	.workflow {
		width:90%;
		padding-bottom:2em;
	}
	.workflow_wrapper > div {
		width:100%;
	}

}
/* -----------------------------------------------------------------------------
モバイル ココマデ
----------------------------------------------------------------------------- */