/*------------------tab------------------*/
.content-tab{ }
.content-tab .tabs { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; }
.content-tab .tabs li { color:#fff; display: block; padding: 8px; text-align: center; width: 48%; cursor: pointer; font-weight: bold; background: #D4D4D4; margin: 0 1%;
    border-top-left-radius: 6px; border-top-right-radius: 6px;
    -webkit-border-top-left-radius: 6px;
		-webkit-border-top-right-radius: 6px;
		-moz-border-radius-topleft: 6px;
		-moz-border-radius-topright: 6px;}
.content-tab .tabs li:hover{background: #5B3010;}
.content-tab .tabs li.current { background: #5B3010; color: #fff;}
.content-tab .tab-pane { /*display: none;*/ margin: 20px auto;}
.content-tab .tab-pane.current { display: block;}
.content-tab .tab-contents{ border-top: 2px solid #5B3010; padding: 12px; background: #fff; font-weight: normal;}

.content-tab .tabs li a{ display: block; color: #fff;}
.content-tab .tabs li a:hover{ background: #5B3010; color: #fff;}

/*---------------Highlight---------------*/
.highlight-box{max-width: 980px; margin: 0 auto 20px; display: flex; padding: 20px; background: #F9F0D3; border-radius: 10px;}
.highlight-box div{color:#412210;font-weight: bold;margin: 0 20px 0 0;}

.highlight-box div strong{display:block; margin: 0 0 10px; font-size: 22px; font-weight: bold; color: #FFF; }
.highlight-box div strong span{display: inline-block; margin: 0 10px 0 0; padding: 10px 30px; border-radius: 15px; font-size: 30px; font-weight: bold;}

.title-green strong{text-shadow: rgb(34, 172, 57) 1px 0px 0px, rgb(34, 172, 57) 0.533333px 0.833333px 0px, rgb(34, 172, 57) -0.416667px 0.916667px 0px, rgb(34, 172, 57) -0.983333px 0.133333px 0px, rgb(34, 172, 57) -0.65px -0.75px 0px, rgb(34, 172, 57) 0.283333px -0.966667px 0px, rgb(34, 172, 57) 0.966667px -0.283333px 0px;}
.title-green strong span{background:#22AC39; }

.title-violet strong{text-shadow: rgb(146, 8, 131) 1px 0px 0px, rgb(146, 8, 131) 0.533333px 0.833333px 0px, rgb(146, 8, 131) -0.416667px 0.916667px 0px, rgb(146, 8, 131) -0.983333px 0.133333px 0px, rgb(146, 8, 131) -0.65px -0.75px 0px, rgb(146, 8, 131) 0.283333px -0.966667px 0px, rgb(146, 8, 131) 0.966667px -0.283333px 0px;}
.title-violet strong span{background:#920883; }

.title-blue strong{text-shadow: rgb(97, 199, 243) 1px 0px 0px, rgb(97, 199, 243) 0.540302px 0.841471px 0px, rgb(97, 199, 243) -0.416147px 0.909297px 0px, rgb(97, 199, 243) -0.989992px 0.14112px 0px, rgb(97, 199, 243) -0.653644px -0.756802px 0px, rgb(97, 199, 243) 0.283662px -0.958924px 0px, rgb(97, 199, 243) 0.96017px -0.279415px 0px;}
.title-blue strong span{background:#61c7f3; }

/*---------------Service---------------*/
.service-step{display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 -10px 30px -10px}
.service-step::after{content:''; flex: auto;}
.service-step h2{width: 100%; margin: 0 1% 20px;}
.service-step div{position: relative; width: 31.33%; margin: 1%;}
.service-step div figure img{width: 100%;}
.service-step div span{position: absolute; display: block; right:-50px; z-index: 1; top:60px;}
.service-step div p{position:absolute; width: 100%; height: 50px; padding: 5px; font-size: 11px; bottom: 0; background: url(/maintenance/images/pattern-yellow.png);}
.service-step div:nth-of-type(3n) span{display: none;}
.service-step div:last-of-type span{display: none;}

.service-photo{margin: 0 auto 30px;}
.service-photo span{display: none;}
.service-photo img{width: 100%;}

/*---------------Repair---------------*/
.service-repair{display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 -10px 30px -10px}
.service-repair::after{content:''; flex: auto;}
.service-repair div{position: relative; width: 33.33%; padding: 1%;}
.service-repair div figure img{width: 100%;}
.service-repair div p{padding: 5px; font-size: 12px; bottom: 0; text-align: center;}

.banner-info { text-align: center; }
.banner-info img { width: 100%; }
/*---------------Tenken---------------*/
.tenken-step{display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 -10px 30px -10px}
.tenken-step::after{content:''; flex: auto;}
.tenken-step h2{width: 100%; margin: 0 1% 20px;}
.tenken-step div{position: relative; width: 31.33%; margin: 1%;}
.tenken-step div figure img{width: 100%;}
.tenken-step div span{position: absolute; display: block; right:-50px; z-index: 1; top:60px;}
.tenken-step div p{ width: 100%; height: 80px; padding: 5px; font-size: 11px; background: url(/maintenance/images/pattern-yellow.png);}
.tenken-step div:nth-of-type(3n) span{display: none;}
.tenken-step div:last-of-type span{display: none;}

/*---------------Responsive---------------*/
@media (max-width:1000px){
.service-step{margin: 0 0 30px;}
.service-step div span{top:40px; right:-30px;}
.service-step div span img{width:60px;}
.tenken-step{margin: 0 0 30px;}
.tenken-step div span{top:40px; right:-30px;}
.tenken-step div span img{width:60px;}
}

@media (max-width:780px){
.highlight-box{flex-wrap: wrap;}
.highlight-box figure{order: 0; width: 100%; text-align: center; margin: 0 0 10px;}
.highlight-box div{order: 1;}
.highlight-box div strong span{font-size: 25px; padding: 5px 20px;}
.service-step div{width: 48%;}
.service-step div:nth-of-type(3n) span{display: block;}
.service-step div:nth-of-type(2n) span{display: none;}
.tenken-step div{width: 48%;}
.tenken-step div:nth-of-type(3n) span{display: block;}
.tenken-step div:nth-of-type(2n) span{display: none;}
.service-repair div{width: 50%;}

}

@media (max-width:560px){
.service-photo figure{display: none;}
.service-photo span{display:block;}

}

@media (max-width:480px){
.service-step div{width: 100%;}
.service-step div span{top:95%; width: 40px; height: 40px; left: 45%; transform:rotate(90deg);}
.service-step div span img{width: 100%;}
.service-step div:nth-of-type(2n) span{display: block;}
.service-step div:last-of-type span{display: none;}
.tenken-step div{width: 100%;}
.tenken-step div span{top:95%; width: 40px; height: 40px; left: 45%; transform:rotate(90deg);}
.tenken-step div span img{width: 100%;}
.tenken-step div:nth-of-type(2n) span{display: block;}
.tenken-step div:last-of-type span{display: none;}
}