@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
/*
 * product.css
 */

/*
 * common
 */
img {
  max-width: 100%;
}
.noteTxt {
  font-size: 1.3rem;
}
.indexContent {
  margin-bottom: 0;
}
.productMv {
  margin-bottom: 80px;
}
  .productMv::before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 35.156%;
    background: no-repeat center center / cover;
    margin-bottom: 40px;
  }
  .productMv .cInner {
    max-width: 960px;
    padding: 0 50px;
    margin: 0 auto;
  }
.productContent {
  max-width: 960px;
  padding: 0 50px;
  margin: 0 auto;
}
.tabContents .productContent {
  padding: 0;
}
  .productContent .blockTtl,
  .productContent .headStyle01 {
    width: 100%;
    box-sizing: border-box;
  }
.imgTxtVox {
  width: 100%;
}
.imgTxtVox:not(:last-child) {
  margin-bottom: 60px;
}
  .imgTxtVox .blockTtl {
    width: 100%;
    margin-bottom: 30px;
  }
  .imgTxtVox .btnStyle01 {
    margin-top: 30px;
  }
.localNavVox {
  padding-top: 50px;
  padding-bottom: 50px;
}
.productBack {
  text-align: center;
  padding: 50px 0;
}
.productBack .btnStyle01 a span:not(.icoPDF)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  right: auto;
  rotate: -135deg;
  translate: 0 -50%;
}
.bgVox {
  padding: 60px 0;
  margin-top: 80px;
  background: #eeeeee;
}
.movieList {
  width: 100%;
  margin-top: 30px;
}
.introVox {
  max-width: 960px;
  padding-top: 50px;
  margin: 0 auto 50px auto;
}
.tabVoxWrapper {
  margin-bottom: 0;
}
  .tabVoxWrapper .tabs {
    max-width: 960px;
    margin: 0 auto;
  }
/*
 * index
 */
body#product.top .txt-discontinued {
  text-align: right;
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 50px 50px 50px;
}
  body#product.top .txt-discontinued a {
    color: #3065d0;
  }
/*
 * mobility
 */
body#product.mobility .pageHeader {
  margin-bottom: 0;
}
body#product.mobility .productMv {
  margin-bottom: 50px;
}
body#product.mobility .productMv::before {
  background-image: url(../img/product/mobility/main_img.jpg?230615);
}
body#product.mobility .productContent {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 40px;
}
  body#product.mobility .categoryVox {
    width: calc(50% - 10px);
    background: #f2f4f8;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  body#product.mobility .categoryVox:nth-of-type(2n) {
    margin-right: 0;
  }
    body#product.mobility .categoryVox a {
      display: block;
      color: #000;
      text-decoration: none;
      border-top-width: 4px;
      border-top-style: solid;
      transition: .2s;
    }
    body#product.mobility .categoryVox.red a {
      border-top-color: #a41528;
    }
    body#product.mobility .categoryVox.blue a {
      border-top-color: #0076cf;
    }
    body#product.mobility .categoryVox.green a {
      border-top-color: #009244;
    }
    body#product.mobility .categoryVox.orange a {
      border-top-color: #df6421;
    }
    body#product.mobility .categoryVox.navy a {
      border-top-color: #245a84;
    }
    body#product.mobility .categoryVox.lime a {
      border-top-color: #a6ce39;
    }
    body#product.mobility .categoryVox.pink a {
      border-top-color: #ef59a1;
    }
      body#product.mobility .categoryVox a:hover {
        opacity: .6;
      }
      body#product.mobility .categoryVox .category {
        padding: 10px 20px 20px 20px;
      }
      body#product.mobility .categoryVox .category .title {
        font-size: 1.8rem;
        padding: 10px 30px 10px 0;
        margin-bottom: 10px;
        background: url(../img/common/ico_arrow03.svg) no-repeat right center / 20px 20px;
      }
        body#product.mobility .categoryVox .category .title .sub {
          font-size: 1.3rem;
        }
      body#product.mobility .categoryVox .category .item {
        display: flex;
        justify-content: center;
      }
        body#product.mobility .categoryVox .category .item figure {
          text-align: center;
          width: calc(50% - 5px);
          margin-right: 10px;
        }
        body#product.mobility .categoryVox .category .item figure.full {
          width: 290px;
          margin-right: 0;
        }
        body#product.mobility .categoryVox .category .item figure:nth-of-type(2n) {
          margin-right: 0;
        }
          body#product.mobility .categoryVox .category .item figure figcaption {
            font-size: 1.4rem;
            line-height: 1.3;
            text-align: center;
            margin-top: 8px;
          }
body.mobility.detail .pageTtl {
  padding-left: 30px;
  position: relative;
}
body.mobility.detail .pageTtl::before {
  display: block;
  content: "";
  width: 4px;
  height: 80%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
  body.mobility.detail .pageTtl .sub2 {
    font-size: 2.4rem;
  }
body.mobility.detail .accordionWrapper {
  border-bottom: none;
}
  body.mobility.detail .accordionWrapper .accordionTtl {
    display: none;
  }
  body.mobility.detail .accordionWrapper .accordionInner {
    display: block;
    padding-top: 0;
  }

  /*ver.2*/
  body.mobility .mobilityContents {
    max-width: 960px;
    padding: 0 50px 80px 50px;
    margin-inline: auto;
  }
  body.mobility .mobilityContents .blockTtl {
    margin-bottom: 30px;
    text-align: center;
  }
  body.mobility .mobilityContents .tabs {
    padding-bottom: 10px;
  }
  body.mobility .mobilityContents .tabContents {
    padding-top: 0;
  }
  body.mobility .mobilityContents .catNote {
    margin-top: 10px;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: right;
  }
  body.mobility .mobilityContents .categoryList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0 15px;
    padding: 17px;
    background-color: #E5E8F1;
  }
    body.mobility .mobilityContents .categoryList li button {
      width: 100%;
      height: 100%;
      border: 0;
      padding: 0;
      background-color: #fff;
      cursor: pointer;
    }
    body.mobility .mobilityContents .categoryList li.current button {
      background-color: #ACB4D0;
    }
    body.mobility .mobilityContents .categoryList li button:hover {
      opacity: 1;
    }
    body.mobility .mobilityContents .categoryList li button {
      color: #000000;
    }
    body.mobility .mobilityContents .categoryList li button .icoNote {
      display: inline;
      font-size: 1.3rem;
    }
      body.mobility .mobilityContents .categoryList li button > span {
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        padding: 10px 10px 10px 65px;
        font-weight: bold;
        text-align: left;
        font-size: 1.6rem;
      }
      body.mobility .mobilityContents .categoryList li button:hover > span {
        text-decoration: underline;
      }
        body.mobility .mobilityContents .categoryList li button > span::before {
          content: "";
          position: absolute;
          width: 46px;
          height: 36px;
          left: 12px;
          top: 50%;
          background-size: cover;
          background-repeat: no-repeat;
          transform: translateY(-50%);
        }
          body.mobility .mobilityContents .categoryList li.catBev button > span::before {
            background-image: url(../img/product/mobility/index/ico_bev.svg);
          }
          body.mobility .mobilityContents .categoryList li.catHevPhev button > span::before {
            background-image: url(../img/product/mobility/index/ico_hevphev.svg);
          }
          body.mobility .mobilityContents .categoryList li.catFcev button > span::before {
            background-image: url(../img/product/mobility/index/ico_fcev.svg);
          }
          body.mobility .mobilityContents .categoryList li.catEngine button > span::before {
            background-image: url(../img/product/mobility/index/ico_engine.svg);
          }
          body.mobility .mobilityContents .categoryList li.catPowertrain button > span::before {
            background-image: url(../img/product/mobility/index/ico_powertrain.svg);
          }
          body.mobility .mobilityContents .categoryList li.catBrakeChassis button > span::before {
            background-image: url(../img/product/mobility/index/ico_brake_chassis.svg);
          }
          body.mobility .mobilityContents .categoryList li.catBody button > span::before {
            background-image: url(../img/product/mobility/index/ico_body.svg);
          }
          body.mobility .mobilityContents .categoryList li.catCss button > span::before {
            background-image: url(../img/product/mobility/index/ico_css.svg);
          }
          body.mobility .mobilityContents .categoryList li.catAftermarket button > span::before {
            background-image: url(../img/product/mobility/index/ico_aftermarket.svg);
          }
    body.mobility .mobilityContents .productList {
      margin-top: 25px;
    }
      body.mobility .mobilityContents .productList ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
      }
      body.mobility .mobilityContents .productList li.is-hidden {
        display: none;
      }
      body.mobility .mobilityContents .productList ul li a {
        display: block;
        height: 100%;
        text-decoration: none;
      }
      body.mobility .mobilityContents .productList ul li a:hover {
        opacity: 1;
      }
      body.mobility .mobilityContents .productList ul li figure {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 0 16px;
        height: 100%;
        padding: 12px 40px 12px 16px;
        background-color: #F4F4F4;
        box-sizing: border-box;
      }
      body.mobility .mobilityContents .productList ul li figure::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 15px;
        width: 8px;
        height: 8px;
        margin:  0 0 0 10px;
        border-right: 1px solid #000;
        border-top: 1px solid #000;
        rotate: 45deg;
      }
      body.mobility .mobilityContents .productList ul li figure span {
        flex: 0 0 30%;
      }
        body.mobility .mobilityContents .productList ul li figure span img {
          border-radius: 50%;
          transition: opacity 0.2s ease-in;
        }
        body.mobility .mobilityContents .productList ul li a:hover figure span img {
          opacity: 0.6;
        }
        body.mobility .mobilityContents .productList ul li figure figcaption {
          color: initial;
        }
        body.mobility .mobilityContents .productList ul li a:hover figure figcaption {
          text-decoration: underline;
        }
        body.mobility .mobilityContents .productMovie {
          margin-top: 60px;
        }
          body.mobility .mobilityContents .productMovie .item.is-hidden {
            display: none;
          }
      body.mobility.detail2 .productContent {
        margin-top: 60px;
      }
      body.mobility.detail2 .imgTxtVox > .img a {
        text-decoration: none;
      }
      body.mobility.detail2 .imgTxtVox > .img a img {
        transition: opacity 0.2s ease-in;
      }
      body.mobility.detail2 .imgTxtVox > .img a:hover {
        opacity: 1.0;
      }
      body.mobility.detail2 .imgTxtVox > .img a:hover img {
        opacity: 0.6;
      }
      body.mobility.detail2 .imgTxtVox > .img a figcaption {
        margin-top: 10px;
        text-decoration: none;
        color: #000;
      }
      body.mobility.detail2 .imgTxtVox > .img a:hover figcaption {
        text-decoration: underline;
      }
      body.mobility.detail2 .accordionWrapper {
        border-bottom: none;
      }
        body.mobility.detail2 .accordionWrapper .accordionTtl {
          display: none;
        }
        body.mobility.detail2 .accordionWrapper .accordionInner {
          display: block;
          padding-top: 0;
        }
    body#product.detail2 .imgTxtVox .txt figure {
      width: 320px;
      margin: 1.5em 0;
    }
/*
 * powertrain
 */
body#product.powertrain .pageTtl::before {
  background: #a41528;
}
body#product.powertrain .listIcon {
  margin-top: 10px;
  margin-bottom: 10px;
}
body#product.powertrain .listIcon li {
  display: inline-block;
  padding: 3px 15px 2px;
  color: #fff;
  font-weight: bold;
  font-size: 1.3rem;
}
body#product.powertrain .listIcon li:not(:first-child) {
  margin-left: 5px;
}
body#product.powertrain .listIcon .is-bev {
  background-color: #001A72;
}
body#product.powertrain .listIcon .is-hev-phev {
  background-color: #808CB8;
}

/*
 * brake_chassis
 */
body#product.brake_chassis .pageTtl::before {
  background: #0076cf;
}
/*
 * body
 */
body#product.body .pageTtl::before {
  background: #009244;
}
body#product.body .imgTxtVox .txt figure {
  width: 320px;
  margin: 1.5em 0;
}
/*
 * cs-s
 */
body#product.cs-s .pageTtl::before {
  background: #df6421;
}
body#product.cs-s .txtMail {
  margin-top: 20px;
}
body#product.cs-s .txtMail span {
  display: inline-block;
  height: 17px;
}
body#product.cs-s .txtMail span img {
  max-width: initial;
  height: 100%;
}
body#product.cs-s .relatedLinksFull {
  flex: 0 0 100%;
}

/*
 * energy
 */
body#product.energy .pageHeader {
  margin-bottom: 0;
}
body#product.energy .productMv::before {
  background-image: url(../img/product/energy/main_img.jpg);
}
body#product.energy .accordionWrapper {
  border-bottom: none;
}
  body#product.energy .accordionWrapper .accordionTtl {
    display: none;
  }
  body#product.energy .accordionWrapper .accordionInner {
    display: block;
    padding-top: 0;
  }
/*
 * new-other
 */
body#product.new-other .pageHeader {
  margin-bottom: 0;
}
body#product.new-other .productMv::before {
  background-image: url(../img/product/mobility/new-other/main_img.jpg?220331);
}
body#product.new-other.ver02 .productMv::before {
  background-image: url(../img/product/mobility/new-other/main_img-2025.jpg);
}
body#product.new-other .accordionWrapper {
  border-bottom: none;
}
  body#product.new-other .accordionWrapper .accordionTtl {
    display: none;
  }
  body#product.new-other .accordionWrapper .accordionInner {
    display: block;
    padding-top: 0;
  }
/*
 * discontinued
 */
body#product.discontinued .baseBlock {
  margin-bottom: 120px;
}
body#product.discontinued p {
  margin-bottom: 1.5rem;
}
body#product.discontinued .box:not(:first-of-type) .blockTtl {
  margin-top: 100px;
}
body#product.discontinued .headStyle01 {
  margin-top: 60px;
}
/* ---------------------------------------------------------------- *
    タブレット（960px未満）
----------------------------------------------------------------- */
@media only screen and (max-width: 960px) {
    /*
   * mobility
   */
    /*ver.2*/
    body.mobility .mobilityContents .categoryList {
      gap: 8px;
    }
    body.mobility .mobilityContents .categoryList li button > span {
      padding: 9px 5px 9px 45px;
      font-size: 1.4rem;
    }
    body.mobility .mobilityContents .categoryList li button > span::before {
      width: 29px;
      height: 22px;
      left: 8px;
    }
} /* @media 960 */
/* ---------------------------------------------------------------- *
    スマートフォン（768px未満）
----------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  .productMv {
    margin-bottom: 60px;
  }
    .productMv::before {
      margin-bottom: 20px;
    }
    .productMv .cInner {
      padding: 0 20px;
    }
  .productContent {
    padding: 0 20px;
  }
  .bgVox {
    padding: 50px 0;
    margin-top: 50px;
  }
  /*
  .movieList {
    display: block;
    font-size: 1.3rem;
  }
    .movieList figure {
      width: 100%;
      margin: 0 auto;
    }
    .movieList.small figure {
      width: 100%;
    }
    .movieList figure:not(:last-of-type) {
      margin-bottom: 20px;
    }
    .movieList figcaption {
      font-size: 1.3rem;
    }
      */
  .introVox {
    padding: 30px 20px 0 20px;
  }
  .tabVoxWrapper .tabs {
    padding: 0 20px;
  }
    .tabVoxWrapper .tabs a {
      font-size: 1.5rem;
    }

  body#product.top .txt-discontinued {
    font-size: 1.6rem;
    padding: 30px 20px;
  }
  /*
   * mobility
   */
  body#product.mobility .introductionVox .cInner {
    display: block;
  }
    body#product.mobility .categoryVox {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
    }
      body#product.mobility .categoryVox .category {
        padding: 5px 10px 15px 10px;
      }
        body#product.mobility .categoryVox .category .title {
          line-height: 1.3;
        }
        body#product.mobility .categoryVox .category .item {}
          body#product.mobility .categoryVox .category .item figure.fullImg {
            width: 100%;
          }
            body#product.mobility .categoryVox .category .item figure.fullImg img {
              width: calc(50% - 5px);
            }
            body#product.mobility .categoryVox .category .item figure figcaption {
              font-size: 1.3rem;
              letter-spacing: normal;
              margin-top: 5px;
            }
  body.mobility.detail .pageHeader {
    padding-left: 20px;
  }
  body.mobility.detail .pageTtl {
    line-height: 1.3;
    padding-left: 20px;
  }
  body.mobility.detail .pageTtl::before {
    height: 90%;
  }
    body.mobility.detail .pageTtl .sub2 {
      font-size: 2.0rem;
    }
  body.mobility.detail .tabContents .blockTtl,
  body.mobility.detail .tabContents .imgTxtVox .txt,
  body.mobility.detail .tabContents .imgTxtVox .movieList {
    padding: 0 20px;
  }
  body.mobility.detail .tabContents .productContent > .headStyle01 {
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
  }
  body.mobility.detail .tabContents .bgVox {
    margin-top: 0;
  }
  body.mobility.detail .accordionWrapper {}
    body.mobility.detail .accordionWrapper .accordionTtl {
      display: block;
      border-bottom: 1px solid #001a72;
    }
    body.mobility.detail .accordionWrapper .accordionInner {
      display: none;
      padding: 20px 20px 30px 20px;
      background: #fff;
      border-bottom: 1px solid #001a72;
    }

  /*ver.2*/
  body.mobility .mobilityContents {
    max-width: initial;
    padding: 0 0 60px 0;
  }
  body.mobility .mobilityContents .catNote {
    padding: 0 20px;
    text-align: left;
  }
    body.mobility .mobilityContents .categoryList {
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin: 0 20px;
      padding: 10px;
    }
      body.mobility .mobilityContents .categoryList li button > span {
        min-height: 60px;
        padding: 9px 5px 9px 45px;
        font-size: 1.4rem;
        box-sizing: border-box;
      }
        body.mobility .mobilityContents .categoryList li button > span::before {
          width: 29px;
          height: 22px;
          left: 8px;
        }
    body.mobility .mobilityContents .productList ul {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 8px 5px;
    }
      body.mobility .mobilityContents .productList ul li figure {
        padding-right: 30px;
      }
        body.mobility .mobilityContents .productList ul li figure span {
          flex: 0 0 22%;
        }
        body.mobility .mobilityContents .productMovie {
          padding: 0 20px;
        }
    body.mobility.detail2 .productContent {
      margin-top: 30px;
    }
    body.mobility.detail2 .accordionWrapper .accordionTtl {
      display: block;
      border-bottom: 1px solid #001a72;
    }
    body.mobility.detail2 .accordionWrapper .accordionInner {
      display: none;
      padding: 20px 20px 30px 20px;
      background: #fff;
      border-bottom: 1px solid #001a72;
    }
    body#product.mobility.cs-s.detail2 .relatedLinksFull {
      flex: 0 0 100%;
      margin-inline: 0;
    }
    body#product.detail2 .imgTxtVox .txt figure {
      width: auto;
    }
  /*
   * body
   */
  body#product.body .imgTxtVox .txt figure {
    width: auto;
  }
  /*
  * cs-s
  */
  body#product.cs-s .relatedLinksFull {
    flex: 0 0 calc(100% - 40px);
    margin: 0 20px;
  }
  body#product.cs-s .txtMail span {
    height: 14px;
  }

  /*
   * energy
   */
  body#product.energy .accordionWrapper {}
    body#product.energy .accordionWrapper .accordionTtl {
      display: block;
      border-bottom: 1px solid #001a72;
    }
    body#product.energy .accordionWrapper .accordionInner {
      display: none;
      padding: 20px 20px 30px 20px;
      background: #fff;
    }
  /*
   * new-other
   */
  body#product.new-other .accordionWrapper {}
    body#product.new-other .accordionWrapper .accordionTtl {
      display: block;
      border-bottom: 1px solid #001a72;
    }
    body#product.new-other .accordionWrapper .accordionInner {
      display: none;
      padding: 20px 20px 30px 20px;
      background: #fff;
    }
  /*
   * discontinued
   */
  body#product.discontinued .baseBlock {
    margin-bottom: 60px;
  }

}