.page-title-banner--crushing-examples {
  background-position: center 56%;
}

.page-title-banner--crushing-examples .page-title-banner__visual-label {
  top: calc(50% - (var(--header-h, 110px) / 2));
}

.page-title-banner--crushing-examples .page-title-banner__visual-en {
  width: min(1160px, calc(100% - 48px));
  max-width: calc(100% - 48px);
  bottom: 0;
  font-size: clamp(58px, 7.3vw, 112px);
  text-align: center;
  box-sizing: border-box;
}

.crushing-examples-lead {
  padding: 84px 0 61px;
  background: #deeaf0;
  text-align: center;
}

.crushing-examples-lead h2 {
  margin: 0 0 39px;
  color: #000;
  font-family: "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.06em;
}

.crushing-examples-lead p {
  margin: 0;
  color: #000;
  font-family: "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 37px;
  letter-spacing: 0.06em;
}

.crushing-examples-list {
  padding: 110px 0 105px;
  background: #ffffff;
}

.crushing-examples-category-nav {
  width: min(1160px, calc(100% - 48px));
  margin: 0 auto 69px;
  border: 0;
  background: transparent;
}

.crushing-examples-category-select-wrap {
  display: none;
}

.crushing-examples-category-nav ul {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crushing-examples-category-nav li {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.crushing-examples-category-nav button {
  width: 100%;
  min-height: 60px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #0079c4;
  border-left-width: 0;
  border-radius: 0;
  background:
    linear-gradient(125deg, transparent 0 69%, rgba(0, 127, 200, 0.09) 69.2% 100%),
    #ffffff;
  color: #0079c4;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-size: 15.84px;
  font-weight: 900;
  font-variation-settings: "wght" 900;
  line-height: 1.18;
  letter-spacing: 0.03em;
  text-align: center;
  box-sizing: border-box;
  white-space: normal;
  cursor: pointer;
  appearance: none;
}

.crushing-examples-category-nav li:nth-child(7n + 1) button {
  border-left-width: 3px;
}

.crushing-examples-category-nav li:nth-child(n + 8) button {
  border-top-width: 0;
}

.crushing-examples-category-nav button:hover,
.crushing-examples-category-nav button:focus-visible,
.crushing-examples-category-nav button.is-current {
  background: linear-gradient(120deg, #0079c4 0%, #0079c4 78%, #0079c4 78%, #0079c4 100%);
  color: #ffffff;
}

.crushing-examples-category-nav button:focus-visible {
  outline: 3px solid rgba(0, 121, 198, 0.32);
  outline-offset: 2px;
}

.crushing-examples-grid {
  width: min(1160px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 33px;
  row-gap: 74px;
}

.crushing-example-card figure {
  margin: 0 0 18px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #d5d5d5;
}

.crushing-example-card__image-link {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.crushing-example-card__image-link:focus-visible {
  outline: 3px solid rgba(0, 121, 198, 0.45);
  outline-offset: -3px;
}

.crushing-example-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crushing-example-card h3 {
  margin: 0;
  color: #000;
  font-family: "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 0.04em;
}

.crushing-examples-cta {
  width: min(1160px, calc(100% - 48px));
  margin: 94px auto 0;
  padding-top: 92px;
  border-top: 2px solid #008bd2;
  display: grid;
  grid-template-columns: 1fr 366px;
  column-gap: 80px;
  align-items: end;
}

.crushing-examples-cta p {
  margin: 0;
  color: #000;
  font-family: "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 56px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.crushing-examples-cta__button {
  width: 366px;
  height: 51px;
  justify-self: end;
  color: #fff;
  font-family: "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  font-size: 23.28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}

.crushing-examples-cta__button span {
  margin-left: 9px;
  font-size: 15px;
  line-height: 1;
}

@media (max-width: 1023px) {
  .crushing-examples-list {
    padding-top: 70px;
    padding-bottom: 80px;
  }

  .crushing-examples-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }

  .crushing-examples-category-nav ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crushing-examples-category-nav li:nth-child(n) button {
    border-top-width: 3px;
    border-left-width: 0;
  }

  .crushing-examples-category-nav li:nth-child(odd) button {
    border-left-width: 3px;
  }

  .crushing-examples-category-nav li:nth-child(n + 3) button {
    border-top-width: 0;
  }

  .crushing-examples-cta {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .crushing-examples-cta__button {
    justify-self: start;
  }
}

@media (max-width: 880px) {
  .crushing-examples-category-nav {
    display: none;
  }

  .crushing-examples-category-select-wrap {
    position: relative;
    display: block;
    width: min(100% - 28px, 320px);
    margin: 0 auto 48px;
  }

  .crushing-examples-category-select-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 9px;
    height: 9px;
    border-right: 2px solid #0079c4;
    border-bottom: 2px solid #0079c4;
    transform: translateY(-68%) rotate(45deg);
    pointer-events: none;
  }

  .crushing-examples-category-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 50px;
    padding: 0 44px 0 16px;
    border: 2px solid #0079c4;
    border-radius: 0;
    background: #ffffff;
    color: #0079c4;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-align-last: center;
    box-sizing: border-box;
  }
}

@media (max-width: 640px) {
  .crushing-examples-grid,
  .crushing-examples-category-nav,
  .crushing-examples-cta {
    width: min(100% - 28px, 1160px);
  }

  .crushing-examples-lead {
    padding: 58px 0 62px;
  }

  .crushing-examples-lead h2 {
    margin-bottom: 28px;
    font-size: 25px;
  }

  .crushing-examples-lead p {
    font-size: 14px;
    line-height: 1.85;
  }

  .page-title-banner--crushing-examples .page-title-banner__visual-en {
    width: min(100% - 28px, 1160px);
    max-width: calc(100% - 28px);
    bottom: 0;
  }

  .crushing-examples-grid {
    grid-template-columns: 1fr;
    row-gap: 42px;
  }

  .crushing-examples-category-nav {
    margin-bottom: 48px;
  }

  .crushing-examples-category-nav ul {
    grid-template-columns: 1fr;
  }

  .crushing-examples-category-nav li:nth-child(n) button {
    min-height: 44px;
    border-left-width: 3px;
    border-top-width: 0;
    font-size: 16.5px;
  }

  .crushing-examples-category-nav li:first-child button {
    border-top-width: 3px;
  }

  .crushing-examples-cta {
    margin-top: 70px;
    padding-top: 50px;
  }

  .crushing-examples-cta p {
    font-size: 20px;
    white-space: normal;
  }

  .crushing-examples-cta__button {
    width: 100%;
  }
}

/* Header menu hero baseline: match /products/. */
.page-article--with-title-banner .page-title-banner--crushing-examples {
  width: calc(100vw - var(--sbw, 0px)) !important;
  height: 385px !important;
  min-height: 385px !important;
  margin-top: var(--header-h, 110px) !important;
  margin-left: calc(50% - (50vw - (var(--sbw, 0px) / 2))) !important;
  margin-right: calc(50% - (50vw - (var(--sbw, 0px) / 2))) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.page-article--with-title-banner .page-title-banner--crushing-examples .page-title-banner__inner,
.page-article--with-title-banner .page-title-banner--crushing-examples .page-title-banner__title {
  height: 385px !important;
  min-height: 385px !important;
}

.page-title-banner--crushing-examples .page-title-banner__visual-label {
  top: 45.5% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 36px !important;
  line-height: 1.2 !important;
}

.page-title-banner--crushing-examples .page-title-banner__visual-en {
  left: auto !important;
  right: max(40px, calc(((100vw - var(--sbw, 0px)) - 1160px) / 2)) !important;
  bottom: 0 !important;
  transform: translateY(25%) !important;
  width: auto !important;
  max-width: calc(100% - 80px) !important;
  text-align: right !important;
}

@media (max-width: 1023px) {
  .page-article--with-title-banner .page-title-banner--crushing-examples,
  .page-article--with-title-banner .page-title-banner--crushing-examples .page-title-banner__inner,
  .page-article--with-title-banner .page-title-banner--crushing-examples .page-title-banner__title {
    height: 170px !important;
    min-height: 170px !important;
  }

  .page-title-banner--crushing-examples .page-title-banner__visual-label {
    font-size: 26px !important;
  }

  .page-title-banner--crushing-examples .page-title-banner__visual-en {
    right: 20px !important;
    max-width: calc(100% - 40px) !important;
  }
}

/* Crushing examples hero title: match company overview typography. */
.page-title-banner--crushing-examples .page-title-banner__visual-label {
  color: #fff !important;
  font-family: "Noto Sans CJK JP", "Noto Sans JP", sans-serif !important;
  font-size: 35px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.06em !important;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.75));
}

/* Crushing examples hero title: strictly match /aboutus/ title style and center. */
.page-title-banner--crushing-examples .page-title-banner__visual-label {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 2 !important;
  display: block !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  color: #fff !important;
  font-family: "Noto Sans CJK JP", "Noto Sans JP", sans-serif !important;
  font-size: 35px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.06em !important;
  text-align: center !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.75)) !important;
  white-space: nowrap !important;
  pointer-events: none;
}

/* Crushing examples hero title: final lock to the /aboutus/ title appearance. */
.page-article--with-title-banner .page-title-banner--crushing-examples .page-title-banner__visual-label {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 2 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  font-family: "Noto Sans CJK JP", "Noto Sans JP", sans-serif !important;
  font-size: 35px !important;
  font-weight: 800 !important;
  font-style: normal !important;
  font-variation-settings: "wght" 800 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.06em !important;
  text-align: center !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.75)) !important;
  white-space: nowrap !important;
  pointer-events: none;
}

/* SP crushing examples line-break refinements. */
@media (max-width: 880px) {
  .crushing-examples-lead h2,
  .crushing-examples-lead p {
    width: min(calc(100% - 32px), 680px);
    margin-left: auto;
    margin-right: auto;
  }

  .crushing-examples-lead p,
  .crushing-examples-cta p {
    text-align: left;
    white-space: normal !important;
  }

  .crushing-example-card h3 {
    line-height: 1.55;
  }
}

/* Page 2 redline: match the top lead spacing with the case-study page on desktop. */
@media (min-width: 1024px) {
  .crushing-examples-lead {
    padding-top: 90px !important;
    padding-bottom: 66px !important;
  }

  .crushing-examples-lead h2 {
    margin-bottom: 38px !important;
  }
}

/* EN crushing examples: keep the CTA copy within the 1160px layout. */
body.language-page-body--en.page-id-381 .crushing-examples-cta p {
  margin: 0;
  color: #000;
  font-family: "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  font-size: 25px;
  font-weight: 800;
  line-height: 56px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* EN SP: keep the visual title inside the hero. */
@media (max-width: 880px) {
  body.language-page-body--en .page-article--crushing-examples .page-title-banner--crushing-examples .page-title-banner__visual-label {
    width: min(calc(100% - 32px), 360px) !important;
    max-width: calc(100% - 32px) !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-size: clamp(24px, 7vw, 28px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0.03em !important;
  }
}

/* JP SP only: replace the crushing examples hero image. */
@media (max-width: 880px) {
  body.page-id-382:not(.language-page-body--en):not(.language-page-body--zh) .page-title-banner--crushing-examples {
    background-image: url("../../img/exhibition-260618/crushing-hero-sp-20260623.jpg") !important;
    background-position: center center !important;
    background-size: cover !important;
  }
}

/* SP only: align hero height to /products/ and use the JP hero image across languages. */
@media (max-width: 880px) {
  body.page-id-382 .page-article--with-title-banner .page-title-banner--crushing-examples,
  body.page-id-382 .page-article--with-title-banner .page-title-banner--crushing-examples .page-title-banner__inner,
  body.page-id-382 .page-article--with-title-banner .page-title-banner--crushing-examples .page-title-banner__title {
    height: 170px !important;
    min-height: 170px !important;
  }

  body.page-id-382 .page-title-banner--crushing-examples {
    background-image: url("../../img/exhibition-260618/crushing-hero-sp-20260623.jpg") !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
}

/* SP all languages: unify the post-hero block background. */
@media (max-width: 880px) {
  body.page-id-382 .page-article--crushing-examples .page-content .crushing-examples-lead {
    background: #d9ebf4 !important;
    background-color: #d9ebf4 !important;
  }
}

/* SP all languages: match the post-hero lead font sizes to /projects/. */
@media (max-width: 880px) {
  body.page-id-382 .page-article--crushing-examples .page-content .crushing-examples-lead h2 {
    font-size: 30px !important;
  }

  body.page-id-382 .page-article--crushing-examples .page-content .crushing-examples-lead p {
    font-size: 17px !important;
  }
}

/* JP SP only: match the crushing examples hero title size to the company overview hero. */
@media (max-width: 880px) {
  body:not(.language-page-body):not(.language-page-body--en):not(.language-page-body--zh).page-id-382 .page-title-banner--crushing-examples .page-title-banner__visual-label {
    font-size: clamp(24px, 6vw, 35px) !important;
  }
}

/* JP SP only: fix the crushing examples lead heading to two lines. */
@media (max-width: 880px) {
  body:not(.language-page-body):not(.language-page-body--en):not(.language-page-body--zh).page-id-382 .page-article--crushing-examples .page-content .crushing-examples-lead h2 {
    font-size: 0 !important;
    line-height: 0 !important;
  }

  body:not(.language-page-body):not(.language-page-body--en):not(.language-page-body--zh).page-id-382 .page-article--crushing-examples .page-content .crushing-examples-lead h2::before {
    content: "粉砕事例をYoutubeで\Aご覧いただけます";
    display: block !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    font-family: "Noto Sans CJK JP", "Noto Sans JP", sans-serif !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.06em !important;
    text-align: center !important;
    white-space: pre-line !important;
  }
}

/* JP SP only: match the bottom CTA copy with the ISO9001 SNS callout. */
@media (max-width: 880px) {
  body:not(.language-page-body):not(.language-page-body--en):not(.language-page-body--zh).page-id-382 .page-article--crushing-examples .page-content .crushing-examples-cta p {
    width: 100% !important;
    margin: 0 0 32px !important;
    color: #111111 !important;
    font-size: 25px !important;
    font-weight: 900 !important;
    line-height: 1.75 !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

/* JP SP only: reduce the post-hero h2 heading size by 30%. */
@media (max-width: 880px) {
  body:not(.language-page-body):not(.language-page-body--en):not(.language-page-body--zh).page-id-382 .page-article--crushing-examples .page-content .crushing-examples-lead h2::before {
    font-size: 21px !important;
  }
}

/* JP SP only: set the crushing examples lead copy weight and size. */
@media (max-width: 880px) {
  body:not(.language-page-body):not(.language-page-body--en):not(.language-page-body--zh).page-id-382 .page-article--crushing-examples .page-content .crushing-examples-lead p {
    font-size: 15px !important;
    font-weight: 400 !important;
  }
}