/* =========================================================
   PRODUCTS PAGE
   260824OK_PC_02products.pdf / supplied artboard reference
========================================================= */

.page-products {

}

.page-products .site-header {
  background: rgba(0, 0, 0, 0.5);
  border: 0;
}

.products-page {
  overflow: hidden;
}


.products-content {
    width: min(calc(100% - 96px), 1380px);
    margin: 0px auto 0px;
}

@media screen and (max-width: 1380px) {
.products-content {
    width: min(calc(100% - 96px), 1080px);
    margin: 0px auto 0px;
}

  }

.products-page h1,
.products-page h2,
.products-page p,
.products-page figure {
  margin-top: 0;
}

/* ========================= HERO ========================= */
.products-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
  line-height: 0;
}

.products-hero__visual {
  width: 100%;
  height: auto;
  min-height: 410px;
  object-fit: cover;
  object-position: center top;
}

.products-hero__overlay {
  position: absolute;
  inset: 0;
  width: min(calc(100% - 96px), 1380px);
  margin-inline: auto;
  pointer-events: none;
}

.products-hero__anniversary,
.products-hero__title-image {
  position: absolute;
  display: block;
  width: auto;
  height: auto;
}

.products-hero__anniversary {
  left: 0;
  top: clamp(72px, 7.4vw, 118px);
  max-width: clamp(108px, 11.5vw, 184px);
}

.products-hero__title-image {
  left: 0;
  bottom: clamp(22px, 2.2vw, 38px);
  max-width: clamp(285px, 34vw, 545px);
}

/* ========================= BLACK INTRO ========================= */
.products-intro {
    position: relative;
    z-index: 3;
    color: #fff;
    background: #000;
    padding: 15px 30px 50px;
    margin-top: -1px;
    margin-bottom: -4px;
}

.products-intro__inner {
  padding-left: clamp(0px, 1.3vw, 20px);
}

.products-intro__label {
    margin-bottom: clamp(28px, 2.6vw, 42px);
    color: #00a6e8;
    font-size: clamp(16px, 1.4vw, 18px);
    font-weight: 400;
    letter-spacing: .04em;
}

.products-intro h1 {
  margin-bottom: clamp(28px, 2.7vw, 44px);
  color: #fff;
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: .035em;
}

.products-intro__copy {
  width: min(100%, 720px);
  color: rgba(255,255,255,.72);
  font-size: clamp(12px, .83vw, 14px);
  font-weight: 300;
  line-height: 2.0;
}

.products-intro__copy p {
  margin-bottom: 18px;
}

.products-intro__copy p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   DIAMOND DIVIDER
   TOPページの帯と同じ寸法・色系統
========================================================= */
.diamond-divider {
  --diamond-w: 96px;
  --diamond-h: 64px;
  --diamond-overlap-y: -32px;
  --diamond-offset-x: -48px;
  position: relative;
  z-index: 4;
  width: 100%;
  height: 352px;
  margin-top: -1px;
  margin-bottom: -1px;
  overflow: hidden;
  pointer-events: none;
  line-height: 0;
  background: #fff;
}

.diamond-divider__container {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column-reverse nowrap;
}

/* TOPページと同じ、黒セクション側の固定ギザギザ。
   白い▽の空白が見えないよう、境界に黒い菱形の下半分を重ねる。 */
.diamond-divider__cap-top {
  position: absolute;
  top: 0;
  left: -47px;
  width: calc(100% + 94px);
  height: calc(var(--diamond-h) / 2 + 1px);
  overflow: hidden;
  z-index: 4;
  pointer-events: none;
}

.diamond-divider__cap-row {
  position: absolute;
  left: 0;
  top: calc(var(--diamond-h) / -2);
  width: calc(100% + (var(--diamond-w) * 2));
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
  margin-left: var(--diamond-offset-x);
}

.diamond-divider__cap-grid {
  position: relative;
  display: inline-block;
  width: var(--diamond-w);
  height: var(--diamond-h);
}

.diamond-divider__cap-grid::before,
.diamond-divider__cap-grid::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: #000;
  clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
}

.diamond-divider__cap-grid::before { top: 0; z-index: 1; }
.diamond-divider__cap-grid::after  { top: 1px; z-index: 0; }

.diamond-divider__row {
  position: relative;
  width: 100%;
  height: var(--diamond-h);
  margin-bottom: var(--diamond-overlap-y);
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
  flex: 0 0 auto;
}

.diamond-divider__row:nth-child(odd) {
  margin-left: var(--diamond-offset-x);
}

.diamond-divider__grid {
  position: relative;
  display: inline-block;
  width: var(--diamond-w);
  height: var(--diamond-h);
  opacity: 0;
  transition: opacity .15s linear;
}

.diamond-divider__grid::before,
.diamond-divider__grid::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
}

.diamond-divider__grid::before { top: 0; z-index: 1; }
.diamond-divider__grid::after { top: 1px; z-index: 0; }
.diamond-divider__grid.active,
.diamond-divider__grid.is-seam-fixed { opacity: 1 !important; }
.diamond-divider__grid.is-seam-fixed { transition: none !important; }

.diamond-divider__row[data-row="0"] .diamond-divider__grid::before,
.diamond-divider__row[data-row="0"] .diamond-divider__grid::after { background:#fff; }
.diamond-divider__row[data-row="1"] .diamond-divider__grid::before,
.diamond-divider__row[data-row="1"] .diamond-divider__grid::after { background:#eef3fa; }
.diamond-divider__row[data-row="2"] .diamond-divider__grid::before,
.diamond-divider__row[data-row="2"] .diamond-divider__grid::after { background:#dae4f3; }
.diamond-divider__row[data-row="3"] .diamond-divider__grid::before,
.diamond-divider__row[data-row="3"] .diamond-divider__grid::after { background:#bfd2eb; }
.diamond-divider__row[data-row="4"] .diamond-divider__grid::before,
.diamond-divider__row[data-row="4"] .diamond-divider__grid::after { background:#9dbce0; }
.diamond-divider__row[data-row="5"] .diamond-divider__grid::before,
.diamond-divider__row[data-row="5"] .diamond-divider__grid::after { background:#72a4d5; }
.diamond-divider__row[data-row="6"] .diamond-divider__grid::before,
.diamond-divider__row[data-row="6"] .diamond-divider__grid::after { background:#4388c8; }
.diamond-divider__row[data-row="7"] .diamond-divider__grid::before,
.diamond-divider__row[data-row="7"] .diamond-divider__grid::after { background:#176ab6; }
.diamond-divider__row[data-row="8"] .diamond-divider__grid::before,
.diamond-divider__row[data-row="8"] .diamond-divider__grid::after { background:#0750a1; }
.diamond-divider__row[data-row="9"] .diamond-divider__grid::before,
.diamond-divider__row[data-row="9"] .diamond-divider__grid::after { background:#063982; }
.diamond-divider__row[data-row="10"] .diamond-divider__grid::before,
.diamond-divider__row[data-row="10"] .diamond-divider__grid::after { background:#062566; }

/* ========================= QUALITY MAP ========================= */
.products-map {
  background: #fff;
  padding: clamp(10px, 1vw, 18px) 0 clamp(72px, 6.4vw, 104px);
}

.products-map__inner {
  display: flex;
  justify-content: center;
}

.products-map img {
  width: min(100%, 760px);
  height: auto;
}

/* ========================= PRODUCT SECTIONS ========================= */
.products-section {
  background: #fff;
}

.products-section--cylinder {
  padding: clamp(32px, 3vw, 48px) 0 clamp(70px, 6.2vw, 100px);
}

.products-section--industry {
  padding: clamp(70px, 6vw, 98px) 0 clamp(66px, 5.4vw, 88px);
}

.products-heading {
  margin-bottom: clamp(44px, 4.5vw, 72px);
  padding-left: clamp(0px, 1.3vw, 20px);
}

.products-heading__eyebrow {
  margin-bottom: 1px;
  color: #666;
  font-size: clamp(12px, .86vw, 14px);
  line-height: 1.6;
}

.products-heading h2 {
  position: relative;
  display: table;
  max-width: 100%;
  margin-bottom: clamp(18px, 1.8vw, 28px);
  padding-bottom: 4px;
  color: #333;
  font-size: clamp(22px, 1.9vw, 30px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: .015em;
}

.products-heading h2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #777;
}

.products-heading__lead {
  max-width: 1060px;
  margin-bottom: 0;
  color: #777;
  font-size: clamp(11px, .78vw, 13px);
  line-height: 1.9;
}

.products-cylinder-visuals {
  width: min(100%, 1030px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1.32fr;
  gap: clamp(36px, 5vw, 78px);
}

.products-cylinder-visuals figure,
.products-industry-visual {
  margin-bottom: 0;
}

.products-cylinder-visuals img,
.products-industry-visual img {
  width: 100%;
  height: auto;
}

.products-industry-visual {
  width: min(100%, 760px);
  margin-inline: auto;
}

/* ========================= SLASH SEPARATOR ========================= */
.products-diagonal {
  position: relative;
  height: 34px;
  background: #fff;
}

.products-diagonal span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(44vw, 515px);
  height: 13px;
  transform: translate(-50%,-50%);
  background: repeating-linear-gradient(125deg,#d8d8d8 0 8px,transparent 8px 16px);
  clip-path: polygon(2% 0,100% 0,98% 100%,0 100%);
}

.products-diagonal--bottom {
  height: clamp(62px, 5vw, 82px);
}

.products-diagonal--bottom span {
  top: 16px;
}

/* ========================= MOTION FALLBACK ========================= */
.products-page [data-products-reveal] {
  opacity: 1;
  transform: none;
}

/* ========================= TABLET ========================= */
@media (max-width: 1023px) {
  .products-content {
    width: min(calc(100% - 56px), 920px);
  }

  .products-hero__overlay {
    width: calc(100% - 56px);
  }

  .diamond-divider {
    --diamond-w: 58px;
    --diamond-h: 38px;
    --diamond-overlap-y: -19px;
    --diamond-offset-x: -29px;
    height: 210px;
  }

  .gorigori{
    width:0;
    height:0;
  }

  .products-cylinder-visuals {
    width: min(100%, 820px);
    gap: 30px;
  }
}

/* ========================= MOBILE ========================= */
@media (max-width: 760px) {
.diamond-divider__container {
    position: absolute;
    left: 0;
    bottom: 5px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column-reverse nowrap;
}
.diamond-divider__cap-top {
    position: absolute;
    top: 0px;
    left: -30px;
    width: calc(100% + 94px);
    height: calc(var(--diamond-h) / 2 + 1px);
    overflow: hidden;
    z-index: 4;
    pointer-events: none;
}
.products-content {
    width: min(calc(100% - 96px), 1180px);
    margin: 8px auto 0px;
}
  .gorigori{
    width:100%;
    height:50px;
    background: #000;
    display:block;
  }

  .products-content {
    width: calc(100% - 44px);
  }

    .products-hero {
    padding-top: 65px;
    padding-bottom: 35px;
    background: #000;
  }
  .products-hero__visual {
    min-height: 0;
    width: 100%;
    height: auto;
    margin: 0;
  }


  .products-hero__overlay {
    width: calc(100% - 44px);
  }

  .products-hero__anniversary {
    top: 76px;
    max-width: 88px;
  }

  .products-hero__title-image {
    bottom: 16px;
    max-width: 215px;
  }

  .products-intro {
    padding: 2px 0 52px;
  }

  .products-intro__inner,
  .products-heading {
    padding-left: 0;
  }

  .products-intro__label {
    margin-bottom: 24px;
    font-size: 16px;
  }

  .products-intro h1 {
    margin-bottom: 24px;
    font-size: 21px;
  }

  .products-intro__copy {
    font-size: 12px;
    line-height: 1.9;
  }

  .diamond-divider {
    height: 178px;
  }

  .products-map {
    padding: 6px 0 56px;
  }

  .products-map img {
    width: min(100%, 560px);
  }

  .products-section--cylinder {
    padding: 24px 0 58px;
  }

  .products-section--industry {
    padding: 58px 0 48px;
  }

  .products-heading {
    margin-bottom: 34px;
  }

  .products-heading h2 {
    font-size: 20px;
    line-height: 1.55;
  }

  .products-heading__lead {
    font-size: 11px;
  }

  .products-cylinder-visuals {
    display: block;
    width: 100%;
  }

  .products-cylinder-visuals__main {
    width: 78%;
    margin-inline: auto;
    margin-bottom: 34px !important;
  }

  .products-cylinder-visuals__process {
    margin: 0 -10px;
  }

  .products-industry-visual {
    width: 100%;
  }

  .products-diagonal span {
    width: 55vw;
    height: 10px;
  }
}