/* Style for PCs */
@media screen and (min-width: 1025px) {

/* Features 
----------------------------------------------------------*/
ul.features {
width:100%;
height: auto;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 30px;
}
ul.features li {
width:calc( 33.33% - 20px );
height: auto;
display: block;
margin: 10px;
text-align:center;
background-color: rgba(255,255,255,0.70);
box-shadow:0px 10px 10px rgba(0,0,0,0.05);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-position: center 10px;
background-repeat: no-repeat;
background-size: auto 80px;
font-size: 14px;
font-weight: 300;
letter-spacing: 0px;
line-height: 1.25em;
padding:90px 10px 20px;
}
ul.features li#fm-dressup {
background-image: url(../img/icons/bodyrepair/ic-dressup.svg);
}
ul.features li#fm-estimate {
background-image: url(../img/icons/bodyrepair/ic-estimate.svg);
}
ul.features li#fm-dent {
background-image: url(../img/icons/bodyrepair/ic-dent.svg);
}
ul.features li#fm-frame {
background-image: url(../img/icons/bodyrepair/ic-frame.svg);
}
ul.features li#fm-loader {
background-image: url(../img/icons/bodyrepair/ic-loader.svg);
}
ul.features li#fm-daisha {
background-image: url(../img/icons/bodyrepair/ic-daisha.svg);
}

/* factories 
----------------------------------------------------------*/
.factories {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  width:100%;
  height: auto;
}
.factories a {
  width:calc( 14.285% - 10px );
  height: auto;
  display: block;
  padding: 10px 0;
  margin: 5px;
  text-align:center;
  background-color: rgba(255,255,255,1.00);
  box-shadow:0px 10px 10px rgba(0,0,0,0.05);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.factories a:hover {
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}

/* Bodyrepair img 
----------------------------------------------------------*/
ul.bodyrepair-img {
width:100%;
height: auto;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 30px;
}
ul.bodyrepair-img li {
width:calc( 33.33% - 20px );
height: auto;
display: block;
margin: 10px;
text-align:center;
background-color: rgba(255,255,255,0.70);
box-shadow:0px 10px 10px rgba(0,0,0,0.05);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 14px;
font-weight: 300;
letter-spacing: 0px;
line-height: 1.25em;
padding:20px;
}

/* BN Casestudy 
----------------------------------------------------------*/
p.tocs {
width:33.333333333333%;
height: 60px;
display: block;
margin:0 auto!important;
font-size:18px;
font-weight: 400;
letter-spacing: 0px;
line-height: 60px;
}
p.tocs a {
width:100%;
height: 60px;
display: block;
margin:0 auto!important;
padding-right:20px;
text-align: right;
color:#fff;
text-decoration: none;
background-color: #D94502;
background-image: url(../img/icons/bodyrepair/ic-casestudy.svg);
background-repeat: no-repeat;
background-position: 5px center;
background-size: auto 90%;
font-size:18px;
font-weight: 400;
letter-spacing: 0px;
line-height: 60px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
p.tocs a:hover {
background-color: #194492;
}


/* Items 
----------------------------------------------------------*/
p.br_price {
font-size:16px!important;
line-height: 1.25em!important;
letter-spacing: 0px;
margin-bottom: 0px!important;
}
p.br_price strong {
color:#194492;
}
#br01 {
padding-top:80px;
padding-bottom: 80px;
background-image: url(../img/bodyrepair/window_repair_pc.png);
background-position: left center;
background-repeat: no-repeat;
background-size: 50% auto;
}
#br01cc {
width:50%;
height: auto;
display: block;
margin-left:50%;
}
#br02 {
background-image:url(../img/bodyrepair/coating_pc.png);
background-position: right top;
background-repeat: no-repeat;
background-size: 50% auto;
}
#br02cc {
width:50%;
height: auto;
display: block;
}


/* table */

table.ts02 tr td.col-head {
  width: 25%;
}

table.ts02 tr td.col-body {
  width: 55%;
}

table.ts02 tr td.col-price {
  width: 20%;
}

.col-body-wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}

.col-item {
  width: calc( 100% - 200px );
  text-align: left;
}

.col-item-img {
  width: 200px;
}

.col-item-img img {
  width: 100%;
  height: auto;
}

	
}


/* Style for iPad Pro */
@media screen and (min-width: 769px) and (max-width: 1024px) {

/* Features 
----------------------------------------------------------*/
ul.features {
width:100%;
height: auto;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 30px;
}
ul.features li {
width:calc( 33.33% - 20px );
height: auto;
display: block;
margin: 10px;
text-align:center;
background-color: rgba(255,255,255,0.70);
box-shadow:0px 10px 10px rgba(0,0,0,0.05);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-position: center 10px;
background-repeat: no-repeat;
background-size: auto 80px;
font-size: 14px;
font-weight: 300;
letter-spacing: 0px;
line-height: 1.25em;
padding:90px 10px 20px;
}
ul.features li#fm-dressup {
background-image: url(../img/icons/bodyrepair/ic-dressup.svg);
}
ul.features li#fm-estimate {
background-image: url(../img/icons/bodyrepair/ic-estimate.svg);
}
ul.features li#fm-dent {
background-image: url(../img/icons/bodyrepair/ic-dent.svg);
}
ul.features li#fm-frame {
background-image: url(../img/icons/bodyrepair/ic-frame.svg);
}
ul.features li#fm-loader {
background-image: url(../img/icons/bodyrepair/ic-loader.svg);
}
ul.features li#fm-daisha {
background-image: url(../img/icons/bodyrepair/ic-daisha.svg);
}

/* factories 
----------------------------------------------------------*/
.factories {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  width:100%;
  height: auto;
}
.factories a {
  width:calc( 25% - 10px );
  height: auto;
  display: block;
  padding: 10px 0;
  margin: 5px;
  text-align:center;
  background-color: rgba(255,255,255,1.00);
  box-shadow:0px 10px 10px rgba(0,0,0,0.05);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.factories a:hover {
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}

/* Bodyrepair img 
----------------------------------------------------------*/
ul.bodyrepair-img {
width:100%;
height: auto;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 30px;
}
ul.bodyrepair-img li {
width:calc( 50% - 20px );
height: auto;
display: block;
margin: 10px;
text-align:center;
background-color: rgba(255,255,255,0.70);
box-shadow:0px 10px 10px rgba(0,0,0,0.05);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 14px;
font-weight: 300;
letter-spacing: 0px;
line-height: 1.25em;
padding:20px;
}

/* BN Casestudy 
----------------------------------------------------------*/
p.tocs {
width:50%;
height: 60px;
display: block;
margin:0 auto!important;
font-size:18px;
font-weight: 400;
letter-spacing: 0px;
line-height: 60px;
}
p.tocs a {
width:100%;
height: 60px;
display: block;
margin:0 auto!important;
padding-right:20px;
text-align: right;
color:#fff;
text-decoration: none;
background-color: #D94502;
background-image: url(../img/icons/bodyrepair/ic-casestudy.svg);
background-repeat: no-repeat;
background-position: 5px center;
background-size: auto 90%;
font-size:18px;
font-weight: 400;
letter-spacing: 0px;
line-height: 60px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
p.tocs a:hover {
background-color: #194492;
}


/* Items 
----------------------------------------------------------*/
p.br_price {
font-size:16px!important;
line-height: 1.25em!important;
letter-spacing: 0px;
margin-bottom: 0px!important;
}
p.br_price strong {
color:#194492;
}
#br01 {
padding-top:80px;
padding-bottom: 80px;
background-image: url(../img/bodyrepair/window_repair_m.png);
background-position: left top;
background-repeat: no-repeat;
background-size: 100% auto;
}
#br01cc {
width:100%;
height: auto;
display: block;
padding-top:18%;
}
#br02 {
background-image:url(../img/bodyrepair/coating_m.png);
background-position: left top;
background-repeat: no-repeat;
background-size: 100% auto;
}
#br02cc {
width:100%;
height: auto;
display: block;
padding-top:20%;
}

/* table */

table.ts02 tr td.col-head {
  width: 25%;
}

table.ts02 tr td.col-body {
  width: 55%;
}

table.ts02 tr td.col-price {
  width: 20%;
}

.col-body-wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}

.col-item {
  width: calc( 100% - 130px );
  text-align: left;
}

.col-item-img {
  width: 130px;
}

.col-item-img img {
  width: 100%;
  height: auto;
}

}

/* Style for iPad */
@media screen and (min-width: 481px) and (max-width: 768px) {

/* Features 
----------------------------------------------------------*/
ul.features {
width:100%;
height: auto;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 30px;
}
ul.features li {
width:calc( 50% - 10px );
height: auto;
display: block;
margin: 5px;
text-align:center;
background-color: rgba(255,255,255,0.70);
box-shadow:0px 10px 10px rgba(0,0,0,0.05);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-position: center 10px;
background-repeat: no-repeat;
background-size: auto 80px;
font-size: 14px;
font-weight: 300;
letter-spacing: 0px;
line-height: 1.25em;
padding:90px 10px 20px;
}
ul.features li#fm-dressup {
background-image: url(../img/icons/bodyrepair/ic-dressup.svg);
}
ul.features li#fm-estimate {
background-image: url(../img/icons/bodyrepair/ic-estimate.svg);
}
ul.features li#fm-dent {
background-image: url(../img/icons/bodyrepair/ic-dent.svg);
}
ul.features li#fm-frame {
background-image: url(../img/icons/bodyrepair/ic-frame.svg);
}
ul.features li#fm-loader {
background-image: url(../img/icons/bodyrepair/ic-loader.svg);
}
ul.features li#fm-daisha {
background-image: url(../img/icons/bodyrepair/ic-daisha.svg);
}

/* factories 
----------------------------------------------------------*/
.factories {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  width:100%;
  height: auto;
}
.factories a {
  width:calc( 25% - 10px );
  height: auto;
  display: block;
  padding: 10px 0;
  margin: 5px;
  text-align:center;
  background-color: rgba(255,255,255,1.00);
  box-shadow:0px 10px 10px rgba(0,0,0,0.05);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.factories a:hover {
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}

/* Bodyrepair img 
----------------------------------------------------------*/
ul.bodyrepair-img {
width:100%;
height: auto;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 30px;
}
ul.bodyrepair-img li {
width:calc( 50% - 10px );
height: auto;
display: block;
margin: 5px;
text-align:center;
background-color: rgba(255,255,255,0.70);
box-shadow:0px 10px 10px rgba(0,0,0,0.05);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 14px;
font-weight: 300;
letter-spacing: 0px;
line-height: 1.25em;
padding:20px;
}

/* BN Casestudy 
----------------------------------------------------------*/
p.tocs {
width:80%;
height: 60px;
display: block;
margin:0 auto!important;
font-size:18px;
font-weight: 400;
letter-spacing: 0px;
line-height: 60px;
}
p.tocs a {
width:100%;
height: 60px;
display: block;
margin:0 auto!important;
padding-right:20px;
text-align: right;
color:#fff;
text-decoration: none;
background-color: #D94502;
background-image: url(../img/icons/bodyrepair/ic-casestudy.svg);
background-repeat: no-repeat;
background-position: 5px center;
background-size: auto 90%;
font-size:18px;
font-weight: 400;
letter-spacing: 0px;
line-height: 60px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
p.tocs a:hover {
background-color: #194492;
}


/* Items 
----------------------------------------------------------*/
p.br_price {
font-size:16px!important;
line-height: 1.25em!important;
letter-spacing: 0px;
margin-bottom: 0px!important;
}
p.br_price strong {
color:#194492;
}
#br01 {
padding-top:80px;
padding-bottom: 80px;
background-image: url(../img/bodyrepair/window_repair_m.png);
background-position: left top;
background-repeat: no-repeat;
background-size: 100% auto;
}
#br01cc {
width:100%;
height: auto;
display: block;
padding-top:18%;
}
#br02 {
background-image:url(../img/bodyrepair/coating_m.png);
background-position: left top;
background-repeat: no-repeat;
background-size: 100% auto;
}
#br02cc {
width:100%;
height: auto;
display: block;
padding-top:20%;
}

/* table */

table.ts02 tr td.col-head {
  width: 120px;
}

table.ts02 tr td.col-body {
  width: calc( 100% - 205px );
}

table.ts02 tr td.col-price {
  width: 85px;
}

.col-body-wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
}

.col-item {
  width: 100%;
  text-align: center;
}

.col-item-img {
  width: 130px;
  margin: 10px auto 0 auto;
}

.col-item-img img {
  width: 100%;
  height: auto;
}

}

/* Style for Smartphone */
@media screen and (max-width: 480px) {

/* Features 
----------------------------------------------------------*/
ul.features {
width:100%;
height: auto;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 30px;
}
ul.features li {
width:calc( 50% - 6px );
height: auto;
display: block;
margin: 3px;
text-align:center;
background-color: rgba(255,255,255,0.70);
box-shadow:0px 10px 10px rgba(0,0,0,0.05);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-position: center 10px;
background-repeat: no-repeat;
background-size: auto 80px;
font-size: 14px;
font-weight: 300;
letter-spacing: 0px;
line-height: 1.25em;
padding:90px 10px 20px;
}
ul.features li#fm-dressup {
background-image: url(../img/icons/bodyrepair/ic-dressup.svg);
}
ul.features li#fm-estimate {
background-image: url(../img/icons/bodyrepair/ic-estimate.svg);
}
ul.features li#fm-dent {
background-image: url(../img/icons/bodyrepair/ic-dent.svg);
}
ul.features li#fm-frame {
background-image: url(../img/icons/bodyrepair/ic-frame.svg);
}
ul.features li#fm-loader {
background-image: url(../img/icons/bodyrepair/ic-loader.svg);
}
ul.features li#fm-daisha {
background-image: url(../img/icons/bodyrepair/ic-daisha.svg);
}

/* factories 
----------------------------------------------------------*/
.factories {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  width:100%;
  height: auto;
}
.factories a {
  width:calc( 50% - 10px );
  height: auto;
  display: block;
  padding: 10px 0;
  margin: 5px;
  text-align:center;
  background-color: rgba(255,255,255,1.00);
  box-shadow:0px 10px 10px rgba(0,0,0,0.05);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.factories a:hover {
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}

/* Bodyrepair img 
----------------------------------------------------------*/
ul.bodyrepair-img {
width:100%;
height: auto;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 30px;
}
ul.bodyrepair-img li {
width:calc( 100% - 6px );
height: auto;
display: block;
margin: 3px;
text-align:center;
background-color: rgba(255,255,255,0.70);
box-shadow:0px 10px 10px rgba(0,0,0,0.05);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 14px;
font-weight: 300;
letter-spacing: 0px;
line-height: 1.25em;
padding:20px;
}

/* BN Casestudy 
----------------------------------------------------------*/
p.tocs {
width:100%;
height: 60px;
display: block;
margin:0 auto!important;
font-size:18px;
font-weight: 400;
letter-spacing: 0px;
line-height: 60px;
}
p.tocs a {
width:100%;
height: 60px;
display: block;
margin:0 auto!important;
padding-right:20px;
text-align: right;
color:#fff;
text-decoration: none;
background-color: #D94502;
background-image: url(../img/icons/bodyrepair/ic-casestudy.svg);
background-repeat: no-repeat;
background-position: 5px center;
background-size: auto 90%;
font-size:18px;
font-weight: 400;
letter-spacing: 0px;
line-height: 60px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
p.tocs a:hover {
background-color: #194492;
}


/* Items 
----------------------------------------------------------*/
p.br_price {
font-size:16px!important;
line-height: 1.25em!important;
letter-spacing: 0px;
margin-bottom: 0px!important;
}
p.br_price strong {
color:#194492;
}
#br01 {
padding-top:80px;
padding-bottom: 80px;
background-image: url(../img/bodyrepair/window_repair_m.png);
background-position: left top;
background-repeat: no-repeat;
background-size: 100% auto;
}
#br01cc {
width:100%;
height: auto;
display: block;
padding-top:10%;
}
#br02 {
background-image:url(../img/bodyrepair/coating_m.png);
background-position: left top;
background-repeat: no-repeat;
background-size: 100% auto;
}
#br02cc {
width:100%;
height: auto;
display: block;
padding-top:20%;
}

/* table */

table.ts02 tr td.col-head {
  width: 125px;
  font-size: 11px;
}

table.ts02 tr td.col-body {
  width: calc( 100% - 205px );
  font-size: 11px;
}

table.ts02 tr td.col-price {
  width: 80px;
  font-size: 11px;
}

.col-body-wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
}

.col-item {
  width: 100%;
  text-align: center;
}

.col-item-img {
  width: 130px;
  margin: 10px auto 0 auto;
}

.col-item-img img {
  width: 100%;
  height: auto;
}

}