@charset "utf-8";
/* CSS Document */

/*-------------------------------------
	Main Visual
-------------------------------------*/

#main_visual{
	background-image: url(../images/common/service_main.jpg);
}

/*-------------------------------------
	Service
-------------------------------------*/

#service .flow_link{
	margin-top: 100px;
}

#service .flow_link:after{
	content: "";
	display: block;
	clear: both;
}

#service .flow_link li{
	width: calc(25% - 22.5px);
	float: left;
	border:1px solid #09101C;
	border-radius: 5px;
	position: relative;
	text-align: center;
	height: 100px;
	line-height: 100px;
	margin-left: 30px;
}

#service .flow_link li:nth-child(4n+1){
	margin-left: 0;
}

#service .flow_link li:nth-child(2){
	transition-delay: 0.2s;
}

#service .flow_link li:nth-child(3){
	transition-delay: 0.4s;
}

#service .flow_link li:nth-child(4){
	transition-delay: 0.6s;
}

#service .flow_link li:before{
	content: "";
	display: block;
	position: absolute;
	top: -2px;
	left: 0;
	right: 0;
	margin: auto;
	width: 70px;
	height: 5px;
	background-color: #09101C;
}

/*-------*/

#service .detail{
	color: #FFF;
	padding-top: 80px;
	padding-bottom: 80px;
}

#service .detail.stocking{
	background-image: url(../images/stocking/detail_bg.jpg);
}

#service .detail.consulting{
	background-image: url(../images/stocking/detail_con_bg.jpg);
}

#service .detail.introduction{
	background-image: url(../images/introduction/detail_bg.jpg);
}

#service .detail.management{
	background-image: url(../images/management/detail_bg.jpg);
}

/*-------*/

#service .cont_lr .img{
	height: 350px;
}

#service .cont_lr .text{
	padding-top: 100px;
}

#service .cont_lr.img_r .text{
	text-align: right;
}

#service .cont_lr h4{
/*	color: #919191;*/
	color: #fff;
}

/*-------*/

#service .detail h3{
	font-size: 30px;
	text-align: center;
	position: relative;
	border-bottom: 1px solid #FFF;
	margin-bottom: 100px;
}

#service .detail h3:after{
	content: "";
	display: block;
	width: 70px;
	height: 5px;
	background-color: #FFF;
	position: absolute;
	bottom:-5px;
	left: 0;
	right: 0;
	margin: auto;
}

/*-------*/

#service .point{
	text-align: center;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
	max-width: 1000px;
	position: relative;
	font-size: 30px;
	line-height: 1.6;
	padding: 50px 12%;
	margin-top: 80px;
	margin-bottom: 150px;
}

#service .point:last-of-type{
	margin-bottom: 0;
}

#service .point h4{
	position: absolute;
	bottom: 100%;
	width: 100%;
	color: #fff;
	font-size: 22px;
	line-height: 1.0;
	left: 0;
	right: 0;
	margin: auto;
}

/*-------*/

#service .icon_list{
	overflow: hidden;
}

#service .introduction .icon_list li{
	padding: 0 20px;
	width: 33.3333%;
	float: left;
	margin-bottom: 100px;
}

#service .management .icon_list li{
	padding: 0 15px;
	width: 25%;
	float: left;
	margin-bottom: 100px;
}

#service .introduction .icon_list li:nth-child(3n+1){
	clear: both;
}

#service .introduction .icon_list li:nth-last-of-type(-n+3){
	margin-bottom: 0;
}

#service .management .icon_list li:nth-child(4n+1){
	clear: both;
}

#service .management .icon_list li:nth-last-of-type(-n+4){
	margin-bottom: 0;
}

#service .icon_list li .icon{
	text-align: center;
	margin-bottom: 30px;
}

#service .icon_list li h4{
	text-align: center;
	color: #fff;
	font-size: 30px;
	line-height: 1.2;
	margin-bottom: 20px;
}

/*-------*/

#service .service_link{
	padding: 50px 20px;
}

#service .service_link ul{
	width: 100%;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	font-size: 0;
}

#service .service_link ul li{
	display: inline-block;
	vertical-align: middle;
	border-left: 1px solid #FFF;
	text-align: center;
	width: 25%;
}

#service .service_link ul li:last-child{
	border-right: 1px solid #FFF;
}

#service .service_link ul li a{
	display: block;
	font-size: 16px;
	line-height: 1.2;
	padding: 20px;
}

#service .service_link ul li a span{
	display: block;
	color: #919191;
	font-size: 12px;
	line-height: 1.2;
}

/*-------------------------------------
	Others
-------------------------------------*/
#others .example{
	background-image: url(../images/index/per_bg.jpg)
}

#others .example .carousel{
	position: relative;
}



@media screen and (max-width: 768px){
	/*-------------------------------------
		Service
	-------------------------------------*/

	#service .flow_link{
		margin-top: 60px;
	}

	#service .flow_link li{
		width: calc(50% - 15px);
		margin-bottom: 30px;
	}

	#service .flow_link li:nth-child(2n+1){
		clear: both;
		margin-left: 0;
	}

	#service .flow_link li:nth-last-of-type(-n+2){
		margin-bottom: 0;
	}

	#service .service_link{
		padding-top: 30px;
		padding-bottom: 30px;
	}

	#service .service_link ul li{
		width: 50%;
		margin-bottom: 10px;
	}

	#service .service_link ul li a{
		padding: 10px;
	}

	#service .service_link ul li:nth-child(2n){
		border-right: 1px solid #FFF;
	}

	#service .service_link ul li:nth-last-of-type(-n+2){
		margin-bottom: 0;
	}

	#service .detail h3{
		font-size: 22px;
		margin-bottom: 60px;
		}

	#service .cont_lr .img{
		height: 200px;
	}

	#service .cont_lr .text{
		padding-top: 20px;
	}

	#service .point{
		font-size: 22px;
		padding: 30px 20px;
		margin-top: 60px;
		margin-bottom: 80px;
	}

	#service .point h4{
		font-size: 17px;
	}

	#service .introduction .icon_list li,#service .management .icon_list li{
		padding: 0 10px;
		width: 50%;
		margin-bottom: 60px;
	}

	#service .introduction .icon_list li:nth-child(3n+1),#service .management .icon_list li:nth-child(4n+1){
		clear: none;
	}

	#service .introduction .icon_list li:nth-last-of-type(-n+3),#service .management .icon_list li:nth-last-of-type(-n+4){
		margin-bottom: 60px;
	}
	
	#service .icon_list li:nth-child(2n+1){
		clear: both;
	}

	#service .icon_list li:nth-last-of-type(-n+2){
		margin-bottom: 0;
	}
	
	#service .icon_list li .icon{
		margin-bottom: 20px;
	}
	
	#service .icon_list li .icon img{
		width: 60px;
	}
	
	#service .icon_list li h4{
		font-size: 22px;
		margin-bottom: 10px;
	}
	
}