@charset "UTF-8";

html {
  scroll-behavior: smooth;
}

#totalcare .pc_oy {
  display: inline-block;
}

#totalcare .sp_oy,
#totalcare .mb_oy {
  display: none;
}

@media screen and (max-width: 736px) {
  #totalcare .pc_oy {
    display: none;
  }

  #totalcare .sp_oy {
    display: inline-block;
  }
}

@media screen and (max-width: 430px) {
  #totalcare .mb_oy {
    display: inline-block;
  }
}

/* article__header */
.htc-media.htc-article__header-media {
  display: grid;
  grid-template-columns: 1fr 430px;
  grid-template-rows: auto 1fr;
  gap: 0 1rem;
  margin-top: 0;
}

.article__header-title {
  grid-area: 1 / 1 / 2 / 2;
}

.htc-media__body {
  grid-area: 2 / 1 / 3 / 2;
}

.htc-media__image {
  grid-area: 1 / 2 / 3 / 3;
}

@media screen and (max-width: 736px) {
  .htc-media.htc-article__header-media {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    gap: 0 1rem;
    margin-top: 2.5rem;
  }

  .article__header-title {
    grid-area: 1 / 1 / 2 / 2;
  }

  .htc-media__body {
    grid-area: 3 / 1 / 4 / 2;
  }

  .htc-media__image {
    grid-area: 2 / 1 / 3 / 2;
  }

  .htc-media.htc-article__header-media:not(:has(.ev)) {
    margin-top: -8px;
  }
}

.htc-article__header-title.ev {
  position: relative;
}

.htc-article__header-title.ev::before {
  content: "EV\9650\5B9A\30B5\30FC\30D3\30B9";
  display: inline-block;
  position: absolute;
  top: -3.4rem;
  left: 0;
  font-size: 1.1rem;
  line-height: 1;
  background: #37c75a;
  color: #fff;
  padding: 0.35rem 1rem 0.4rem 1.15rem;
}

@media screen and (max-width: 736px) {
  .htc-article__header-title.ev::before {
    top: -2.7rem;
    left: 50%;
    font-size: 1rem;
    transform: translateX(-50%);
    word-break: keep-all;
  }
}

@media screen and (min-width: 737px), print {
  .htc-article__header-title {
    height: auto;
    /* padding-bottom: 1.15em; */
    /* margin-top: 22.5px; */
    padding-bottom: 2.2rem;
    margin-top: 4.5rem;
  }

  .htc-article__header .htc-media__image {
    width: 430px;
    padding-left: 0;
  }

  .htc-article__header .htc-media__body {
    padding-top: 0;
  }
}

/* article__main */

.htc-section-content__body .htc-media {
  flex-direction: column;
}

.htc-section-content__body .htc-media__image {
  padding-left: 0;
  display: grid;
  grid-template-columns: 30%;
  gap: 5%;
  justify-content: center;
  margin-top: 1.8rem;
}

.htc-section-content__body .htc-media__image.img2 {
  grid-template-columns: repeat(2, 30%);
  gap: 10%;
}

.htc-section-content__body .htc-media__image.img3 {
  grid-template-columns: repeat(3, 30%);
}

.htc-section-content__body .htc-media__image.img3half {
  grid-template-columns: 30% 60%;
  gap: 10%;
}

.htc-section-content__body .area_3half {
  background: #efefef;
  padding: 20px 35px;
}

.area_3half .img2half {
  grid-template-columns: repeat(2, 46%);
  gap: 7%;
  margin-top: 0;
}

.area_3half .htc-media__image-caption {
  margin: 0 0 1em 1.4em;
  margin-inline: auto;
  text-indent: -1em;
  padding-left: 1em;
}

@media screen and (max-width: 736px) {
  .htc-section-content__body .htc-media__image {
    justify-content: center;
    grid-template-columns: inherit;
    margin-top: 1.8rem;
    width: clamp(200px, 75%, 262px);
    gap: 1rem;
  }

  .htc-section-content__body .htc-media__image.img2 {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
    gap: 1rem;
  }

  .htc-section-content__body .htc-media__image.img3 {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
  }

  .htc-section-content__body .htc-media__image:has(.area_3half) {
    width: 100%;
  }

  .htc-section-content__body .htc-media__image.img3half {
    display: block;
  }

  .htc-section-content__body .htc-media__image.img3half > .screen {
    width: clamp(200px, 75%, 262px);
    margin-inline: auto;
  }

  .htc-section-content__body .area_3half {
    padding: 2em 5%;
    border-radius: 0;
    margin: 2rem -5.5vw -8vw -5.5vw;
  }

  .area_3half .img2half {
    margin: 0 auto;
    width: min(450px, 96%);
    grid-template-columns: repeat(2, 47%);
    gap: 6%;
  }

  .area_3half .htc-media__image-caption {
    text-align: left;
  }
}

.htc-media__image p.cap {
  width: 100%;
  text-align: center;
  border: 1px solid #ccc;
  background: #f5f5f5;
  padding: 0.3rem;
  margin-bottom: 0.5rem;
}

@media screen and (max-width: 736px) {
  .htc-media__image p.cap {
    margin-bottom: 0.7rem;
    font-size: 15px;
  }
}

.htc-media .screen {
  position: relative;
}

.htc-media .screen img {
  border: 1px solid #ccc;
  aspect-ratio: 17 / 36.6;
  width: 100%;
}

.htc-media .screen.no_aspect img {
  aspect-ratio: initial;
}

.htc-media .screen[class*="l"] span {
  position: absolute;
  border: clamp(5px, 1.5vw, 7px) solid #e60012;
  z-index: 2;
}

.htc-media .screen.l01 span {
  top: 43.76%;
  left: 50%;
  width: 104%;
  height: 13.5%;
  transform: translateX(-50%);
}

.htc-media .screen.l02 span {
  top: 6.1%;
  left: 80%;
  width: 22%;
  height: 9%;
  outline: #fff 3px solid;
  outline-offset: 0;
}

.htc-media .screen.l02 span::before {
  content: "";
  display: inline-block;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border: #fff 3px solid;
}

.htc-media .screen.l03 span,
.htc-media .screen.l04 span,
.htc-media .screen.l05 span,
.htc-media .screen.l06 span,
.htc-media .screen.l07 span,
.htc-media .screen.l08 span {
  top: 57.5%;
  left: 50%;
  width: 104%;
  height: 10%;
  transform: translateX(-50%);
}

.htc-media .screen.l04 span {
  top: 65.2%;
}

.htc-media .screen.l05 span {
  top: 45.8%;
}

.htc-media .screen.l06 span {
  top: 38.3%;
}

.htc-media .screen.l07 span {
  top: 72.7%;
}

.htc-media .screen.l08 span {
  top: 84.9%;
}

.htc-section-content__body-text,
.htc-media__image-caption {
  width: fit-content;
  margin: 0 auto;
}

.htc-media__image-caption {
  font-size: 0.92em;
  opacity: 0.7;
  margin-top: 0.8em;
  text-indent: -1.075em;
  padding-left: 1.075em;
}

.htc-media__image-caption.in_box {
  margin: 2em -2em 0 -1.4em;
}

.htc-media__image-caption + .htc-media__image-caption {
  margin-top: 0.3em;
}

.htc-media__image-caption.plus_caut {
  margin-top: 0.15em;
}
@media screen and (max-width: 736px) {
  .htc-media__image-caption.plus_caut {
    margin-left: 0;
  }
}

.htc-section-content--flow + .htc-media__image-caption {
  margin: 1.3em 0 0;
}

@media screen and (max-width: 736px) {
  .htc-section-content__body-text {
    margin: 0.2rem auto -0.2rem;
    font-size: 0.94rem;
  }

  .htc-media__image-caption {
    text-indent: -1.1em;
    padding-left: 1.1em;
  }

  .htc-section-content--flow + .htc-media__image-caption {
    margin: 1.2em -5vw 0;
  }

  .htc-media__image-caption.in_box {
    margin: 1.8em 0 -0.4em;
  }
  .htc-media__image-caption.in_box + .htc-media__image-caption.in_box {
    margin: 0.8em 0 -0.4em;
  }
}

.htc-section-content--flow + .htc-section-content--flow::before {
  left: 124px;
}

@media screen and (max-width: 736px) {
  .htc-section-content--flow + .htc-section-content--flow::before {
    left: 0;
    top: -21px;
    border: 16px solid transparent;
    border-top: 20px solid #e60012;
  }

  .htc-section-content--flow + .htc-section-content--flow {
    margin-top: 20px;
  }
}

.htc-aside__row.menu2 {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 1rem;
}

.htc-aside__row.menu2 .htc-aside__row-sp {
  display: flex;
  flex-wrap: wrap;
  margin-left: 0 !important;
}

.menu2 .htc-icon--link {
  top: -2px;
  margin-left: 0.3em !important;
}

@media screen and (max-width: 736px) {
  .htc-aside__row.menu2 {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 0.8rem;
  }

  .htc-aside__row.menu2 .htc-aside__row-sp {
    display: block;
    margin-top: 0;
  }

  .menu2 .htc-icon--link {
    top: -1px;
  }
}

/* maximum_current_setting */
.htc-media__body .pts {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 2px 2px;
}

.htc-media__body .pts > div {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 4;
  justify-items: center;
}

.htc-media__body .pts > div.pts_tt {
  font-family: "HondaGlobalFontJP-Bold", sans-serif;
}

.htc-media__body .pts > div > div {
  justify-items: center;
  background: #fafafa;
  display: grid;
  grid-template-columns: subgrid;
  padding: 0.5em 1em;
}

.htc-media__body .pts > div:nth-child(even) > div {
  background: #f3f3f3;
}

.htc-media__body .pts > div.pts_tt > div {
  background: #9a9a9a;
  color: #fff;
}

@media screen and (max-width: 736px) {
  .htc-media__body .pts {
    width: 100%;
    font-size: clamp(12.5px, 3.8vw, 15px);
  }

  .htc-media__body .pts > div > div {
    padding: 0.5em;
  }
}

.note {
  display: block;
  color: #666;
  margin: 1em 0 0 1em;
  text-indent: -1em;
  font-size: 0.84em;
  letter-spacing: 0.01em;
}

.note + .note {
  margin-top: 0.2em;
}

/* navitime 2024.11 */
.navitime {
  outline: 5px solid #ddd;
  padding: 46px 55px;
  box-sizing: border-box;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
  overflow-y: hidden;
  width: calc(100% - 10px);
  margin: auto;

  & .navitime_wrap {
    background: #efefef;
    display: grid;
  }

  & .nt_copy {
    margin-bottom: 1em;
  }

  & .navitime_list {
    margin: -0.5em 0 1.1em;
  }

  & .navitime_list li {
    margin-left: 1em;
    text-indent: -1em;
  }

  & .navitime_list li::before {
    content: "\30FB";
    display: inline-block;
    width: 1em;
    position: relative;
    left: 1em;
  }

  & .ntw_tt {
    font-size: 1.13em;
    font-family: "HondaGlobalFontJP-Bold", sans-serif;
    margin: -0.23em 0 0.4em;
  }

  & .ntw_logo {
    margin-right: 1em;
  }
}

@media print, screen and (min-width: 736.1px) {
  .navitime {
    & .navitime_wrap {
      padding: 38px 50px 35px;
      grid-template-columns: 1.2fr 4.2fr 1.6fr;
      column-gap: 1.2em;
      width: 100%;
    }

    & .nt_copy {
      text-align: left;
    }

    & a {
      transition: all 0.3s;
    }

    & a:hover {
      opacity: 0.6;
    }
    & .ntw_app {
      display: grid;
      grid-template-rows: repeat(2, 1fr);
      gap: 0.2em;
    }
  }
}

@media screen and (max-width: 736px) {
  .navitime {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    padding: 1.6em 5vw 2.1em;
    border-width: 10px;
    border-left: none;
    border-right: none;

    & .navitime_wrap {
      margin: 0 calc(50% - 50vw);
      width: 100vw;
      padding: 2em 5vw;
      grid-template-rows: repeat(3, auto);
      row-gap: 1.3em;
    }

    & .nt_copy {
      padding: 0;
      font-size: clamp(13px, 4.25vw, 17px);
    }
    & .ntw_logo {
      margin: 0 auto;
      width: min(110px, 33%);
    }
    & .ntw_tt {
      text-align: center;
      margin: 0 auto 0.4em;
    }
    & .ntw_app {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.5em;
      max-width: 360px;
      margin-inline: auto;
    }
  }
}

/* accordion */
.htl_acd_wrap {
  & .htl_acd_head {
    position: relative;
    line-height: 1.5;
    background: #ddd;
    text-align: center;
    cursor: pointer;
    position: relative;
    & a {
      position: absolute;
      inset: 0;
      z-index: 2;
    }
  }

  & .htl_acd_head_sub {
    line-height: 1.5;
    background: #ddd;
    text-align: center;
  }

  & .htl_acd_head::before,
  & .htl_acd_head::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 2px;
    height: 2px;
    margin: auto;
    background: #111;
  }
  & .htl_acd_head::after {
    transform: rotate(90deg);
    transition: transform 0.2s;
  }
  & .htl_acd_head.active {
    background: #f5f5f5;
    outline: #ccc 1px solid;
  }
  & .htl_acd_head.active::after {
    transform: rotate(0deg);
  }

  & .htl_acd_cont {
    display: none;

    & .htl_wrap {
      display: grid;

      & .htl {
        background: #efefef;
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;

        & .htl_no {
          background: #c00;
          color: #fff;
          line-height: 1;
          display: grid;
          place-content: center;
          padding-left: 0.1em;
        }
        & .htl_no + p {
          line-height: 1.5;
          & .caut {
            font-size: 0.88721em;
            display: block;
            opacity: 0.7;
            margin-left: 1.15em;
            text-indent: -1.15em;
          }
        }
        & .screen {
          position: relative;
          margin: 0.2em auto 1.7em;
          border: 1px solid #aaa;

          & span {
            position: absolute;
            z-index: 2;
            border: clamp(3px, 0.41vw, 5px) solid #e60012;
            left: 50%;
            transform: translateX(-50%);
          }
          &.htl_01 span {
            top: 91.15%;
            width: 20%;
            height: 10%;
            left: 37.6%;
          }
          &.htl_02 span {
            top: 64.76%;
            width: 106%;
            height: 22%;
          }
          &.htl_04 span {
            top: 20%;
            width: 106%;
            height: 20%;
          }
          &.htl_05 span {
            top: 88.7%;
            width: 67%;
            height: 13%;
            left: 68%;
          }
          &.htl_06 span {
            top: 43%;
            width: 42%;
            height: 11%;
            left: 81%;
          }
        }
      }
    }
    & .close_btn {
      font-size: 0.92em;
      letter-spacing: 0.01em;
      background: #ddd;
      border: 1px solid #aaa;
      line-height: 1.4;
      margin: 2em auto 0;
      width: fit-content;
      padding: 0.5em 1em 0.6em;
      cursor: pointer;
      display: grid;
      grid-template-columns: 2fr auto;
      column-gap: 8px;
      align-items: center;
      text-decoration: none;
      color: #111;
    }

    & .close_btn::after {
      content: "";
    }

    & .close_btn::before {
      content: "×";
      font-size: 16px;
    }
    & .close_btn.navl {
      margin-bottom: 52px;
    }
  }
}

@media print, screen and (min-width: 736.1px) {
  .htl_acd_wrap {
    margin-top: 46px;

    & .closed_point {
      margin-top: -120px;
      padding-top: 120px;
    }

    & .htl_acd_head {
      font-size: 24px;
      padding: 0.7em 1em;
      transition: all 0.3s ease;
    }

    & .htl_acd_head_sub {
      font-size: 24px;
      padding: 0.7em 1em;
      margin: 75px auto -50px;
    }

    & .htl_acd_head::before,
    & .htl_acd_head::after {
      right: 50px;
      width: 24px;
    }

    & .htl_acd_head:hover {
      filter: invert();
    }

    & .htl_acd_cont {
      &:has(.navl) {
        margin-bottom: 6em;
      }

      & .htl_wrap {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 1em;
        margin-top: 1em;

        & .htl {
          position: relative;

          & .htl_no {
            width: 32px;
            height: 32px;
          }
          & .htl_no + p {
            font-size: 0.92em;
            padding: 0 0.6em 0 1em;
            text-align: left;

            & .caut {
              font-size: 0.88721em;
              margin-top: 0.3em;
            }
          }
          & .screen {
            width: 70%;
          }
        }
        .htl:nth-child(-n + 3) {
          margin-right: 2em;
        }
        .htl:nth-child(n + 4) {
          margin-left: 2em;
        }
        .htl::after {
          content: "";
          display: inline-block;
          position: absolute;
          top: 50%;
          width: 0;
          height: 0;
          border: 16px solid transparent;
          border-left: 24px solid #e60012;
          border-right: none;
          transform: translateY(-50%);
        }
        .htl:nth-child(-n + 3)::after {
          right: -30px;
        }
        .htl:nth-child(n + 4)::after {
          left: -30px;
        }
      }

      & .close_btn {
        transition: 0.3s all;
      }
      & .close_btn.vavl {
        margin-bottom: 52px;
      }
    }
  }
  .navitime + .htl_acd_wrap {
    margin-top: 60px;
  }
}

@media (any-hover: hover) {
  .htl_acd_cont .close_btn:hover {
    filter: invert();
  }
}

@media screen and (max-width: 736px) {
  .htl_acd_wrap {
    margin-top: 2em;

    & .closed_point {
      margin-top: -80px;
      padding-top: 80px;
    }

    & .htl_acd_head {
      font-size: clamp(15px, 4.4vw, 19px);
      padding: 0.9em 2.4em 1em 0.7em;
      font-feature-settings: "palt";
      -webkit-font-feature-settings: "palt";
      -moz-font-feature-settings: "palt";
    }

    & .htl_acd_head_sub {
      font-size: clamp(15px, 4.4vw, 19px);
      padding: 0.9em 1em 1em;
      font-feature-settings: "palt";
      -webkit-font-feature-settings: "palt";
      -moz-font-feature-settings: "palt";
      margin: 35px auto -0.4em;
    }

    & .htl_acd_head::before,
    & .htl_acd_head::after {
      right: 16px;
      width: 17px;
    }

    & .htl_acd_cont {
      & .htl_wrap {
        gap: 20px;
        margin-top: 20px;

        & .htl {
          row-gap: 10px;
          position: relative;
          margin-bottom: 1.5em;

          &::after {
            content: "";
            display: inline-block;
            position: absolute;
            left: 50%;
            bottom: -32px;
            width: 0;
            height: 0;
            border: 14px solid transparent;
            border-top: 22px solid #e60012;
            border-bottom: none;
            transform: translateX(-50%);
          }
          &:last-child {
            margin-bottom: 0;
          }

          &:last-child::after {
            content: none;
          }

          & .htl_no {
            width: 30px;
            height: 30px;
          }
          & .htl_no + p {
            padding: 0 5vw 0;
          }
          & .screen {
            width: min(220px, 60%);
          }
        }
      }
    }
  }
  .navitime + .htl_acd_wrap {
    margin-top: 50px;
  }
}
.htc-media {
  & .screen2 {
    position: relative;
    margin: 0 auto;

    & img {
      border: 1px solid #ccc;
      width: 100%;
      height: auto;
    }

    & span {
      position: absolute;
      z-index: 2;
      border: clamp(3px, 0.41vw, 5px) solid #e60012;
      left: 50%;
      transform: translateX(-50%);
    }
    &.htl_11 span {
      top: 53.05%;
      width: 98%;
      height: 10%;
    }
    &.htl_12 span {
      top: 82.1%;
      width: 42%;
      height: 11.5%;
      left: 21.2%;
    }
    &.htl_13 span {
      top: 88.5%;
      width: 106%;
      height: 12%;
    }
    &.htl_14 span {
      top: 64.7%;
      width: 36%;
      height: 10.4%;
      left: 81.4%;
    }
    &.htl_15 span {
      top: 50%;
      width: 80%;
      height: 30%;
      left: 50%;
    }
    &.htl_21 span {
      top: 63%;
      width: 26%;
      height: 12%;
      left: 18.5%;
    }
    &.htl_22 span {
      bottom: 0.2%;
      width: 39%;
      height: 11.3%;
      left: 79%;
    }
    &.htl_23 span {
      top: 12%;
      width: 106%;
      height: 56.5%;
      left: 50%;
    }
    &.htl_31 span {
      top: 2.5%;
      width: 23%;
      height: 11%;
      left: 9%;
    }
    &.htl_32 span {
      top: 28.05%;
      width: 103%;
      height: 28%;
    }
    &.htl_33 span {
      top: 12.5%;
      width: 74%;
      height: 9.5%;
      left: 50%;
    }
    &.htl_33.cap span {
      top: calc(2.95% + 46px);
    }
    &.htl_41 span {
      top: 91.15%;
      width: 19%;
      height: 10%;
      left: 62.6%;
    }
    &.htl_42 span.h42a {
      top: 46.5%;
      width: 106%;
      height: 33%;
      left: 50%;
    }
    &.htl_42 span.h42b {
      top: 52%;
      width: 24%;
      height: 9%;
      left: 88.5%;
    }
    &.htl_43 span {
      top: 15.5%;
      width: 20%;
      height: 10%;
      left: 74.5%;
      outline: #fff 3px solid;
      outline-offset: 0;
      &::before {
        content: "";
        display: inline-block;
        width: calc(100% - 6px);
        height: calc(100% - 6px);
        border: #fff 3px solid;
      }
    }
    &.htl_44 span {
      top: 89.3%;
      width: 38%;
      height: 9%;
      left: 72%;
    }
    &.htl_45 span {
      top: 68%;
      width: 18%;
      height: 8.5%;
      left: 33.6%;
    }
  }
}
@media print, screen and (min-width: 736.1px) {
}

@media screen and (max-width: 736px) {
}

.htc-section-content--flow.app_dl {
  border: none;
  text-align: center;
  position: relative;
  left: 62px;
  padding: 0.6em 1.5em;
  width: fit-content;
  margin: 35px auto 31px;
  background: #f5f5f5;
  outline: 4px solid #ddd;
}

.htc-section-content--flow.app_dl::before {
  display: inline-block;
  position: absolute;
  top: -30px;
  right: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: auto;
  border: 16.5px solid transparent;
  border-top: 28px solid #e60012;
  content: "";
}

@media print, screen and (min-width: 736.1px) {
  .css_cont .mt_css {
    margin-top: 60px;
  }

  .css_cont .htl_acd_cont > .htc-section-content:first-child {
    margin-top: 30px;
  }
}

@media screen and (max-width: 736px) {
  .css_cont .mt_css {
    margin-top: 50px;
  }

  .css_cont .htc-article__body {
    padding: 0;
  }

  .htc-section-content--flow.app_dl {
    left: 0;
    padding: 0.6em 1em;
    margin: 27px auto 24px;
  }

  .htc-section-content--flow.app_dl::before {
    left: 0;
    top: -22px;
    border: 16px solid transparent;
    border-top: 20px solid #e60012;
  }

  .css_cont .htc-section-content--flow {
    margin-right: 0;
    margin-left: 0;
  }
  .css_cont .htc-section-content--flow + .htc-media__image-caption {
    margin: 1.2em 0 0;
  }
}

.mt_plus__01 {
  margin-top: 2.5em;
  @media (736px >= width) {
    margin-top: 1.5em;
  }
}