/* ==========================================================================
   BODY MAINTE — feature.css（FEATURE ページ）
   値の出典：Figma design (260917) BodyMainte_pc_03_feature / sp_03_feature
   ページ見出し（.p-ph）は products.css と同じ設計
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */
.p-ph {
  position: relative;
  padding-top: 150px;
}

.p-ph .l-inner {
  position: relative;
  z-index: 1;
}

@media only screen and (max-width: 999px) {
  .p-ph {
    padding-top: calc(var(--header-h) + 18px);
  }
}

/* --------------------------------------------------------------------------
   Story（01 / 02 / 03）：白カード 1320（枠 #e1e6e3、r10）、間に黒い点 3つ
   -------------------------------------------------------------------------- */
.p-story {
  position: relative;
  z-index: 1;
  margin-top: 60px;
}

.p-story__item + .p-story__item {
  position: relative;
  margin-top: 80px;
}

/* カード間の点（10px × 3、間隔 10px） */
.p-story__item + .p-story__item::before {
  content: "";
  position: absolute;
  top: -65px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--c-black);
  border-radius: 50%;
  box-shadow: 0 20px var(--c-black), 0 40px var(--c-black);
  transform: translateX(-50%);
}

.p-story__card {
  display: grid;
  grid-template-columns: minmax(0, 650px) minmax(0, 530px);
  justify-content: center;
  align-items: start;
  column-gap: 50px;
  padding: 40px 49px 59px 39px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
}

.p-story__text {
  min-width: 0;
  padding-left: 120px;
}

.p-story__head {
  margin-left: -120px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.p-story__num {
  flex: 0 0 100px;
  font-family: var(--ff-en);
  font-size: 5.625rem;
  font-weight: 200;
  line-height: 0.944444;
  letter-spacing: -0.02em;
}

/* 黒ピル 540×50：Oswald 22px（和文は本文と同じ Zen Kaku Gothic New）、B240 は Light 23px */
/* var(--ff-en) は末尾が sans-serif なので、続けて var(--ff-ja) を書いても和文は OS の標準フォントになる（Windows で「塚」が指定と違う字形になる）。そのため欧文は Oswald だけを書く */
.p-story__heading {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-height: 50px;
  padding: 0 10px 0 20px;
  color: var(--c-white);
  font-family: "Oswald", var(--ff-ja);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  background: var(--c-black);
  border-radius: var(--radius-pill);
}

.p-story__heading .u-en {
  margin: 0 2px 0 -2px;
  font-size: 1.4375rem;
  font-weight: 300;
  letter-spacing: 0;
}

.p-story__subheading {
  margin-top: 20px;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.57;
  letter-spacing: 0.05em;
}

.p-story__text p {
  max-width: 530px;
  margin-top: 20px;
  font-size: 1.125rem;
  line-height: 1.9;
  letter-spacing: 0.05em;
}

/* 段落の間は 15px（Figma） */
.p-story__text p + p {
  margin-top: 15px;
}

.p-story__text strong {
  font-weight: 500;
}

/* 図版 530×298（左右 265 の2枚）、r10 */
.p-story__figure {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  margin-top: 20px;
  aspect-ratio: 530 / 298;
  background: var(--c-placeholder);
  border-radius: var(--radius-card);
}

.p-story__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 03：グラデーションの地・製品・接地影を Figma から1枚の画像に書き出したもの（PC 6447:21728／SP 6447:24320） */
.p-story__figure--products {
  display: block;
  background: var(--c-white);
}

.p-story__figure--products picture {
  display: block;
  height: 100%;
}

.p-story__captions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
}

@media only screen and (max-width: 999px) {
  .p-story {
    margin-top: 50px;
  }

  .p-story__item + .p-story__item {
    margin-top: 38px;
  }

  .p-story__item + .p-story__item::before {
    top: -33px;
    width: 6px;
    height: 6px;
    box-shadow: 0 11px var(--c-black), 0 22px var(--c-black);
  }

  .p-story__card {
    grid-template-columns: 1fr;
    row-gap: 30px;
    padding: 20px 10px 20px;
    border: 0;
  }

  .p-story__head {
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }

  .p-story__num {
    flex: 0 0 auto;
    font-size: 3.75rem;
    line-height: 1;
    text-align: center;
  }

  .p-story__heading {
    justify-content: center;
    min-height: 44px;
    padding: 10px 20px;
    font-size: 1rem;
    text-align: center;
  }

  .p-story__heading .u-en {
    font-size: 1.0625rem;
  }

  .p-story__text {
    padding: 0 5px;
  }

  .p-story__subheading {
    margin-top: 20px;
    font-size: 1rem;
    letter-spacing: 0.04em;
  }

  .p-story__text p {
    margin-top: 15px;
    font-size: 0.875rem;
    line-height: 1.7;
  }

  .p-story__figure {
    margin: 0 5px;
  }

  .p-story__captions {
    margin: 10px 5px 0;
    font-size: 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   Links：base.css の .c-links
   -------------------------------------------------------------------------- */
.p-links {
  position: relative;
  z-index: 1;
  margin: 60px 0 85px; /* 下はフッターまで 85px（PRODUCTS と同じ。Figma：カード下 15px ＋ ページトップボタンの帯 70px） */
}

.p-links__deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 30px 40px rgb(0 0 0 / 15%));
}

.p-links__deco--jelly {
  top: -60px;
  left: -86px;
  width: 313px;
  transform: rotate(12deg);
}

.p-links__deco--drink {
  right: -120px;
  bottom: -100px;
  width: 247px;
  transform: rotate(-22deg);
}

@media only screen and (max-width: 999px) {
  .p-links {
    margin: 50px 0 210px; /* 下はフッターまで 210px（Figma：カード下 140px ＋ ページトップボタンの帯 70px） */
  }

  .p-links__deco--jelly {
    top: -100px;
    left: -30px;
    width: 132px;
  }

  .p-links__deco--drink {
    top: -110px;
    right: -50px;
    bottom: auto;
    width: 110px;
    transform: rotate(-16deg);
  }
}


.p-story__captions { overflow-wrap: anywhere; }
@media only screen and (max-width: 999px) {
  .p-ph .l-inner { width: calc(100% - 50px); }
}

/* Original foreground matrices; SP artwork sits beside the bottom of the link tiles. */
.p-links__deco--jelly { top: -4.027778cqw; bottom: auto; right: auto; left: -5.972222%; width: 21.702186%; transform: matrix(0.9775203, -0.210841, 0.210841, 0.9775203, 0, 0); transform-origin: 0 0; }
.p-links__deco--drink { top: 3.395514cqw; bottom: auto; right: auto; left: 90.949997%; width: 17.121880%; transform: matrix(0.9612618, 0.2756374, -0.2756377, 0.9612614, 0, 0); transform-origin: 0 0; }
@media only screen and (max-width: 999px) {
  .p-links__deco--jelly { top: calc(100% + -1.306658cqw); bottom: auto; right: auto; left: -7.999958%; width: 32.463875%; transform: matrix(0.9775203, -0.210841, 0.210841, 0.9775203, 0, 0); transform-origin: 0 0; }
}
@media only screen and (max-width: 999px) {
  .p-links__deco--drink { top: calc(100% + -12.240000cqw); bottom: auto; right: auto; left: 84.188548%; width: 29.314854%; transform: matrix(0.9612617, 0.2756374, -0.2756377, 0.9612614, 0, 0); transform-origin: 0 0; }
}

.p-story > .l-inner { position: relative; z-index: 1; }
@media only screen and (min-width: 1000px) {
  .p-story__item:nth-child(1) .p-story__card { min-height: 480px; }
  .p-story__item:nth-child(2) .p-story__card { min-height: 458px; }
  .p-story__item:nth-child(3) .p-story__card { min-height: 457px; }
}

/* The bottom packages belong to the page background, behind the story cards. */
@media only screen and (min-width: 1000px) {
  .p-story__item:nth-child(2) .p-story__card {
    padding-bottom: 52px;
  }

  .p-story__captions {
    line-height: 1.384615;
  }

  .p-feature-page {
    isolation: isolate;
  }

  .p-links {
    z-index: auto;
  }

  .p-links__deco {
    z-index: -1;
  }
}