/* Visual refinements for the business and strengths sections. */
.business,
.strengths {
  padding: 70px 48px;
  line-height: normal;
}
.strengths {
  background: #ece8dc;
}
.business-title,
.strengths-heading {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: 27px;
  line-height: normal;
  margin: 14px 0 18px;
  max-width: 20ch;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: normal;
}
p.body-copy {
  font-size: 14px;
  line-height: 1.9;
  color: #6b6558;
  max-width: 66ch;
  text-wrap: wrap;
  overflow-wrap: break-word;
}
.business-services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 28px;
}
.business-service {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #ded9cc;
  font-size: 13px;
  align-items: flex-start;
}
.business-service .number {
  font-family: "JetBrains Mono", monospace;
  color: #b1502e;
  font-size: 11px;
  padding-top: 2px;
}
.business-stats {
  display: flex;
  gap: 14px;
  margin-top: 30px;
}
.business-stat {
  background: #1f3b36;
  color: #fff;
  padding: 20px 26px;
  flex: 1;
}
.business-stat > div {
  padding: 0;
  background: transparent;
}
.business-stat .value {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 27px;
}
.business-stat .label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: #a9b3ab;
  margin-top: 4px;
}
.note-caption {
  font-size: 10.5px;
  color: #777064;
  margin-top: 10px;
}
@media (max-width: 760px) {
  .business,
  .strengths {
    padding: 54px 24px;
  }
  .business-services {
    grid-template-columns: 1fr;
  }
  .business-stats {
    display: grid;
    grid-template-columns: 1fr;
  }
  .business-title,
  .strengths-heading {
    font-size: 24px;
    max-width: 100%;
    text-wrap: wrap;
    word-break: normal;
    overflow-wrap: anywhere;
  }
}
.strengths-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.strengths-item {
  background: #fff;
  border: 1px solid #ded9cc;
  padding: 22px 24px;
}
.strengths-item .number {
  font:
    11px "JetBrains Mono",
    monospace;
  color: #b1502e;
}
.strengths-item .title {
  margin: 10px 0 8px;
  font-size: 15px;
  font-weight: 700;
}
.strengths-item p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: #6b6558;
}
@media (max-width: 760px) {
  .strengths-list {
    grid-template-columns: 1fr;
  }
}
.collaboration,
.products .wrap,
.video,
.company .wrap,
.officers .wrap,
.camper .wrap {
  line-height: normal;
}
footer {
  font-family: "JetBrains Mono", "Noto Sans JP", monospace;
  line-height: normal;
}
@media (min-width: 761px) {
  .eyebrow,
  .hero-copy > p:first-child {
    font-weight: 400;
    line-height: normal;
  }
  .site-header {
    height: auto;
    gap: normal;
    line-height: normal;
  }
  .site-header .brand {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: normal;
  }
  .site-header .brand i {
    color: #b1502e;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 16px;
    font-weight: 900;
    line-height: normal;
  }
  .site-header nav {
    margin-left: 0;
    font-size: 13.5px;
    font-weight: 500;
    line-height: normal;
  }
  .site-header nav a {
    font-size: 13.5px;
    font-weight: 500;
    line-height: normal;
  }
  .site-header .lang {
    gap: normal;
    font-family: "JetBrains Mono", "Noto Sans JP", monospace;
    font-size: 11px;
    line-height: normal;
  }
  .site-header .lang a {
    padding: 6px 13px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 400;
    line-height: normal;
  }
  .site-header .lang .active {
    font-weight: 400;
  }
  .hero,
  .hero-copy {
    line-height: normal;
  }
  .hero-copy {
    padding: 78px 50px 70px 48px;
  }
  .hero-copy > p {
    margin: 0;
  }
  .hero .lead {
    max-width: 40ch;
    margin: 0;
  }
  .hero .button {
    display: inline-block;
    gap: normal;
    width: auto;
    font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.02em;
  }
  .news.wrap {
    line-height: normal;
    border-bottom: 1px solid #ded9cc;
  }
  .news-head {
    margin-bottom: 4px;
  }
  .news-head .eyebrow {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
  }
  .news-grid {
    margin-top: 14px;
  }
  .news-grid a {
    line-height: normal;
  }
  .news-grid a span {
    font-size: 13.5px;
    font-weight: 500;
    line-height: normal;
  }
  .news-grid a b {
    font:
      13px "JetBrains Mono",
      "Noto Sans JP",
      monospace;
    line-height: normal;
  }
  .news .news-note {
    margin: 12px 0 0;
    font-size: 11px;
    line-height: normal;
  }
  .summary {
    gap: 0;
    font-size: 16px;
    line-height: normal;
  }
  .summary .sum-cell {
    font-family: "Noto Sans JP", sans-serif;
  }
  .summary .sum-cell .v {
    display: inline;
  }
  main h2 {
    max-width: 20ch;
    line-height: normal;
    letter-spacing: normal;
    margin: 14px 0 18px;
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: normal;
  }
  .products .body-copy,
  .video .body-copy,
  .camper .body-copy {
    margin: 0;
  }
  .collaboration {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto auto;
    gap: 0 40px;
    align-items: center;
  }
  .collaboration > div:last-child {
    display: contents;
  }
  .collaboration .eyebrow {
    grid-column: 1/-1;
    grid-row: 1;
    margin: 0;
  }
  .collaboration .venn {
    grid-column: 1;
    grid-row: 2/4;
    width: 300px;
    height: 240px;
    margin: 0 auto;
  }
  .collaboration h2 {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin: 0 0 18px;
    line-height: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .collaboration > div:last-child > p:last-child {
    grid-column: 2;
    grid-row: 3;
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
    max-width: 66ch;
  }
  .venn i {
    width: 165px;
    height: 165px;
    font-size: 11px;
    mix-blend-mode: multiply;
    opacity: 0.82;
  }
  .venn i:first-child {
    left: 10px;
    top: 0;
  }
  .venn i:nth-child(2) {
    right: 10px;
    top: 0;
  }
  .venn i:nth-child(3) {
    left: 68px;
    top: 90px;
  }
  .products .tags {
    gap: 8px;
    margin: 20px 0 24px;
  }
  .products .tags span {
    padding: 6px 14px;
    border-color: #6b6558;
    border-radius: 20px;
    font:
      12px "JetBrains Mono",
      "Noto Sans JP",
      monospace;
  }
  .products .photos {
    gap: 10px;
    margin-top: 28px;
  }
  .products .photos figure {
    height: 230px;
    margin: 0;
    background: #fff;
  }
  .products .photos img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .products .note-caption,
  .video .note-caption {
    margin: 10px 0 0;
    color: #6b6558;
    font:
      11.5px "JetBrains Mono",
      "Noto Sans JP",
      monospace;
    line-height: normal;
  }
  .video-grid {
    gap: 10px;
    margin-top: 28px;
  }
  .video-card,
  .video-grid video {
    height: 260px;
  }
  .business-stat .label {
    font-family: "JetBrains Mono", "Noto Sans JP", monospace;
  }
  .business .note-caption {
    margin: 10px 0 0;
    color: #6b6558;
    font:
      11.5px "JetBrains Mono",
      "Noto Sans JP",
      monospace;
    line-height: normal;
  }
  .company dl {
    margin: 24px 0 0;
    border-top: 0;
    font-size: 13.5px;
    line-height: normal;
  }
  .company dt,
  .company dd {
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: normal;
  }
  .company dt {
    font-family: "JetBrains Mono", "Noto Sans JP", monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #6b6558;
  }
  .officer-grid h3 {
    font-size: 16px;
    margin: 0;
  }
  .officer-grid b {
    display: block;
    margin: 3px 0 8px;
    font-size: 10.5px;
  }
  .officer-grid p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.75;
  }
  .camper .eyebrow {
    margin-bottom: 0;
  }
  .camper .eyebrow:after {
    display: block;
    margin-top: 4px;
    color: #6b6558;
    font:
      11px "JetBrains Mono",
      monospace;
    letter-spacing: 0.04em;
    content: "Metio Camper Van division";
  }
  .camper-images {
    position: relative;
  }
  .camper-bottom {
    position: relative;
  }
  .camper-images:after,
  .camper-bottom:before,
  .camper-bottom:after {
    position: absolute;
    z-index: 1;
    bottom: 10px;
    color: #ffffffb0;
    font:
      10px "JetBrains Mono",
      monospace;
    text-shadow: 0 1px 4px #0009;
    pointer-events: none;
  }
  .camper-images:after {
    left: 14px;
    bottom: 220px;
    content: "PHOTO — ラクネル本社（ドローン空撮）";
  }
  .camper-bottom:before {
    left: 14px;
    content: "PHOTO — 製造工房";
  }
  .camper-bottom:after {
    left: calc(50% + 19px);
    content: "PHOTO — Rakuneru 完成車";
  }
}
.metio-ja .collaboration .eyebrow,
.metio-ja .products .eyebrow,
.metio-ja .video .eyebrow,
.metio-ja .company .eyebrow,
.metio-ja .officers .eyebrow,
.metio-ja .camper .eyebrow {
  font-size: 0;
}
.metio-ja .collaboration .eyebrow:before,
.metio-ja .products .eyebrow:before,
.metio-ja .video .eyebrow:before,
.metio-ja .company .eyebrow:before,
.metio-ja .officers .eyebrow:before,
.metio-ja .camper .eyebrow:before {
  font-family: "JetBrains Mono", "Noto Sans JP", monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.1em;
}
.metio-ja .collaboration .eyebrow:before {
  content: "03 — コラボレート事業のご提案";
}
.metio-ja .products .eyebrow:before {
  content: "04 — 取扱商品・実績";
}
.metio-ja .video .eyebrow:before {
  content: "05 — 現地映像";
}
.metio-ja .company .eyebrow:before {
  content: "06 — 会社概要";
}
.metio-ja .officers .eyebrow:before {
  content: "07 — 代表者紹介";
}
.metio-ja .camper .eyebrow:before {
  content: "08 — メティオ・キャンピングカー事業部";
}
