@charset "UTF-8";
/* ==========================================================================
   pages/document.css — カタログ・資料（p-系）（SPD-v2）
   ========================================================================== */

.p-docFilter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-block: 3.2rem 4.8rem;

  & button {
    padding: 0.8rem 1.6rem;
    border: 1px solid var(--cl-ln-tag);
    background-color: var(--cl-wh);
    color: var(--cl-txt-sub);
    font-size: var(--fs-s);
    font-weight: 700;
    transition: background-color var(--ease-t), color var(--ease-t);

    &.is-active {
      border-color: var(--cl-navy);
      background-color: var(--cl-navy);
      color: var(--cl-wh);
    }
  }
}

/* 帯（.c-overlap）ごとに1つの資料グループ。絞り込みのときは帯ごと隠す */
.p-docBands > .c-overlap[hidden] { display: none; }

/* タブレット以下は従来どおり（帯の色分けなし・絞り込みで表示）。PC は帯を交互の色にして、左に固定の目次を出す */
.p-docBands > .c-overlap:nth-of-type(even) { background-color: transparent; }

.p-docBands > .c-overlap {
  padding-block: 0;

  & + .c-overlap { margin-block-start: 5.6rem; }
}

@media print, screen and (min-width: 1024px) {
  .p-docBands > .c-overlap {
    padding-block: 9.6rem;

    & + .c-overlap { margin-block-start: 0; }
    &:nth-of-type(even) { background-color: var(--cl-bggr); }
  }
}

/* 絞り込みのボタンは、PC では隠す（左の目次で移動する） */
.p-docFilter._sp {
  @media print, screen and (min-width: 1024px) { display: none; }
}

.p-docGroup-sub {
  margin-block: -0.8rem 1.6rem;
  color: var(--cl-gr);
  font-size: var(--fs-s);
}

/* 工法名のふりがな（見出し）。杭工事ページ（.p-method-title）と同じく、漢字の真上（行間の上半分）に置き、ルビの幅が本文を押し広げないよう幅は漢字1字ぶんのまま
   SP は見出しが小さく、ルビの最小 9px が相対的に大きくなるので、行間を広げてルビを行の上端に置く（漢字に重ならないように） */
.p-docGroup > .c-h3 {
  line-height: 2;

  @media print, screen and (min-width: 1024px) { line-height: 1.8; }

  & ruby {
    position: relative;
    display: inline-block;
  }

  & rt {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    translate: -50% 0;
    color: var(--cl-gold-dk);
    font-family: var(--ff-sans);
    font-size: max(0.3em, 9px);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;

    @media print, screen and (min-width: 1024px) { inset-block-start: 0.2em; }
  }
}

/* 工法名のふりがな（左の目次）。番号の列はあけて、工法名の下に小さく添える */
.p-docToc-yomi {
  grid-column: 2;
  margin-block-start: 0.2rem;
  color: var(--cl-gr);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* 資料カード（現行サイトと同じくサムネイル付き。トップの「よく読まれるカタログ」と同じ見た目） */
.p-docCards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;

  @media print, screen and (min-width: 640px) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.6rem;
  }

  /* PC は左に目次がある分、右の領域が狭いので、3列 → 4列 */
  @media print, screen and (min-width: 1024px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.4rem;
  }

  @media print, screen and (min-width: 1280px) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.p-docCard {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1rem;
  block-size: 100%;
  padding: 1rem;
  border: 1px solid var(--cl-ln-card);
  background-color: var(--cl-wh);
  transition: border-color var(--ease-t);

  /* 横長の資料も切らずに見せる */
  & figure {
    display: grid;
    place-items: center;
    aspect-ratio: 270 / 382;
    max-inline-size: 100%;
    overflow: hidden;
    background-color: var(--cl-bggr);
  }

  & figure img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    transition: scale var(--ease-t-slow);
  }

  @media (any-hover: hover) {
    &:hover {
      border-color: var(--cl-green-dk);
      opacity: 1;
    }

    &:hover figure img { scale: 1.04; }
  }

  @media print, screen and (min-width: 640px) {
    padding: 1.4rem 1.4rem 1.6rem;
  }
}

/* 資料名（下線でリンクと分かるように）＋右端に種類のアイコン */
.p-docCard-name {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.6;

  & span {
    text-decoration: underline;
    text-decoration-color: var(--cl-ln-tag);
    text-underline-offset: 0.3em;
    transition: text-decoration-color var(--ease-t);
  }

  @media print, screen and (min-width: 1024px) { font-size: 1.4rem; }
}

@media (any-hover: hover) {
  .p-docCard:hover .p-docCard-name span { text-decoration-color: currentColor; }
}

.p-docCard-icon {
  flex: 0 0 auto;
  inline-size: 2rem;
  block-size: 2rem;
}