@charset "utf-8";

/*====================================================================================================

	Style Info: 施工までの流れ

====================================================================================================*/

.flow table {
	width:100%;
	border-collapse:collapse;
	}

.flow th {
	text-align:center;
	color:#fff;
	background-color:#646464;
	padding:6px 0;
	}


@media screen and (max-width: 750px) {
	.flow th:nth-child(1){
		width: 160px;
	}
}


.flow td {
	padding:25px 0;
	vertical-align:top;
	border-top:1px solid #d7d7d7;
	border-bottom:1px solid #d7d7d7;
	}

@media screen and (max-width: 750px) {
	.flow td:nth-last-child(-n+2) {
		display: block;
	}
	.flow td:nth-last-child(2) {border-bottom:none;border-top:none;}
}



.flow-start { border-top:1px solid #b4b4b4; }
@media screen and (max-width: 750px) {
	.flow-start  {
		display: block;
	}
}



.flow-end { border-bottom:1px solid #b4b4b4; }

.flow td ul {
	margin-left:0.25em;
	list-style:square;
	}

@media screen and (max-width: 750px) {
	.flow td ul {
		margin-left:25px;
		}	
}

.flow td.period {
	background:url(image/period-bg.gif) no-repeat left bottom;
	background-color:#e6e6e6;
	text-align:center;
	border:none;
	padding:20px 0 45px 0;
	}

.flow td.period img{margin: auto;}

@media screen and (max-width: 750px) {
	.flow td.period{
		position: relative;
		background: transparent;
	}
	.flow td.period img{
		position: relative;
		z-index: 3;
		max-width: 100%;
		height: auto;
		margin-top: 15px;
	}	
	
	.flow td.period:before{
		content: "";
		width: 0;
		height: 0;
		border-left: 80px solid transparent;
		border-right: 80px solid transparent;
		border-top: 30px solid #e6e6e6;
		position: absolute;
		left: 0;
		bottom: 21px;
	}
	.flow td.period:after{
		content: "";
		background-color: #e6e6e6;;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: calc(100% - 50px);
		z-index: 2;
	}
	
}


period-end {
	background:url(image/period-end-bg.gif) no-repeat left bottom;
	background-color:#e6e6e6;
	}