@charset "utf-8";


@media screen and (min-width:768px){
/*pc・タブレットcss*/
.business-list li{
	position:relative;
	margin-bottom:200px;
}
.business-list li:nth-child(odd){
	padding-right:50px;
}
.business-list li:nth-child(even){
	padding-left:50px;
}
.business-list li:before{
	content:"";
	position:absolute;
	bottom:-50px;
	background-color:#ccc;
	width:80%;
	height:70%;
}
.business-list li:nth-child(odd):before{
	right:0;
}
.business-list li:nth-child(even):before{
	left:0;
}
.business-list li:nth-child(even) .txt{
	-webkit-box-ordinal-group: -1; -moz-box-ordinal-group: -1; -webkit-flex-order: -1; -moz-flex-order: -1; -webkit-order: -1; -moz-order: -1; order: -1;
}


.business-list .ph{
	position:relative;
	z-index:2;
	width:50%;
}
.business-list .txt{
	position:relative;
	z-index:2;
	width:46%;
}
.business-list .ttl{
	margin-bottom:20px;
	font-size:28px;
	line-height:1.4;
}


#architecture,
#civil,
#sales{
	position:relative;
}

#architecture{
	margin-bottom:250px !important;
}
#architecture:before{
	content:"ARCHITECTURE";
	position:absolute;
	left:-170px;
	top:-50px;
	font-size:140px;
	line-height:1;
	font-family: 'Ramaraja', serif;
	color:rgba(0,0,0,0.05);
	transform: rotate(90deg);
	transform-origin:left bottom;
}
#civil:before{
	content:"CIVIL ENGINEERING";
	position:absolute;
	left:0;
	top:-50px;
	width:100%;
	font-size:115px;
	line-height:1;
	font-family: 'Ramaraja', serif;
	color:rgba(0,0,0,0.05);
	text-align:center;
}
#sales:before{
	content:"SALES";
	position:absolute;
	right:-320px;
	top:-50px;
	font-size:140px;
	line-height:1;
	font-family: 'Ramaraja', serif;
	color:rgba(0,0,0,0.05);
	transform: rotate(90deg);
	transform-origin:left bottom;
}

#architecture .business-list li:before{
	background-color:#E7EDF6;
}
#civil .business-list li:before{
	background-color:#FFFEE3;
}
#sales .business-list li:before{
	background-color:#E5FAF9;
}




}

@media screen and (min-width:768px) and ( max-width:1360px) {
	
#architecture:before{
	left:0;
	top:-50px;
	font-size:115px;
	width:100%;
	transform: rotate(0deg);
	transform-origin:left bottom;
	text-align:center;
}
#sales:before{
	right:0;
	top:-50px;
	font-size:115px;
	width:100%;
	transform: rotate(0deg);
	transform-origin:left bottom;
	text-align:center;
}

	
}

@media (max-width: 768px) {


.business-list li{
	position:relative;
	margin-bottom:15vw;
}
.business-list li:before{
	content:"";
	position:absolute;
	bottom:-5vw;
	background-color:#ccc;
	width:80%;
	height:70%;
}
.business-list li:nth-child(odd):before{
	right:0;
}
.business-list li:nth-child(even):before{
	left:0;
}
.business-list li .txt{
	padding:0 5vw;
}


.business-list .ph{
	position:relative;
	z-index:2;
	width:100%;
	margin-bottom:3vw;
}
.business-list .txt{
	position:relative;
	z-index:2;
	width:100%;
}
.business-list .ttl{
	margin-bottom:2vw;
	font-size:22px;
	line-height:1.4;
}


#architecture,
#civil,
#sales{
	position:relative;
}

#architecture{
	margin-bottom:25vw !important;
}
#architecture:before{
	content:"ARCHITECTURE";
	position:absolute;
	left:0;
	top:-5vw;
	width:100%;
	text-align:center;
	font-size:13vw;
	line-height:1;
	font-family: 'Ramaraja', serif;
	color:rgba(0,0,0,0.05);
}
#civil:before{
	content:"CIVIL ENGINEERING";
	position:absolute;
	left:0;
	top:-5vw;
	width:100%;
	text-align:center;
	font-size:16vw;
	line-height:1;
	font-family: 'Ramaraja', serif;
	color:rgba(0,0,0,0.05);
}
#sales:before{
	content:"SALES";
	position:absolute;
	left:0;
	top:-5vw;
	width:100%;
	text-align:center;
	font-size:10vw;
	line-height:1;
	font-family: 'Ramaraja', serif;
	color:rgba(0,0,0,0.05);
}

#architecture .business-list li:before{
	background-color:#E7EDF6;
}
#civil .business-list li:before{
	background-color:#FFFEE3;
}
#sales .business-list li:before{
	background-color:#E5FAF9;
}

	

}