@charset "UTF-8";
/* ==========================================================================
   pages/pile.css — 杭工事・地盤改良工事（p-系）（SPD-v2）
   ページ上部の工法カード＋絞り込み（METHOD FINDER）
   型C：広いときは、左に固定の絞り込み・右に工法カード。狭いときは上下に積む（領域の幅で決める）
   ========================================================================== */

.p-finder {
  container-type: inline-size;

  /* カードが消えて配置が変わったとき、ブラウザがスクロール位置を勝手に補正して飛ぶのを防ぐ */
  overflow-anchor: none;
}

.p-finder-results { container-type: inline-size; }

.p-finder-filter {
  display: grid;
  gap: 1.6rem;
  margin-block-end: 3.2rem;
  padding: 2rem 1.6rem;
  border: 1px solid var(--cl-ln-card);
  background-color: var(--cl-card);

  @media print, screen and (min-width: 1024px) {
    gap: 2rem;
    padding: 2.8rem 3.2rem;
  }

  &[hidden] { display: none; }
}

.p-finder-hint {
  color: var(--cl-txt-mute);
  font-size: var(--fs-s);
}

.p-finder-group {
  display: grid;
  gap: 0.8rem;

  @media print, screen and (min-width: 640px) {
    grid-template-columns: 11rem 1fr;
    align-items: baseline;
  }
}

.p-finder-label {
  color: var(--cl-txt-sub);
  font-size: var(--fs-s);
  font-weight: 700;
}

.p-finder-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.p-finder-chip {
  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),
    border-color var(--ease-t),
    color var(--ease-t),
    scale 0.15s var(--ease-out);

  &:active { scale: 0.95; }

  @media (any-hover: hover) {
    &:hover:not(.is-active) {
      border-color: var(--cl-navy);
      color: var(--cl-navy);
    }
  }

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

.p-finder-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 2.4rem;
}

.p-finder-status {
  color: var(--cl-txt-mute);
  font-size: var(--fs-s);
}

.p-finder-clear {
  color: var(--cl-blue);
  font-size: var(--fs-s);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.3em;

  &[hidden] { display: none; }
}

.p-finder-grid {
  display: grid;
  align-content: start;   /* 高さをアニメーションしている間、行が余りを分け合ってカードが伸びないように */
  gap: 1.6rem;

  & > li[hidden] { display: none; }
}

/* 列数は、画面幅ではなく結果の領域の幅で決める（タブレットは rem が縮むので px で指定） */
@container (min-width: 560px) {
  .p-finder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 900px) {
  .p-finder-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.4rem;
  }
}

/* 絞り込みが使えて、領域が広いとき：左に固定の絞り込み（型Cの目次と同じ作り）・右に工法カード */
@container (min-width: 960px) {
  .p-finder.is-filterReady .p-finder-layout {
    display: grid;
    grid-template-columns: 24rem minmax(0, 1fr);
    align-items: start;
    gap: 6.4rem;
  }

  /* 画面の高さを超えるとき（縦の短いノートPC）は、パネルの中だけスクロールできる。
     フォーカスの枠が切れないよう、左右に余白を取って打ち消す */
  .p-finder.is-filterReady .p-finder-aside {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 2.4rem);
    max-block-size: calc(100svh - var(--header-h) - 4.8rem);
    margin-inline: -0.4rem;
    padding-inline: 0.4rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .p-finder.is-filterReady .p-finder-filter {
    gap: 0;
    margin-block-end: 0;
    padding: 0;
    border-width: 1px 0 0;
    border-color: var(--cl-green-dk);
    background-color: transparent;
  }

  .p-finder.is-filterReady .p-finder-hint { padding-block: 1.6rem; }

  .p-finder.is-filterReady .p-finder-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding-block: 2rem;
    border-block-start: 1px solid var(--cl-ln);
  }

  .p-finder.is-filterReady .p-finder-foot {
    padding-block-start: 2rem;
    border-block-start: 1px solid var(--cl-ln);
  }

  /* タグは縦一列のチェック付きの一覧に（押すと選択が切り替わる「絞り込み」だと分かる形） */
  .p-finder.is-filterReady .p-finder-chips {
    display: grid;
    gap: 0;
  }

  .p-finder.is-filterReady .p-finder-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 0.9rem 0;
    border: 0;
    background-color: transparent;
    color: var(--cl-txt-sub);
    font-size: 1.4rem;
    text-align: start;

    /* チェック枠 */
    &::before {
      content: "";
      flex: none;
      inline-size: 1.8rem;
      block-size: 1.8rem;
      border: 1px solid var(--cl-txt-mute);
      background-color: var(--cl-wh);
      transition: background-color var(--ease-t), border-color var(--ease-t);
    }

    /* チェックマーク（選択中だけ） */
    &::after {
      content: "";
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: 0.65rem;
      inline-size: 0.5rem;
      block-size: 0.9rem;
      border-inline-end: 2px solid var(--cl-wh);
      border-block-end: 2px solid var(--cl-wh);
      opacity: 0;
      rotate: 45deg;
      translate: 0 -65%;
      transition: opacity var(--ease-t);
    }

    &.is-active {
      background-color: transparent;
      color: var(--cl-navy);
      font-weight: 700;
    }

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

    &.is-active::after { opacity: 1; }
  }

  @media (any-hover: hover) {
    .p-finder.is-filterReady .p-finder-chip:hover:not(.is-active) { color: var(--cl-navy); }
    .p-finder.is-filterReady .p-finder-chip:hover:not(.is-active)::before { border-color: var(--cl-navy); }
  }
}

.p-finder-card {
  display: grid;
  grid-template-rows: auto 1fr;
  block-size: 100%;
  border: 1px solid var(--cl-ln-card);
  background-color: var(--cl-card);
  color: var(--cl-txt-mute);
  transition: border-color var(--ease-t);

  & figure {
    block-size: 18rem;
    overflow: hidden;

    @media print, screen and (min-width: 640px) { block-size: 22.7rem; }
  }

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

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

    &:hover img { scale: 1.05; }
  }
}

.p-finder-body {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 1.6rem;

  & h3 {
    color: var(--cl-green);
    font-family: var(--ff-serif);
    font-size: var(--fs-l);
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.75;
  }

  & p {
    font-size: 1.4rem;
    line-height: 1.7;

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

.p-finder-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.p-finder-empty {
  padding: 3.2rem 1.6rem;
  border: 1px solid var(--cl-ln-card);
  background-color: var(--cl-card);
  color: var(--cl-txt-mute);
  font-size: var(--fs-m);
  text-align: center;

  &[hidden] { display: none; }
}

/* ==========================================================================
   工法ブロック（/about/ の「5つの強み」と同じ、写真が画面の端まで広がる2カラム）
   ・写真は本文の高さに合わせて object-fit: cover。写真は常に右（工法を見比べやすいよう、2026-10-02 に左右交互をやめた）
   ・1023px以下は縦積み。文字はタブレットで rem が縮むので px を下限にする
   ========================================================================== */
/* 白いセクションが続くと上の余白が0になる（components の規則）ため、工法のセクションは区切りが分からなくなる。
   上下を揃えた余白に戻す */
.c-sec:not(._bg, ._dk) + .c-sec._method:not(._bg, ._dk) { padding-block-start: var(--sp-sec); }

.p-methods {
  margin-block-start: 4rem;

  /* 見出しを出さない（読み上げ用だけの）セクション */
  &._nohead { margin-block-start: 0; }

  @media print, screen and (min-width: 1024px) {
    margin-block-start: 6.4rem;
  }
}

.p-method {
  --gutter: max(var(--inner-pad), calc((100vw - var(--inner-max)) / 2));

  display: grid;
  scroll-margin-block-start: 4.8rem;   /* 目次・絞り込みカードから飛んだとき、見出しがヘッダーに隠れないように（表示アニメの移動ぶんも見込む） */

  & + .p-method { margin-block-start: 8rem; }

  @media print, screen and (min-width: 1024px) {
    grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);   /* 本文：写真 = 6：4 */

    & + .p-method { margin-block-start: 14rem; }
  }
}

.p-method-media {
  position: relative;
  aspect-ratio: 16 / 10;
  max-inline-size: 100%;
  overflow: hidden;

  & img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* PC：本文が長くても、写真はヘッダーの下に固定されたまま、ブロックの終わりまで付いてくる。
     contain: size で、写真の大きさに関係なく本文の高さにそろえる。overflow を切ると固定が効かないので visible にする */
  @media print, screen and (min-width: 1024px) {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: auto;
    min-block-size: 44rem;
    overflow: visible;
    contain: size;

    & img {
      position: sticky;
      inset-block-start: var(--header-h);
      block-size: min(100%, calc(100svh - var(--header-h)));
    }
  }
}

.p-method-body {
  display: grid;
  align-content: center;
  padding: 3.6rem var(--inner-pad) 0;

  & .c-list,
  & .c-text {
    font-size: max(1.5rem, 15px);
    line-height: 1.9;
    text-wrap: pretty;

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

  & .c-list { gap: 1.2rem; }

  & .c-text + .c-text { margin-block-start: 0; }

  & .c-facts {
    margin-block-start: 0.8rem;
    font-size: max(1.3rem, 13px);

    & div { grid-template-columns: max(9rem, 90px) 1fr; }

    & dd { text-wrap: pretty; }

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

  /* PC：本文の上端を写真の上端にそろえる（上の余白なし） */
  @media print, screen and (min-width: 1024px) {
    grid-column: 1;
    grid-row: 1;
    align-content: start;
    padding-block: 0 9.6rem;
    padding-inline: var(--gutter) clamp(3.2rem, 5vw, 8rem);
  }
}

/* 本文のまとまり（パンフレットの見出しまわりと同じ罫線）
   ・見出しと分類のすぐ左に、太い縦罫
   ・その罫の右端から、内容の一番下まで、細い縦罫が伸びる
   ========================================================================== */
.p-method-text {
  --rule-gap: 2.4rem;   /* 罫と文字の間 */

  position: relative;
  display: grid;
  gap: 1.6rem;
  padding-inline-start: var(--rule-gap);

  /* 細い縦罫（右端が、太い縦罫の右端と揃う） */
  &::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0.5rem;
    inline-size: 1px;
    background-color: var(--cl-ln-tag);
  }

  @media print, screen and (min-width: 1024px) {
    --rule-gap: 3.2rem;

    gap: 2.4rem;
  }
}

.p-method-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.6rem 2.4rem;
}

.p-method-headMain {
  position: relative;

  /* 太い縦罫（工法名と分類の高さぶん） */
  &::before {
    content: "";
    position: absolute;
    inset-block: 0.2rem;
    inset-inline-start: calc(var(--rule-gap) * -1);
    inline-size: 0.6rem;
    background-color: var(--cl-green);
  }
}

/* 分類（パンフでは工法名の下の一行。緑の太字） */
.p-method-sub {
  margin-block-start: 0.4rem;
  color: var(--cl-green);
  font-size: max(1.3rem, 13px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.6;

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

/* 枠つきのラベル（パンフの「国土交通大臣 認定鋼管杭」） */
.p-method-badge {
  flex: none;
  padding: 0.8rem 1.6rem;
  border: 1px solid var(--cl-txt);
  color: var(--cl-txt);
  font-size: max(1.3rem, 13px);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;

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

/* 工法名。ふりがな（ruby）は漢字の上に */
.p-method-title {
  color: var(--cl-key);
  font-family: var(--ff-serif);
  font-size: max(2.2rem, 22px);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.8;

  /* ふりがなは漢字の真上（行間の上半分）に置く。ルビの幅が本文を押し広げないよう、幅は漢字1字ぶんのまま */
  & ruby {
    position: relative;
    display: inline-block;
  }

  & rt {
    position: absolute;
    inset-block-start: 0.2em;
    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) {
    font-size: clamp(2.4rem, 1.95vw, 2.9rem);
  }
}

/* キャッチ（パンフでは緑の大きな明朝。工法名より大きい） */
.p-method-catch {
  color: var(--cl-green);
  font-family: var(--ff-serif);
  font-size: max(2rem, 20px);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.65;
  text-wrap: balance;
  word-break: auto-phrase;

  @media print, screen and (min-width: 1024px) { font-size: clamp(2.6rem, 2.2vw, 3.2rem); }
}

.p-method-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-block-start: 1.2rem;
}

/* 認定書・証明書の小さなサムネイル（本文の中。諸元の表のすぐ下） */
.p-method-certs { margin-block-start: 0.8rem; }

.p-method-certsTitle {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-block-end: 1.4rem;
  color: var(--cl-key);
  font-size: max(1.3rem, 13px);
  font-weight: 700;
  letter-spacing: 0.1em;

  &::after {
    content: "";
    flex: 1;
    block-size: 1px;
    background-color: var(--cl-ln-tag);
  }
}

/* 認定書・証明書は多くても3枚。スマホは2列、640px以上は3列（1枚の幅は最大 約20rem。少ないときは左に寄る） */
.p-certs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;

  @media print, screen and (min-width: 640px) {
    grid-template-columns: repeat(3, minmax(0, max(20rem, 160px)));
  }
}

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

  & figure {
    aspect-ratio: 5 / 7;
    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; }
  }
}

/* 証明書名（下線でリンクと分かるように）。ファイル種別のアイコンは、サムネの右上の角に小さく置く
   （名前の幅を取らないので、小さなサムネでも名前が途中で折れにくい） */
.p-cert-name {
  font-size: max(1.2rem, 12px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
  text-wrap: balance;
  word-break: auto-phrase;

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

  & img {
    position: absolute;
    inset-block-start: 1.2rem;
    inset-inline-end: 1.2rem;
    inline-size: max(2rem, 20px);
    block-size: max(2rem, 20px);
    padding: 0.2rem;
    background-color: var(--cl-wh);
  }

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

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

/* ==========================================================================
   左の目次（B×C ハイブリッドと同じ考え方）
   ・領域が広いとき（コンテナ 1200px 以上）だけ、工法の並びの左に目次を固定し、いま読んでいる工法を点灯する
   ・写真は画面の右端まで広げたまま、見出し・本文を目次ぶん右に寄せる
   ・狭いとき（タブレット・SP）は目次を出さず、従来どおり
   ========================================================================== */
.p-pileIndex {
  --gutter: max(var(--inner-pad), calc((100vw - var(--inner-max)) / 2));

  position: relative;
  container-type: inline-size;
}

.p-pileIndex > .p-pileToc { display: none; }

@container (min-width: 1200px) {
  .p-pileIndex > .p-pileToc {
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--gutter);
    z-index: 1;
    display: block;
    inline-size: 22rem;
    padding-block: var(--sp-sec);
    pointer-events: none;

    & ol {
      position: sticky;
      inset-block-start: calc(var(--header-h) + 4rem);
      max-block-size: calc(100svh - var(--header-h) - 8rem);
      overflow-y: auto;
      pointer-events: auto;
    }

    & a { font-size: 1.3rem; }
  }

  /* 見出し・品質管理の中身と、工法ブロックの本文を目次ぶん右へ */
  .p-pileIndex .c-sec > .u-inner { padding-inline-start: calc(var(--inner-pad) + 22rem + 5.6rem); }

  .p-pileIndex .p-method { grid-template-columns: minmax(0, 13fr) minmax(0, 7fr); }

  .p-pileIndex .p-method-body { padding-inline-start: calc(var(--gutter) + 22rem + 5.6rem); }
}