/* -----------------------------------------------------------------------------
ヘッダー
----------------------------------------------------------------------------- */
header {
}
/* -----------------------------------------------------------------------------
ビジュアル
----------------------------------------------------------------------------- */
.mainvisual {
	height:360px;
	background:url(/images/designoffice/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;
}

.servicePoints {
	position:relative;
	margin-bottom:60px;
}
.servicePoints ul {
	list-style-type:none;
	width:720px;
	margin:auto;
}
.servicePoints li {
	width:350px;
	color:#629633;
	background-color:#fff;
	letter-spacing:0em;
	font-weight:bold;
	text-align:center;
	margin-bottom:15px;
	padding:0.7em 0;
	float:left;
}
.servicePoints li:nth-child(2n) {
	float:right;
}
.servicePoints li > span{
	width:100%;
}

.serviceEtc {
	background-image:url(/images/designoffice/service_frame.png);
	width:715px;
	height:316px;
	margin:0 auto 30px auto;
	letter-spacing:0em;
}

.serviceEtc > div{
	padding:25px 40px 0px 40px;
}
.serviceEtc h3{
	color:#89745e;
	font-size:1.56rem;
	font-weight:bold;
	text-align:center;
	padding-bottom:0.2em;
	margin-bottom:0.5em;
	background:url(/images/designoffice/service_hr.png) center bottom no-repeat;
}
.serviceEtc p {
	margin-bottom:1em;
}


/* -----------------------------------------------------------------------------
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;
	margin-bottom:0.5em;
}
.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;
	letter-spacing:0;
	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 p {
	font-weight:normal;
	font-size:1rem;
	margin-top:1em;
	line-height:1.33;
}
.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);
	}
	.servicePoints ul {
		width:90%;
	}
	.servicePoints li {
		width:100%;
		max-width:350px;
		margin-left:auto;
		margin-right:auto;
		float:none;
		margin-bottom:1rem;
	}
	.servicePoints li:nth-child(2n) {
		float:none;
	}
	.sectionLead {
		text-align:left;
	}
	.serviceEtc {
		background:none;
		width:90%;
		max-width:635px;
		height:auto;
		margin:0 auto 2rem auto;
	}
	.serviceEtc > div{
		padding:0;
	}
	.serviceEtc .figure img{
		width:100%;
	}



/* ----------------------------------------------------------------------------- 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;
	}

/* ----------------------------------------------------------------------------- SERVICE */
	.service {
		width:90%;
		padding:0;
	}
	.servicePoints {
		margin-bottom:2rem;
	}
	.servicePoints li {
		width:100%;
		max-width:none;
		max-width:initial;
		margin-bottom:1rem;
	}
	.servicePoints ul {
		width:90%;
	}
	.sectionLead {
		text-align:left;
	}
	.serviceEtc {
		background:none;
		width:100%;
		height:auto;
		margin:0 auto 2rem auto;
	}
	.serviceEtc > div{
		padding:0;
	}
	.serviceEtc .figure img{
		width:100%;
	}

/* ----------------------------------------------------------------------------- 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%;
	}

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