.page-header{
  background-image: url(../img/header-service.jpg);
  background-position: center;
}
h2{
  border: none;
  font-weight: bold;
}
.at254 h2{
  color: #009944;
  letter-spacing: .1em;
}
.filter h2{
  color: #1d2088;
  letter-spacing: .1em;
}
.filter-img{
  width: 100%;
  margin: 50px auto;
  max-width: 500px;
}
.filter-con .col-md-6{
  margin-bottom: 20px;
}
.difference h3{
  color: #fff;
}
.difference{
  text-align: center;
}
.product .sec-ttl.p-top{
  margin-bottom: 0;
}
.about-area{
  margin-top: 50px;
  padding: 80px 50px;
  background: #fff;
  position: relative;
}
.about-area h4.about-area-h4{
  color: #07ad91;
  border-bottom: 1px solid #07ad91;
  padding-bottom: 10px;
  font-weight: bold;
  letter-spacing: .1em;
  font-size: 20px;
  margin-top: 30px;
}
.about-area .top{
  position: absolute;
  color: #07ad91;
  font-weight: bold;
  margin: 0;
  background-image: -moz-linear-gradient( 90deg, rgb(107,185,64) 0%, rgb(0,172,151) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(107,185,64) 0%, rgb(0,172,151) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(107,185,64) 0%, rgb(0,172,151) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 20px;
  text-align: center;
  width: 100%;
  position: absolute;
  top: -13px;
  left: 0;
}
.about-area img{
  margin-top: 30px;
}
.icon-grid .col-4{
  margin-bottom: 30px;
}

table.jurai{
  background: #fff;
}
table.jurai th{
  color: #07ad91;
  font-weight: bold;
  background: #efefef;
}
table.jurai td{
  text-align: left;
}
table.jurai th,table.jurai td{
  padding: 20px;
  display: block;
}
table.jurai .table-title{
  background: #555;
  color: #fff;
  text-align: center;
}
table.new-filter {
  background: #fff;
  margin-bottom: 30px;
}
table.new-filter th{
  background: #07ad91;
  color: #fff;
}
table.new-filter td{
  text-align: left;
}
table.new-filter th,table.new-filter td{
  padding: 20px;
  display: block;
}
@media screen and (min-width: 768px) {
  table.jurai th,table.jurai td,table.new-filter th,table.new-filter td{
    display: table-cell;
  }
  table.jurai tr:nth-child(2n){
    background: #efefef;
  }
  table.jurai tr:nth-child(2n) th{
    background: #ddd;
  }
  table.jurai th,table.new-filter th{
    width: 220px;
  }
}

.colors-point {
  border: 2px solid #004a91;
  margin-bottom: 20px;
}
.colors-con .colors-point p{
  margin: 0;
  padding: 0;
}
.colors-con .colors-point h4{
  margin: 10px 0;
  color: #ffff00;
  text-align: left;
  font-weight: bold;
  font-size: 20px;
}
.colors-point .title{
  background: #004a91;
  color: #fff;
}
.colors-point .title,.colors-point .text{
  padding: 15px;
}
@media screen and (min-width: 768px) {
  .colors-con .colors-point h4{
    text-align: center;
  }
}

.tab-area {
  display: flex;
  justify-content: space-around;
  height: 70px;
  cursor: pointer;
}
.tab-area .tab {
  width: 100%;
  height: 70px;
  text-align: center;
  font-weight: bold;
  padding-top: 14px;
}
.tab-area .tab.active {
  border: none;
}
.content {
  display: none;
}
.content.show {
  display: block;
}


.tab1 {
	display: inline-block;
	font-size: 14px;
	position: relative;
	color: #009944;
	z-index: 1;
  text-align: left;
}
.tab1::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: #caebe5;
	transform: scaleY(1.3) perspective(.6em) rotateX(1deg);
	transform-origin: bottom left;
}
.tab-area .tab.tab2{
  background: #eeeceb;
  width: -webkit-fill-available;
  font-size: 14px;
}
.tab3 {
	display: inline-block;
	font-size: 14px;
	position: relative;
	color: #1d2088;
	z-index: 1;
  text-align: right;
}
.tab3::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: #d3edfb;
	transform: scaleY(1.3) perspective(.6em) rotateX(1deg);
	transform-origin: bottom right;
}
@media screen and (min-width: 768px) {
  .tab1, .tab3{
    font-size: 18px;
  }
  .tab-area .tab.tab2{
    width: 300px;
  }
}


.at254-copy{
  color: #956b33;
  font-weight: bold;
}








.caption{font-size: 16px;font-weight: bold;color: #06bf96;}

.view-area{width: 920px;margin: 0 auto;}
.table-area{margin-top: 70px;}
table{border-collapse: collapse; width: 100%;}
td.con-1{background-color: #ebf6f5;width: 25%;padding: 10px;text-align: center;border: solid 5px #fff;color: #07ad91;font-weight: bold;}
td.con-2{padding: 10px 0 10px 20px;line-height: 2em;background: #f9f8f8;border: solid 5px #fff;width: 55%;}
td.con-3{background-color: #d3def1;width: 25%;padding: 10px;text-align: center;border: solid 5px #fff;color: #181878;font-weight: bold;}
td.con-4{padding: 10px 0 10px 20px;line-height: 2em;background: #f9f8f8;border: solid 5px #fff;width: 75%;}

.at254{background: #caebe5;}
.service-view-area{width: 1080px;margin: 0 auto;}
.service-view-area h3{text-align: center;font-size: 1.5em;font-weight: bold;}
.filter .service-view-area{width: 1080px;margin: 0 auto;}
.filter .service-view-area h2{text-align: center;padding: 0px;}

.at254 .btn{
  display: block;
  margin: 50px auto 100px;
}
.at254 .btn a{
    padding: 20px 50px;
    background: #00ac97;
    background: -webkit-gradient(linear, left top, left bottom, from(#00ac97), to(#6bb940));
    background: -webkit-linear-gradient(top, #00ac97 0%, #6bb940 100%);
    background: linear-gradient(to bottom, #00ac97 0%, #6bb940 100%);
    color: #fff;
    text-decoration: none;
}
.at254 .btn a:hover{
    padding: 20px 50px;
   opacity:0.5;
   transition:0.3s;
}
@media screen and (max-width: 768px ){
.at254 .btn{
  display: block;
  margin: 20px auto 35px;
  padding: 20px 0px;
  background: #00ac97;
  background: -webkit-gradient(linear, left top, left bottom, from(#00ac97), to(#6bb940));
  background: -webkit-linear-gradient(top, #00ac97 0%, #6bb940 100%);
  background: linear-gradient(to bottom, #00ac97 0%, #6bb940 100%);
  color: #fff;
  text-decoration: none;
  width: 100%;
  font-size: 16px;
}
.at254 .btn a{
    padding: 20px 0px;
    background: none;
    background: none;
    background: none;
    background: none;
    color: #fff;
    text-decoration: none;
    width: 100%;
    font-size: 13px;
}
.at254 .btn a:hover{
    padding: 0px 0px;
    opacity:0.5;
    transition:0.3s;
}
}
.at254-area{background: #fff;margin: 100px 0;position: relative;padding-bottom: 50px;}
.at254-area h2.top{position: absolute;top: -17px;padding: 0px;margin: 0px;text-align: center;left: 75px;}
.at254-left-area{width: 40%;display: inline-block;padding: 30px 50px;}
.at254-con-1,.at254-con-2{;}
.at254-con-1{
    margin: 0 0 100px 0;
}
.at254-con-2{margin: 0 0 50px 0;}
.at254-con-1 h3,.at254-con-2 h3{text-align: left;border-bottom: solid 2px #07ad91;color: 07ad91;line-height: 2.5em;}
.at254-con-1 p,.at254-con-2 p{font-size: 14px;line-height: 1.8em;}
.at254-price{text-align: center;border: solid 1px #07ad91;}
.at254-price p.sub-text{color: #07ad91;font-weight: bold;margin: 10px 0 0 0;font-size: 13px;}
.at254-price p.price{margin: 0 0 10px;font-size: 22px;font-weight: bold;}
.at254-right-area{width: 40%;display: inline-block;padding: 30px 50px;vertical-align: top;}
.at254-con-3,.at254-con-4{;}
.at254-con-3{
    margin: 30px 0px 50px;
}
.at254-con-4{;}
.date{margin: 50px 0;text-align: center;}
.date a{
    padding: 20px 100px;
    background: #00ac97;
    background: -webkit-gradient(linear, left top, left bottom, from(#00ac97), to(#6bb940));
    background: -webkit-linear-gradient(top, #00ac97 0%, #6bb940 100%);
    background: linear-gradient(to bottom, #00ac97 0%, #6bb940 100%);
    color: #fff;
    text-decoration: none;
}
.date a:hover{
   opacity:0.5;
   transition:0.3s;
}.date a span:before{
  content: '';
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url(../img/at254/icon.png);
  background-size: contain;
  vertical-align: middle;
  background-repeat:no-repeat;
  margin: 0 20px 0 0;
  }
.at254-after{text-align: center;}
.at254-after h3.mechanism{margin: 10px 0 20px 0;font-size: 24px;}
.green-block{text-align: center;width: 70px;margin: 0 auto 50px;}
.green-block img{width: 100%;}
.works-area{text-align: center;padding: 0 3%;}
.works-con{width: 17.5%;display: inline-block;margin: 20px 11px;text-align: center;}
.works-con img{;}
span.caption{text-align: center;font-size: 12px;color: #383838;font-weight: normal;}
.menu-area{text-align: center;}
.menu-area img{width: 15%;}
.sub-copy{margin: 150px 0 0 0;font-size: 14px;font-weight: bold;color: 00ac97;}
.youtube{text-align:center;}
.faq{margin-top: 30px;
}
.faq-copy{font-weight: bold;font-size: 18px;}
.faq h2{padding: 0px;color: #07ad91;font-size: 30px;margin: 10px 0 30px;}
.faq table{;}
.faq table td.faq-q{background: #515151;color: #fff;text-align: center;width: 50px;height: 50px;}
.faq table td.faq-q-answer{background: #07ad91;color: #fff;font-size: 16px;padding: 0 0 0 20px;}
.faq table td.faq-a{background: #f08300;color: #fff;text-align: center;width: 50px;height: 50px;}
.faq table td.faq-a-answer{background: #fff;color: #111;font-size: 16px;padding: 0 0 0 20px;}
.faq table td.faq-none{height: 20px;}

.filter{background: #d3edfb;padding: 0 0 0px;}

.filter-area{background: #fff;padding: 50px 0;}
.filter-con{padding: 0 5%;}
.filter-con-1,.filter-con-2{display: inline-block;width: 47%;margin: 10px;}
.filter .service-view-area .filter-con-1 h3,
.filter .service-view-area .filter-con-2 h3{text-align: left;}
.filter-con-2{;}
.no{;}
.filter-movie{;}
.filter-youtube{;}
.filter-youtube .caption{;}
.filter-after{padding: 0 5%;}
.main-copy{font-size: 16px;letter-spacing: 0.2em;line-height: 1.5em;margin: 100px 0;}
.main-copy p{;}
.filter-flow{
}
.flow-1,.flow-2,.flow-3{border: solid 2px #1D1F88;border-radius: 10px;background: #fff;padding: 15px;}
.flow-tittle{font-weight: bold;color: #1D1F88;display: inline-block;width: 50%;border-right: solid;padding: 20px 0;font-size: 20px;text-align: center;vertical-align: middle;}
.flow-text{width: 44%;display: inline-block;padding: 0px 0 0 30px;vertical-align: middle;font-size: 14px;}
.plus,.under{width: 30px;margin: 20px auto;}
.flow-2{;}
.flow-3{;}
.under{;}
.flow-fin{text-align: center;}
.fin-tittle{font-size: 32px;font-weight: bold;margin: 0 0 10px;}
.fin-text{font-size: 37px;color: #f08300;letter-spacing: 0.2em;line-height: 1.5em;}
.fin-text p{margin:0;}
span.small{font-size:14px;vertical-align:middle;letter-spacing: 1px;}
span.mark{
 background: linear-gradient(transparent 50%, #f9ef8a 0%);
 font-weight: bold;
}
.difference{margin: 150px 0 0;background: #1d2088;padding: 50px;}
.filter .service-view-area .difference h3{text-align: center;font-size: 22px;font-weight: bold;margin: 0 0 15px;color: #fff;}
.difference-1{width: 100%;margin: 50px auto;}
.difference-2{;}
.colors{background: #eeeceb;}
.colors h2{font-size: 33px;color: #111;letter-spacing: 0.1em;}

.colors h3{
    font-size: 20px;
}
.colors-area h3{
    font-size: 33px;
}

.colors-area{background:#fff;padding: 7%;}
.colors-con{text-align: center;}
.colors-con h3{text-align: left;color: #07ad91;border-bottom: solid 2px #07ad91;line-height: 2em;}
.colors-con p{text-align: left;margin: 30px 0;}
.colors-left{width: 20%;display: inline-block;margin-right: 5%;}
.left-img{vertical-align: middle;margin-bottom: 20px}
.colors-right{display: inline-block;width: 70%;vertical-align: bottom;}
.right-img{margin: 5% 0 0;}
.colors-after{margin: 150px 0 0;}
.point{text-align: center;}
.point-con{width: 31%;display: inline-block;vertical-align: top;margin: 0px 5px;font-size: 0px;}
.point-text{background: #07ad91;display: inherit;padding: 10px 30px 30px;}
.point-text h3{color: #fff;text-align: left;font-size: 18px;}
.point-text p{color: #fff;text-align: left;font-size: 14px;line-height: 1.8em;}
.overview{padding: 100px 0 0px;text-align: center;}
.overview h3{;}
.overview-text{;}
.overview-text p{font-size: 22px;font-weight: bold;}
.overview-area{background: #fff;padding: 30px 50px;margin: 50px 0;}
.overview-area-text{;}
.overview-area-text h3{font-size: 20px;color: #07ad91;margin: 30px 0;}
.overview-area-text p{font-size: 16px;line-height: 2em;text-align: left;}
.comparison{margin: 100px 0 0;}
.comparison h3{;}
.comparison-img,.difference-1{
  overflow: scroll;
}
.comparison-img img,.difference-1 img{
  min-width: 1000px;
}
@media screen and (min-width: 374px ) {
.movie{text-align: center;}
.movie video{width: 80%;display: inline-block;margin: 10px 10px;}
}
@media screen and (min-width: 768px ) {
.movie{text-align: center;}
.movie video{width: 30%;display: inline-block;margin: 50px 10px;}
}

@media screen and (max-width: 768px){
	.page-header{
  background-image: url(../img/header-service.jpg);
  background-position: center;
}
h2{
  border: none;
  font-weight: bold;
}
.at254 h2{
  color: #009944;
  letter-spacing: .1em;
}
.filter h2{
  color: #1d2088;
}
.filter-img{
  width: 100%;
  margin: 30px auto;
  max-width: 500px;
}
.filter-con .col-md-6{
  margin-bottom: 20px;
}
.difference h3{
  color: #fff;
}
.difference{
  text-align: center;
}
.product .sec-ttl.p-top{
  margin-bottom: 0;
}
.about-area{
  margin-top: 20px;
  padding: 70px 15px;
  background: #fff;
  position: relative;
}
.about-area h4.about-area-h4{
  color: #07ad91;
  border-bottom: 1px solid #07ad91;
}
.about-area .top{
  position: absolute;
  color: #07ad91;
  font-weight: bold;
  margin: 0;
  background-image: -moz-linear-gradient( 90deg, rgb(107,185,64) 0%, rgb(0,172,151) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(107,185,64) 0%, rgb(0,172,151) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(107,185,64) 0%, rgb(0,172,151) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 16px;
  text-align: center;
  width: 100%;
  position: absolute;
  top: -11px;
  left: 0%;
}
.icon-grid .col-4{
  margin-bottom: 30px;
}
.at254-area{background: #fff;margin: 100px 0;position: relative;padding-bottom: 50px;}
.at254-area h2.top{position: absolute;top: -17px;padding: 0px;margin: 0px;text-align: center;left: 75px;}
.at254-left-area{width: 40%;display: inline-block;padding: 30px 50px;}
.at254-con-1,.at254-con-2{;}
.at254-con-1{
    margin: 0 0 100px 0;
}
.at254-con-2{margin: 0 0 50px 0;}
.at254-con-1 h3,.at254-con-2 h3{text-align: left;border-bottom: solid 2px #07ad91;color: 07ad91;line-height: 2.5em;}
.at254-con-1 p,.at254-con-2 p{font-size: 14px;line-height: 1.8em;}
.at254-price{text-align: center;border: solid 1px #07ad91;}
.at254-price p.sub-text{color: #07ad91;font-weight: bold;margin: 10px 0 0 0;font-size: 13px;}
.at254-price p.price{margin: 0 0 10px;font-size: 22px;font-weight: bold;}
.at254-right-area{width: 40%;display: inline-block;padding: 30px 50px;vertical-align: top;}
.at254-con-3,.at254-con-4{;}
.at254-con-3{
    margin: 30px 0px 50px;
}
.at254-con-4{;}
.date{margin: 30px 0;text-align: center;}
.date a{
    padding: 20px 30px;
    background: #00ac97;
    background: -webkit-gradient(linear, left top, left bottom, from(#00ac97), to(#6bb940));
    background: -webkit-linear-gradient(top, #00ac97 0%, #6bb940 100%);
    background: linear-gradient(to bottom, #00ac97 0%, #6bb940 100%);
    color: #fff;
    text-decoration: none;
}
.date a:hover{
   opacity:0.5;
   transition:0.3s;
}.date a span:before{
  content: '';
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url(../img/at254/icon.png);
  background-size: contain;
  vertical-align: middle;
  background-repeat:no-repeat;
  margin: 0 20px 0 0;
  }
.at254-after{text-align: center;}
.at254-after h3.mechanism{margin: 10px 0 20px 0;font-size: 24px;}
.green-block{text-align: center;width: 50px;margin: 0 auto 20px;}
.green-block img{width: 100%;}
.works-area{text-align: center;padding: 0 3%;}
.works-con{width: 17.5%;display: inline-block;margin: 20px 11px;text-align: center;}
.works-con img{;}
.works-con span.caption{text-align: center;font-size: 12px;color: #383838;font-weight: normal;}
.menu-area{text-align: center;}
.menu-area img{width: 15%;}
.sub-copy{margin: 150px 0 0 0;font-size: 14px;font-weight: bold;color: 00ac97;}
.youtube{text-align:center;}
.faq{margin: 30px 0 0 0;}
.faq-copy{font-weight: bold;font-size: 18px;}
.faq h2{padding: 0px;color: #07ad91;font-size: 30px;margin: 10px 0 30px;}
.faq table{;}
.faq table td.faq-q{background: #515151;color: #fff;text-align: center;width: 50px;height: 50px;}
.faq table td.faq-q-answer{background: #07ad91;color: #fff;font-size: 14px;padding: 0 0 0 20px;}
.faq table td.faq-a{background: #f08300;color: #fff;text-align: center;width: 50px;height: 50px;}
.faq table td.faq-a-answer{background: #fff;color: #111;font-size: 14px;padding: 10px 0 10px 20px;line-height: 1.8em;}
.faq table td.faq-none{height: 20px;}

.filter{background: #d3edfb;padding: 0 0 0px;}

.filter-area{background: #fff;padding: 50px 15px;}
.filter-con{padding: 0 5%;}
.filter-con-1,.filter-con-2{display: inline-block;width: 47%;margin: 10px;}
.filter .service-view-area .filter-con-1 h3,
.filter .service-view-area .filter-con-2 h3{text-align: left;}
.filter-con-2{;}
.no{;}
.filter-movie{;}
.filter-youtube{;}
.filter-youtube .caption{;}
.filter-after{padding: 0 5%;}
.main-copy{font-size: 12px;letter-spacing: 0.2em;line-height: 1.8em;margin: 30px 0;}
.main-copy p{letter-spacing: .1em;}
.filter-flow{
}
.flow-1,.flow-2,.flow-3{border: solid 2px #1D1F88;border-radius: 10px;background: #fff;padding: 15px;}
.flow-tittle{font-weight: bold;color: #1D1F88;display: block;width: 100%;border-right: none;padding: 10px 0;font-size: 16px;text-align: center;vertical-align: middle;}
.flow-text{width: 100%;display: block;padding: 0px 0 0 10px;vertical-align: middle;font-size: 12px;}
.plus,.under{width: 30px;margin: 20px auto;}
.flow-2{;}
.flow-3{;}
.under{;}
.flow-fin{text-align: center;}
.fin-tittle{font-size: 24px;font-weight: bold;margin: 0 0 10px;}
.fin-text{font-size: 20px;color: #f08300;letter-spacing: 0.2em;line-height: 1.5em;}
.fin-text p{margin:0;}
span.small{font-size:14px;vertical-align:middle;letter-spacing: 1px;}
span.mark{
 background: linear-gradient(transparent 50%, #f9ef8a 0%);
 font-weight: bold;
}
.difference{margin: 30px 0 0;background: #1d2088;padding: 10px;}
.filter .service-view-area .difference h3{text-align: center;font-size: 22px;font-weight: bold;margin: 0 0 15px;color: #fff;}
.difference-1{width: 100%;margin: 20px auto;}
.difference-2{;}
.colors{background: #eeeceb;}
.colors h2{font-size: 24px;color: #111;letter-spacing: 0.1em;}

.colors h3{
    font-size: 16px;
}
.colors-area h3{
    font-size: 25px;
}

.colors-area{background:#fff;padding:50px 15px;}
.colors-con{text-align: center;}
.colors-con h3{text-align: left;color: #07ad91;border-bottom: solid 2px #07ad91;line-height: 2em;font-size: 20px;}
.colors-con p{text-align: left;margin: 30px 0;}
.colors-left{width: 30%;display: inline-block;margin-right: 5%;}
.left-img{vertical-align: middle;}
.colors-right{display: inline-block;width: 100%;vertical-align: bottom;}
.right-img{margin: 5% 0 0;}
.colors-after{margin: 0px 0 0;}
.point{text-align: center;}
.point-con{width: 99%;display: inline-block;vertical-align: top;margin: 0px 5px;font-size: 0px;}
.point-text{background: #07ad91;display: inherit;padding: 10px 30px 30px;height: 230px;}
.point-text h3{color: #fff;text-align: left;font-size: 18px;}
.point-text p{color: #fff;text-align: left;font-size: 14px;line-height: 1.8em;}
.overview{padding: 30px 0 0px;text-align: center;}
.overview h3{font-size: 22px;}
.overview-text{;}
.overview-text p{font-size: 19px;font-weight: bold;}
.overview-area{background: #fff;padding: 10px;margin: 30px 0;}
.overview-area-text{;}
.overview-area-text h3{font-size: 20px;color: #07ad91;margin: 30px 0;}
.overview-area-text p{font-size: 12px;line-height: 1.8em;text-align: left;}
.comparison{margin: 30px 0 0;}
.comparison h3{margin: 0px;}
.comparison-img{;}
}


.filter-point{
  border: 1px solid #1d2088;
  position: relative;
  padding: 30px 15px 10px;
  margin: 20px 10px;
  height: 90%;
}
.filter-point::before{
  position: absolute;
  background: #1d2088;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  text-align: center;
  color: #fff;
  top: -25px;
  left: -25px;
  font-size: 26px;
  line-height: 50px;
}
.filter-point-1::before{
    content: '1';
}
.filter-point-2::before{
    content: '2';
}
.filter-point-3::before{
    content: '3';
}
.filter-point-4::before{
    content: '4';
}
.filter-point-5::before{
    content: '5';
}
.filter-point-6::before{
    content: '6';
}
.filter-point-7::before{
    content: '7';
}
.filter-point h4{
  color: #07ad91;
  font-size: 18px;
  font-weight: bold;
}