@charset "utf-8";

/* ===== solutions top ====== */
.feature_col {
  background: #E9E9E9;
  color: #004091;
  height: 350px;
  margin-bottom: 10px;
  clear: both;
  overflow: hidden;
  cursor: pointer;
}
.feature_col h3 {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 20px;
}

.feature_col.caption_right .thumbnail {
  float: left;
  width: 350px;
}
.feature_col.caption_left .thumbnail {
  float: right;
  width: 350px;
}

.feature_col .caption {
  padding: 40px 50px 20px;
  box-sizing: border-box;
  position: relative;
  font-size: 0.9em;
  height: 350px;
}

.feature_col.caption_right .caption {
  margin-left: 350px;
}
.feature_col.caption_left .caption {
  width: 710px;
  float: left;
}

.feature_col .caption div.more_link {
  width: 134px;
  height: 34px;
  position: absolute;
  bottom: 25px;
  right: 0;
  font-weight: bold;
}

.feature_col.caption_right .caption div.more_link {
  right: 35px;
}

div.more_link  a {
  display: block;
  height: 34px;
  line-height: 34px;
  border: 1px solid #004091;
  color: #004091;
  text-decoration: none;
  padding: 0 10px;
  position: relative;
  background: url(../images/morelink_arrow.png) no-repeat right center;
  background-size: 30px;
}
div.more_link  a:hover {
  border: 1px solid #004091;
  color: #FFF;
  background: #004091 url(../images/morelink_arrow_on.png) no-repeat right center;
  background-size: 30px;
}

@media(max-width: 768px) {
  .feature_col {
    height: auto;
  }
  .feature_col img {
    width: 100%;
    height: auto;
  }
  .feature_col.caption_left .thumbnail,
  .feature_col.caption_right .thumbnail {
    float: none;
    width: auto;
  }
  .feature_col .caption,
  .feature_col.caption_left .caption,
  .feature_col.caption_right .caption {
    padding: 20px 10px;
    font-size: 1em;
    width: auto!important;
    height: auto;
    float: none;
    margin: 0;
    overflow: hidden;
  }
  .feature_col .caption br {
    display: none;
  }
  .feature_col h3 {
    margin-bottom: 13px;
  }
  .feature_col .caption span.hide {
    display: none;
  }
  .feature_col .caption div.more_link,
  .feature_col.caption_right .caption div.more_link {
    position: static!important;
    float: right;
    right: inherit;
    bottom: inherit;
    margin-top: 20px;
  }
}


/* ===== solutions common ====== */
.main_img {
  text-align: center;
  margin-bottom: 110px; 
}
.solution_menu {
  clear: both;
  width: 980px;
  margin: 80px auto 0;
}

.solution_menu div {
  float: left;
  width: 239px;
  height: 135px;
  margin-right: 8px;
  font-size: 1.1em;
  font-weight: bold;
}
.solution_menu div:last-child {
  margin-right: 0;
}
.solution_menu div a {
  display: block;
  height: 135px;
  text-decoration: none;
  background: #004091;
  color: #FFF;
  box-sizing: border-box;
  padding-top: 95px;
  padding-left: 20px;
  position: relative;
}
@media(min-width: 769px) {
  .solution_menu div a:hover {
    opacity: 0.8; /* 0.0～1.0 */
  filter: alpha(opacity=80); /* 0～100 */}
}

.solution_menu div.menu_btn01 a {
  background:#004091  url(../solutions/images/solution_menu_icon1.png) no-repeat 20px 35px;
  background-size: 41px;
}
.solution_menu div.menu_btn02 a {
  background:#004091  url(../solutions/images/solution_menu_icon2.png) no-repeat 20px 35px;
  background-size: 41px;
}
.solution_menu div.menu_btn03 a {
  background:#004091  url(../solutions/images/solution_menu_icon3.png) no-repeat 20px 35px;
  background-size: 41px;
}
.solution_menu div.menu_btn04 a {
  background:#004091  url(../solutions/images/solution_menu_icon4.png) no-repeat 20px 35px;
  background-size: 41px;
}
.solution_menu div.menu_btn01 a:after {
  position: absolute;
  top: 10px;
  right: 10px;
  content: '01';
  color: #FFF;
  font-size: 2em;
  font-family: 'Roboto',sans-serif;
  font-weight: 100;
  line-height: 1.0;
}
.solution_menu div.menu_btn02 a:after {
  position: absolute;
  top: 10px;
  right: 10px;
  content: '02';
  color: #FFF;
  font-size: 2em;
  font-family: 'Roboto',sans-serif;
  font-weight: 100;
  line-height: 1.0;
}
.solution_menu div.menu_btn03 a:after {
  position: absolute;
  top: 10px;
  right: 10px;
  content: '03';
  color: #FFF;
  font-size: 2em;
  font-family: 'Roboto',sans-serif;
  font-weight: 100;
  line-height: 1.0;
}
.solution_menu div.menu_btn04 a:after {
  position: absolute;
  top: 10px;
  right: 10px;
  content: '04';
  color: #FFF;
  font-size: 2em;
  font-family: 'Roboto',sans-serif;
  font-weight: 100;
  line-height: 1.0;
}
@media(max-width: 768px) {
  .solution_menu {
    width: auto;
  }
  .solution_menu div {
    width: calc(50% - 5px);
    height: 25vw;
    margin-right: 0;
    margin-bottom: 10px;
  }
  .solution_menu div:nth-child(odd) {
    float: left;
    clear: both;
  }
  .solution_menu div:nth-child(even) {
    float: right;
  }
  .solution_menu div a {
    height: 25vw;
    padding-top: 16vw;
    padding-left: 5vw;
  }
  .solution_menu div.menu_btn01 a {
    background:#004091  url(../solutions/images/solution_menu_icon1.png) no-repeat 5vw 4vw;
    background-size: 10vw;
  }
  .solution_menu div.menu_btn02 a {
    background:#004091  url(../solutions/images/solution_menu_icon2.png) no-repeat 5vw 4vw;
    background-size: 10vw;
  }
  .solution_menu div.menu_btn03 a {
    background:#004091  url(../solutions/images/solution_menu_icon3.png) no-repeat 5vw 4vw;
    background-size: 10vw;
  }
  .solution_menu div.menu_btn04 a {
    background:#004091  url(../solutions/images/solution_menu_icon4.png) no-repeat 5vw 4vw;
    background-size: 10vw;
  }
  .solution_menu div.menu_btn01 a:after,
  .solution_menu div.menu_btn02 a:after,
  .solution_menu div.menu_btn03 a:after,
  .solution_menu div.menu_btn04 a:after {
    font-size: 6.4vw;
  }
  .main_img {
    margin-bottom: 80px;
  }
}

div.solution_container {
  background: #e7e7e7;
  color: #00408f;
  width: 1080px;
  margin: 80px auto 75px;
  padding: 100px 0 80px;
}
div.solution_container a {
  color: #00408f;
  text-decoration: underline;
}
div.solution_container a:hover {
  color: #00408f;
  text-decoration: none;
}

div.lightweight_page p,
div.lightweight_page div {
  margin: 0;
  padding: 0; 
}

/* ===== 01 / Lightweight ====== */
@media(min-width: 769px) {
  div.category_header.lightweight h2 br {
    display: none;
  }
}

div.solution_container.lightweight_page {
  padding-top: 150px;
  padding-bottom: 100px;
}

div.lightweight_page div.col1,
div.lightweight_page div.col2,
div.lightweight_page div.col3,
div.lightweight_page div.col4,
div.lightweight_page div.col5,
div.lightweight_page div.col6,
div.lightweight_page div.col7 {
  position: relative;
  width: 700px;
  margin: 0 auto 60px;
}

div.lightweight_page div.figure {
  margin-bottom: 20px;
}
div.lightweight_page img {
  width: 100%;
  height: auto;
}
div.lightweight_page div.col1 .sub1,
div.lightweight_page div.col1 .sub2,
div.lightweight_page div.col2 .sub1,
div.lightweight_page div.col3 .sub1,
div.lightweight_page div.col4 .sub1,
div.lightweight_page div.col5 .sub1,
div.lightweight_page div.col5 .sub2,
div.lightweight_page div.col6 .sub1,
div.lightweight_page div.col6 .sub2,
div.lightweight_page div.col7 .sub1 {
  position: absolute;
}

div.lightweight_page div.col1 .sub1{left:-170px;top:-110px;width:160px;}
div.lightweight_page div.col1 .sub2{left:348px;top:-80px;width:504px;}
div.lightweight_page div.col2 .sub1{left:-135px;top:95px;width:236px;}
div.lightweight_page div.col2{margin-bottom:110px;}
div.lightweight_page div.col3 .sub1{left:602px;top:-40px;width:236px;}
div.lightweight_page div.col3{margin-bottom:85px;}
div.lightweight_page div.col4 .sub1{left:-40px;top:-33px;width:160px;}
div.lightweight_page div.col4 .caption p{margin-left:145px;}
div.lightweight_page div.col4{margin-bottom:160px;}
div.lightweight_page div.col5 .sub1{left:-172px;top:-109px;width:160px;}
div.lightweight_page div.col5 .sub2{left:602px;top:-54px;width:236px;}
div.lightweight_page div.col5{margin-bottom:140px;}
div.lightweight_page div.col6 .sub1{left:-172px;top:-109px;width:160px;}
div.lightweight_page div.col6 .sub2{left:602px;top:-40px;width:236px;}
div.lightweight_page div.col6{margin-bottom:140px;}
div.lightweight_page div.col7 .sub1{left:-135px;top:-85px;width:236px;}
div.lightweight_page div.col7 .caption p{margin-left:115px;}
div.lightweight_page div.col4{margin-bottom:160px;}



/* ===== 02 / Powertrain ====== */
div.solution_container.powertrain_page {
  padding-top: 100px;
}
div.powertrain_page div.col1,
div.powertrain_page div.col2,
div.powertrain_page div.col3 {
  position: relative;
  width: 700px;
  margin: 0 auto 60px;
}
div.powertrain_page div.figure{margin-bottom:20px;}
div.powertrain_page img{width:100%;height:auto;}
div.powertrain_page div.col1{margin-bottom:75px;}
div.powertrain_page div.col2{margin-bottom:95px;}

div.powertrain_page div.col1 .sub1,
div.powertrain_page div.col2 .sub1,
div.powertrain_page div.col3 .sub1 {position: absolute;}
div.powertrain_page div.col1 .sub1 {
  left: -145px;
  top: -40px;
  width: 236px;
}
div.powertrain_page div.col2 .sub1 {
  left: 596px;
  top: -37px;
  width: 236px;
}
div.powertrain_page div.col3 .sub1 {
  left: -138px;
  top: -40px;
  width: 236px;
}

/* ===== 03 / Safety ====== */
div.solution_container.safety_page {padding-top: 150px;}
div.safety_page div.col1,
div.safety_page div.col2,
div.safety_page div.col3,
div.safety_page div.col4 {
  position: relative;
  width: 700px;
  margin: 0 auto 60px;
}
div.safety_page div.figure {
  margin-bottom: 20px;
}
div.safety_page img {
  width: 100%;
  height: auto;
}
div.safety_page div.col1 .sub1,
div.safety_page div.col1 .sub2,
div.safety_page div.col2 .sub1,
div.safety_page div.col3 .sub1,
div.safety_page div.col4 .sub1 {position: absolute;}

div.safety_page div.col1 .sub1{left:-170px;top:-110px;width:160px;}
div.safety_page div.col1 .sub2{left:600px;top:-43px;width:236px;}
div.safety_page div.col1{margin-bottom:120px;}
div.safety_page div.col2 .sub1{left:-135px;top:-40px;width:236px;}
div.safety_page div.col2{margin-bottom:130px;}
div.safety_page div.col3 .sub1{left:-136px;top:-60px;width:236px;}
div.safety_page div.col3 .caption p{margin-left:125px;}
div.safety_page div.col3{margin-bottom:140px;}
div.safety_page div.col4 .sub1{left:600px;top:-45px;width:236px;}

/* ===== 04 / Comfort ====== */
div.solution_container.comfort_page {
  padding-top: 100px; 
}

div.comfort_page div.col1,
div.comfort_page div.col2,
div.comfort_page div.col3,
div.comfort_page div.col4,
div.comfort_page div.col5 {
  position: relative;
  width: 700px;
  margin: 0 auto 85px;
}
div.comfort_page div.col5 {
  margin-bottom: 0; 
}

div.comfort_page div.figure {
  margin-bottom: 20px;
}
div.comfort_page img {
  width: 100%;
  height: auto; 
}
div.comfort_page div.col1 .sub1,
div.comfort_page div.col1 .sub2,
div.comfort_page div.col2 .sub1,
div.comfort_page div.col3 .sub1,
div.comfort_page div.col4 .sub1,
div.comfort_page div.col5 .sub1 {
  position: absolute;
  width: 236px;
}

div.comfort_page div.col1 .sub1,
div.comfort_page div.col3 .sub1,
div.comfort_page div.col5 .sub1 {
  left: -136px;
  top: -40px;
}

div.comfort_page div.col2 .sub1 {
  left: 596px;
  top: 79px;
}
div.comfort_page div.col4 .sub1 {
  left: 596px;
  top: -40px;
}


.movie_section {
  width: 960px;
  clear: both;
  margin: 0 auto 110px;
}
.movie_section iframe {
  width: 100%;
  min-height: 500px;
}

@media(max-width: 768px) {

  div.category_header.lightweight h2 {
    font-size: 1.5em;
  }
  div.solution_container {
    width: auto;
    margin: 30px auto;
    padding: 30px 0!important;
  }
  div.solution_container div.col1,
  div.solution_container div.col2,
  div.solution_container div.col3,
  div.solution_container div.col4,
  div.solution_container div.col5,
  div.solution_container div.col6,
  div.solution_container div.col7 {
    width: auto;
    margin: 0 auto 40px;
  }
  div.solution_container div.caption {
    margin: 0 30px; 
  }

  div.solution_container .sub1,
  div.solution_container .sub2,
  div.solution_container .sub3 {
    display: none;
  }
  div.solution_container.lightweight_page div.col4 .sub1,
  div.solution_container.lightweight_page div.col7 .sub1,
  div.solution_container.safety_page div.col3 .sub1 {
    display: block;
    width: 24vw;
    position: static;
    float: left;
    top: inherit;
    left: inherit;
  }
  div.solution_container.lightweight_page div.col4 .caption p,
  div.solution_container.lightweight_page div.col7 .caption p,
  div.solution_container.lightweight_page div.col7 .caption p,
  div.solution_container.safety_page div.col3 .caption p {
    margin-left: calc(24vw + 10px);
  }

  .main_img img {
    width: 100%;
    height: auto;
  }
  .category_lead br,
  div.solution_container div.col1 br,
  div.solution_container div.col2 br,
  div.solution_container div.col3 br,
  div.solution_container div.col4 br,
  div.solution_container div.col5 br,
  div.solution_container div.col6 br,
  div.solution_container div.col7 br {
    display: none;
  }


  .movie_section {
    position:relative;
    width: 100%;
    padding-top:56.25%;
    margin: 40px 0;
  }
  .movie_section iframe {
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
    min-height: inherit;
  }

}
@media(max-width: 640px) {

  div.solution_container div.col1,
  div.solution_container div.col2,
  div.solution_container div.col3,
  div.solution_container div.col4,
  div.solution_container div.col5,
  div.solution_container div.col6,
  div.solution_container div.col7 {
    margin: 0 auto 20px;
    word-wrap: break-word;
    overflow-wrap : break-word;
  }
  div.solution_container div.caption {
    margin: 0 15px;
  }

}



@media(max-width: 320px) {

  div.solution_container div.caption {
    margin: 0 10px;
  }

}