@charset "utf-8";

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

予防メインテナンス

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

/*---------------------
イントロ
---------------------*/

#intro h2{
	text-align: center;
	margin-bottom:20px;
}

#intro{
	margin-bottom:60px; 
}

/*@media screen and (max-width:800px) {
	#intro{
	margin-bottom:30px; 
}
}*/

/*---------------------
流れ
---------------------*/
#flow {
	margin-bottom: 100px;
}

#flow > h2{
	text-align: center;
	background: #fff;
}



.flow-list {
	list-style: none;
	counter-reset: number 0; 
}

.flow-list li{
	position:relative;
	background-color: #fff;
}



.flow-list li:not(:last-child)::after{
position:absolute;
content:"";
display: block;
left: 50%;bottom:0;
transform: translateX(-50%);
width: 0;
height: 0;
border-style: solid;
border-color: rgba(107,170,237,0.5) transparent transparent transparent;
}



.flow-list li .tag-hd{
	border-bottom: 2px solid #6baaed;
}

.flow-list li h3{
	margin-bottom: 30px;
}

.flow-list li p{
	margin-bottom: 30px; 
}

.flow-list li .tag-hd:before{
	  counter-increment: number;
  content: "メインテナンスの流れ" counter(number,decimal-leading-zero) ""; 
}

.flow-list li .col2{
	display: grid;
}



@media screen and (min-width:801px) {
	#flow > h2{
	padding-top: 40px;
padding-bottom:20px;
}
	
.flow-list li .col2{
	grid-template-columns: repeat(2,1fr);
	grid-column-gap: 30px;
}
	
	.flow-list li{
	padding: 60px;
}
	.flow-list li h3{
	line-height: 1.4;
}
	.flow-list li:not(:last-child)::after{
border-width: 50px 50px 0 50px;
}
	.flow-list li:not(:last-child){
padding-bottom: 100px;
}
}

@media screen and (max-width:800px) {
		#flow > h2{
	padding-top: 60px;

}
	
.flow-list li .col2{
	grid-template-columns: repeat(1,1fr);
	grid-row-gap: 30px;
}
	
	.flow-list li{
	padding: 60px 20px;
}
		.flow-list li:not(:last-child)::after{
border-width: 30px 30px 0 30px;
}
	.flow-list li:not(:last-child){
padding-bottom: 70px;
}
}
/*---------------------
イントロ
---------------------*/
#rate > h2{
margin-top: 60px;
margin-bottom: 30px;
}

#rate > p {
	margin-bottom: 30px;
}

#rate > h2{
margin-bottom: 30px;
}
.rate-list{
	list-style: none;
	display: grid;
}




@media screen and (min-width:801px) {
#rate {
	margin-bottom: 100px;
}
	.rate-list{
grid-template-columns: repeat(2,1fr);
	grid-column-gap: 60px;
}
}

@media screen and (max-width:800px) {
#rate {
	margin-bottom: 80px;
}
	.rate-list{
grid-template-columns: repeat(1,1fr);
	grid-row-gap: 30px;
}
}

/*---------------------
イントロ
---------------------*/
#homecare > h2{
margin-top: 60px;
margin-bottom: 30px;
}

#homecare > p {
	margin-bottom: 30px;
}

#homecare > h2{
margin-bottom: 30px;
}
.homecare-list{
	list-style: none;
	display: grid;
}

.homecare-list{
grid-template-columns: repeat(2,1fr);
	grid-column-gap: 60px;
}

#homecare {
	margin-bottom: 100px;
}

@media screen and (min-width:801px) {
#homecare {
	margin-bottom: 100px;
}
	.homecare-list{
grid-template-columns: repeat(2,1fr);
	grid-column-gap: 60px;
}
}

@media screen and (max-width:800px) {
#homecare {
	margin-bottom: 80px;
}
	.homecare-list{
grid-template-columns: repeat(1,1fr);
	grid-row-gap: 30px;
}
}