/* CSS Document */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&family=Noto+Serif+JP:wght@200..900&display=swap");
.hm-jp-font-regular {
  font-family: "HondaGlobalFontJP-Regular", sans-serif; }

.hm-jp-font-light {
  font-family: "HondaGlobalFontJP-Light", sans-serif; }

.hm-jp-font-bold {
  font-family: "HondaGlobalFontJP-Bold", sans-serif; }

.ffm {
  font-family: "Noto Serif JP", serif; }

.RB {
  font-family: "HondaGlobalFontJP-Regular", sans-serif;
  background: #09112F url("../img/common/bg-body.png"); }
  .RB * {
    box-sizing: border-box; }
  .RB em,
  .RB i {
    font-style: normal; }
  .RB strong,
  .RB b {
    font-family: "HondaGlobalFontJP-Bold", sans-serif; }
  .RB img,
  .RB video,
  .RB iframe {
    max-width: 100%; }
  .RB .container {
    width: 1080px;
    max-width: 92%;
    margin-left: auto;
    margin-right: auto; }
  .RB section {
    margin-top: 0; }
  .RB .flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
  .RB .col-3 {
    flex: 0 0 28%; }
  .RB .col-4 {
    flex: 0 0 38%; }
  .RB .col-5 {
    flex: 0 0 48%; }
  .RB .col-6 {
    flex: 0 0 58%; }
  .RB .col-7 {
    flex: 0 0 68%; }
  .RB .notes {
    font-size: 12px;
    text-indent: -1em;
    padding-left: 1em; }
  .RB .ti05 {
    text-indent: -0.5em; }
  .RB .text-center {
    text-align: center; }
  .RB .text-right {
    text-align: right; }
  .RB .fadeIn {
    visibility: hidden;
    opacity: 0;
    transition-duration: 1.0s; }
    .RB .fadeIn.inView {
      visibility: visible;
      opacity: 1;
      transform: translate(0, 0); }

.RB-btn {
  display: inline-block;
  padding: 8px 3em 8px 2em;
  border: 1px solid #fff;
  position: relative; }
  .RB-btn::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1px solid #fff;
    border-left: 0;
    border-top: 0;
    right: 1em;
    top: calc(50% - 4px);
    rotate: -45deg; }

.RB-h2 {
  padding-bottom: 2rem; }
  .RB-h2 b {
    position: relative;
    z-index: 2;
    font-family: "Noto Serif JP", serif;
    font-size: 1.6em;
    font-weight: 600; }
  .RB-h2 b::before {
    content: "";
    position: absolute;
    left: -2.50rem;
    top: -2.00rem;
    background: url("../img/common/efx1.png") no-repeat 0 0/contain;
    width: 4rem;
    height: 4rem;
    z-index: 0; }

.RB-h4 em {
  font-family: "Noto Serif JP", serif;
  font-size: 1.3em;
  font-weight: 600;
  font-style: normal; }

.RB-kv {
  background: url("../img/top/kv.jpg") no-repeat center center/cover;
  padding: 12rem 6rem 6rem 0; }
  .RB-kv h1 {
    text-align: center; }
    .RB-kv h1 img {
      height: 21vw;
      width: auto; }

.RB-about {
  background: #0D0D0D url("../img/top/im-about.jpg") no-repeat 0 0;
  background-size: 50vw;
  position: relative; }
  .RB-about::after {
    content: "";
    width: 12em;
    height: 12em;
    position: absolute;
    z-index: 0;
    right: -5em;
    bottom: 8%;
    background: url("../img/common/efx2.png") no-repeat;
    background-size: contain; }
  .RB-about .container {
    width: 50vw;
    margin-left: auto;
    margin-right: 0;
    padding: 8rem 4rem;
    position: relative;
    z-index: 3; }
  .RB-about p {
    font-size: 0.9em;
    line-height: 1.8;
    margin-top: 1rem; }
  .RB-about .flex {
    padding-top: 2rem;
    justify-content: flex-start; }
    .RB-about .flex .col-5 {
      flex: 0 0 auto;
      margin-right: 1em; }

.RB-title {
  background: #000 url("../img/common/bg-title.png") no-repeat right top/64vw; }
  .RB-title .container {
    display: flex;
    width: auto;
    max-width: 100%;
    align-items: center; }
  .RB-title .title-img {
    flex: 0 0 50%;
    text-align: right;
    line-height: 0; }
    .RB-title .title-img img {
      aspect-ratio: 16 / 9;
      object-fit: cover; }
  .RB-title .title-txt {
    flex: 0 0 50%;
    padding: 6rem 4rem 4rem; }
    .RB-title .title-txt h2 {
      font-size: 0.9em; }
    .RB-title .title-txt h1 {
      line-height: 1.5;
      font-size: 1.8em;
      padding-top: 2rem;
      max-width: 800px;
      font-weight: 700; }
      .RB-title .title-txt h1 span {
        font-size: 0.8em;
        font-weight: 600; }
      .RB-title .title-txt h1 small {
        font-size: 0.7em;
        font-weight: 500; }

.RB-body,
.RB-body:last-of-type {
  padding: 8rem 0 4rem;
  border-bottom: 1px dashed #999; }
  .RB-body .container,
  .RB-body:last-of-type .container {
    width: 980px; }
  .RB-body p,
  .RB-body:last-of-type p {
    line-height: 1.8;
    padding-bottom: 1em; }
  .RB-body h4,
  .RB-body:last-of-type h4 {
    font-size: 1.1em;
    font-weight: 600;
    padding: 1rem 0 0.5em; }

.RB-toggles {
  padding: 3rem 0 1rem; }
  .RB-toggles h3 {
    font-weight: 700;
    font-size: 1.4em;
    display: flex;
    line-height: 1.4;
    align-items: flex-start; }
    .RB-toggles h3 strong {
      display: inline-block;
      padding-bottom: 8px;
      border-bottom: 4px solid #e21;
      cursor: pointer; }
    .RB-toggles h3::before {
      content: "";
      flex: 0 0 1em;
      width: 1em;
      height: 1.4em;
      margin-right: 8px;
      background: url("../img/common/i-plus.png") no-repeat left center;
      background-size: contain; }
  .RB-toggles h3:hover {
    color: #d31; }
  .RB-toggles.open h3::before {
    background-image: url("../img/common/i-minus.png"); }

.toggle-body {
  overflow: hidden;
  padding: 2rem 0 0 2rem;
  display: none; }
  .toggle-body h4 {
    font-size: 1.3em;
    padding-bottom: 1rem;
    line-height: 1.3;
    margin-top: 0;
    padding-top: 0; }
  .toggle-body p + h4 {
    margin-top: 2rem; }
    .toggle-body p + h4:first-of-type {
      margin-top: 0; }
  .toggle-body h5 {
    font-size: 1.1em;
    padding-bottom: 1rem;
    margin-top: 1rem; }
  .toggle-body p {
    padding-bottom: 1em; }
    .toggle-body p.pb0 {
      padding-bottom: 0; }
  .toggle-body ol li {
    list-style: decimal;
    list-style-position: inside;
    padding-left: 1.3em;
    text-indent: -1.3em;
    padding-bottom: 1em; }

.alignleft {
  float: left;
  max-width: 44%;
  margin-right: 2rem; }

.RB-main {
  position: relative;
  margin-bottom: 4rem;
  padding-top: 6rem; }
  .RB-main h1 {
    position: absolute;
    background: #2E3192;
    color: #fff;
    left: 0;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 1em; }
    .RB-main h1 em {
      font-family: "Noto Serif JP", serif;
      font-size: 1.2em; }
    .RB-main h1 i {
      font-style: normal;
      padding: 0 2rem;
      font-size: 2em;
      font-weight: 300;
      font-family: "HondaGlobalFontJP-Light", sans-serif; }
    .RB-main h1 b {
      font-size: 1.1em;
      min-width: 8em; }

.RB-content {
  margin-bottom: 4rem;
  position: relative; }
  .RB-content::before {
    content: "";
    position: absolute;
    width: 12vw;
    height: 12vw;
    background: url("../img/common/efx3.png") no-repeat;
    background-size: cover; }
  .RB-content .container {
    position: relative;
    width: 1600px;
    max-width: 98%; }
  .RB-content figure {
    max-width: 72%;
    margin-right: auto; }
  .RB-content .content-title {
    position: absolute;
    max-width: 58%;
    right: -1rem;
    top: 20%;
    background: rgba(46, 49, 146, 0.9);
    padding: 3rem 3rem;
    transform: translate(30%, 0); }
    .RB-content .content-title.inview {
      transform: translate(0, 0); }
  .RB-content .cat {
    font-family: "Noto Serif JP", serif;
    margin-bottom: 2rem; }
  .RB-content h2 {
    font-weight: 600;
    font-size: 2em;
    margin-bottom: 2rem;
    line-height: 1.3; }
  .RB-content p {
    line-height: 1.7; }

.RB-content-L::before {
  right: -4vw;
  top: 4%;
  rotate: 16deg; }

.RB-content-R::before {
  left: -8vw;
  top: 56%; }
.RB-content-R figure {
  margin-right: 0;
  margin-left: auto; }
.RB-content-R .content-title {
  left: -1rem;
  right: auto;
  transform: translate(-30%, 0); }

.RB-energy .RB-main h1 {
  background: #009245; }
.RB-energy .content-title {
  background: rgba(0, 146, 69, 0.9); }

section.RB-tech,
.RB-tech {
  padding: 3rem 0; }
  section.RB-tech h3,
  .RB-tech h3 {
    font-weight: 700;
    font-size: 1.4em;
    display: flex;
    justify-content: center;
    margin-bottom: 3rem; }
    section.RB-tech h3 strong,
    .RB-tech h3 strong {
      display: inline-block;
      padding-bottom: 8px;
      border-bottom: 4px solid #e21;
      cursor: pointer; }
  section.RB-tech p,
  .RB-tech p {
    text-align: center;
    line-height: 1.6;
    padding-bottom: 1rem; }

.RB-EmbodiedAi {
  margin-top: 2rem;
  padding: 3rem;
  background: #D8EDF6; }
  .RB-EmbodiedAi figure {
    position: relative;
    z-index: 2; }
  .RB-EmbodiedAi .flex {
    transform: translateY(-10px);
    position: relative;
    z-index: 1; }
    .RB-EmbodiedAi .flex figure img {
      aspect-ratio: 8 / 3;
      object-fit: cover; }
    .RB-EmbodiedAi .flex ul {
      padding: 8px 0 0;
      display: flex;
      flex-wrap: wrap;
      gap: 1px; }
    .RB-EmbodiedAi .flex li {
      flex: 1;
      text-align: center;
      background: #2E3192;
      padding: 2px 4px;
      font-size: 0.9em; }
  .RB-EmbodiedAi h4 {
    background: #2E3192;
    color: #fff;
    padding: 1rem;
    text-align: center;
    font-size: 1.2em; }

.RB-Circulation {
  background: #D8F6DF; }
  .RB-Circulation figure {
    padding: 1rem; }
  .RB-Circulation h4 {
    background: #019245;
    max-width: 80%;
    margin: 0 auto; }
  .RB-Circulation div figure {
    background: url("../img/energy/techbg.png") no-repeat bottom;
    background-size: 100%; }

.RB-menu,
.RB-menu:last-of-type {
  padding: 8rem 0;
  text-align: center; }
  .RB-menu h4,
  .RB-menu:last-of-type h4 {
    margin-top: 4rem;
    text-align: left; }

.menu-content {
  margin-top: 1rem;
  background: #fff;
  padding: 1rem;
  display: flex;
  align-items: center;
  text-align: left;
  color: #222;
  position: relative; }
  .menu-content dt {
    flex: 0 0 20%; }
  .menu-content dd {
    padding: 0 2rem; }
    .menu-content dd::after {
      position: absolute;
      right: 1px;
      bottom: 1px;
      content: "";
      width: 12px;
      height: 12px;
      clip-path: polygon(100% 0, 100% 100%, 0 100%);
      background: #333; }
    .menu-content dd span {
      font-size: 0.7em; }
    .menu-content dd h3 {
      padding: 8px 0;
      font-size: 1.2em; }

.menu-future {
  display: flex;
  justify-content: space-between;
  padding-top: 2rem;
  padding-bottom: 4rem; }

.menu-future-c,
.menu-future-e {
  flex: 0 0 46%; }
  .menu-future-c dd,
  .menu-future-e dd {
    padding: 1em;
    display: flex;
    justify-content: center;
    position: relative;
    background: #2E3192; }
    .menu-future-c dd::before, .menu-future-c dd::after,
    .menu-future-e dd::before,
    .menu-future-e dd::after {
      content: "";
      position: absolute;
      left: 0;
      top: 100%;
      width: 32px;
      height: 8px;
      background: #6FD8D1;
      clip-path: polygon(0 0, 100% 0, 100% 100%); }
    .menu-future-c dd::after,
    .menu-future-e dd::after {
      left: auto;
      right: 0;
      clip-path: polygon(0 0, 100% 0, 0 100%); }
    .menu-future-c dd em,
    .menu-future-e dd em {
      font-family: "Noto Serif JP", serif;
      font-size: 1.2em; }
    .menu-future-c dd i,
    .menu-future-e dd i {
      font-style: normal;
      padding: 0 2rem;
      font-size: 2em;
      font-weight: 300;
      font-family: "HondaGlobalFontJP-Light", sans-serif; }
    .menu-future-c dd b,
    .menu-future-e dd b {
      font-size: 1.1em; }

.menu-future-e dd {
  background: #009245; }
  .menu-future-e dd::before, .menu-future-e dd::after {
    background: #80D96F; }

@media (max-width: 1240px) {
  .RB-content {
    margin-bottom: 16vw; }
    .RB-content figure {
      max-width: 88%; }
    .RB-content .content-title {
      max-width: 72%;
      top: 20%;
      z-index: 2; } }
@media (max-width: 1024px) {
  .RB-main {
    padding-top: 4rem; } }
@media (max-width: 768px) {
  .RB .pc {
    display: none; }
  .RB .sp {
    display: block; }
  .RB br.sp {
    display: inline; }
  .RB .flex {
    display: block; }

  .RB-kv h1 img {
    height: 44vw; }

  .RB-about {
    background-size: 100vw; }
    .RB-about .container {
      width: auto;
      margin-right: auto;
      padding: 8vw;
      background: rgba(0, 0, 0, 0.6); }

  #load-RBmenu {
    padding-top: 4vw; }

  .RB-menu,
  .RB-menu:last-of-type {
    padding: 16vw 0 8vw 0; }

  .menu-future {
    display: block;
    padding-bottom: 0; }

  .menu-future-c {
    margin-bottom: 2rem; }

  .RB-main {
    padding-top: 0; }
    .RB-main h1 {
      transform: translateY(-50%); }

  .RB-EmbodiedAi {
    padding: 4vw; }
    .RB-EmbodiedAi .col-5 {
      margin-bottom: 1em; }

  .RB-content {
    margin-bottom: 4rem; }
    .RB-content figure {
      max-width: 100%; }
    .RB-content .content-title {
      max-width: 100%;
      position: static;
      padding: 6vw 6vw; }

  .RB-title .container {
    display: block; }
  .RB-title .title-txt {
    padding: 8vw; }
    .RB-title .title-txt h1 {
      padding-top: 0; }

  .RB-body {
    padding: 8vw 0; } }
@media (max-width: 480px) {
  .menu-content {
    padding: 0;
    align-items: stretch; }
    .menu-content dt {
      display: flex;
      flex: 0 0 24%; }
      .menu-content dt i {
        padding: 1px;
        display: flex; }
      .menu-content dt img {
        object-fit: cover; }
    .menu-content dd {
      padding: 1rem; }
      .menu-content dd h3 {
        font-size: 1em; }

  .RB-main h1 {
    position: relative;
    transform: translate(0, 0);
    top: 0;
    flex-wrap: wrap; }
    .RB-main h1 i {
      padding: 0 8px; }
    .RB-main h1 b {
      min-width: 1em; }

  .RB-title .title-txt {
    padding: 8vw 4vw; }
    .RB-title .title-txt h1 {
      font-size: clamp(16px, 6.4vw, 24px); }

  .RB-content h2 {
    font-size: clamp(15px, 5.2vw, 30px); }

  section.RB-tech p,
  .RB-tech p {
    text-align: left; }

  .alignleft {
    float: none;
    margin: 0 0 1rem;
    max-width: 100%; } }