@charset "utf-8";
/* =====================================================================
   章バーと章の帯（index.html・slapp.html、2026-10-05）
   2026-10-06 からフッターの調整も置く（paper.css の後に読む、この2ページ用の上書き層）。
   column-pnx-wamnet2026.html と同じ部品（assets/css/site-chapters.css）を使う。
   paper.css の後に読む。題（背景画像・雨）はこれまでどおり中央の幅に置き、
   章の帯だけを .site-chapter--bleed で画面の端まで描く。紙の枠（白い面）はやめる。
   ===================================================================== */
html.site-chapters-page--report {
  --site-chapterbar-h: 58px;
  scroll-padding-top: calc(var(--site-chapterbar-h) + 16px);
}

@media (max-width: 640px) {
  html.site-chapters-page--report { --site-chapterbar-h: 52px; }
}

html.site-theme--ledger.report-page--ledger.site-chapters-page--report .page-container {
  margin-top: 0;
  padding-bottom: 0;
}

/* 紙の枠の線は、上だけでなく左右と下も消す（paper.css の側の指定に頼らない） */
html.site-theme--ledger.report-page--ledger.site-chapters-page--report .article-card {
  border: 0;
  background: transparent;
}

html.site-theme--ledger.report-page--ledger.site-chapters-page--report .content-wrapper {
  padding-inline: 0;
}

html.site-theme--ledger.report-page--ledger.site-chapters-page--report .article-body {
  max-width: none;
  margin: 0;
}

html.site-theme--ledger.report-page--ledger.site-chapters-page--report .article-body section.site-chapter {
  margin: 0;
}

html.site-theme--ledger.report-page--ledger.site-chapters-page--report .site-chapter__body > :first-child {
  margin-top: 0;
}

/* report.css の「header」全体の角丸を、章バーには効かせない */
html.site-chapters-page--report .site-chapterbar {
  border-radius: 0;
}

/* 記事内目次の帯（旧「レポートの目次」の位置）。id は report.js のため report-index のまま。
   report.css の #report-index（画面の上に付いてくる指定）は外す */
html.site-chapters-page--report #report-index.site-toc {
  position: static;
  z-index: auto;
}

html.site-theme--ledger.report-page--ledger.site-chapters-page--report .site-toc-band {
  margin-top: 32px;
  border-top: 1px solid var(--site-line);
}

html.site-theme--ledger.report-page--ledger.site-chapters-page--report .site-toc-band__inner {
  padding-inline: 0;
}

html.site-theme--ledger.report-page--ledger.site-chapters-page--report .site-toc a {
  color: var(--site-ink);
}

/* フッターの「SHARE」の文字を、下のボタンと同じく中央へ。
   paper.css の見出しの書体の指定（.page-title, .footer-title, … ）が左揃えも決めているため */
html.site-theme--ledger.report-page--ledger .footer-title {
  text-align: center;
}

@media (max-width: 820px) {
  html.site-theme--ledger.report-page--ledger.site-chapters-page--report .page-container {
    width: 100%;
  }
}

@media print {
  html.site-theme--ledger.report-page--ledger.site-chapters-page--report .site-chapter--bleed {
    border-image: none;
    border-top: 1px solid #000;
  }
}

/* ---------------------------------------------------------------------
   トップの入口「パーソルネクステージについて、ここで確かめられること」
   （index.html、2026-10-08）。題字のすぐ下・新着の前に置き、会社名で来た人を
   サイト独自の検証結果と根拠のページへ案内する。
   規約どおり @layer components と @scope で書く。このサイトのほかの CSS は層を使っていないため、
   層の外の全体指定が必ず勝つ（report.css の h1〜h6 の太さと *+h2〜h4 の上の余白、
   site-common.css の h1〜h3 の書体、base.css の p・ul の余白、report.css の p+p）。
   そこで、余白は margin ではなく親の gap で取り、見出しは入れ物の先頭の子に置き、
   リンク群は p ではなく ul にしている。見出しの h3 は全体指定で明朝・太字になる。
   線は border ではなく box-shadow（内側・ぼかしなし）で描く。base.css の *, ::before, ::after が
   border-width: 0 を層の外で指定していて、層の中の border は必ず消えるため。
   --------------------------------------------------------------------- */
/* 層の順番。site-common.css の先頭でも宣言するが、このファイルのほうが先に読まれるため、ここでも同じ順番で宣言する */
@layer foundation, layout, components, utilities;

@layer components {
  @scope (.report-overview) {
    :scope {
      container-type: inline-size;
      display: grid;
      gap: calc(var(--site-space-unit) * 4);
      margin: calc(var(--site-space-unit) * 5) var(--paper-gutter) 0;
      padding: calc(var(--site-space-unit) * 4) var(--site-gutter);
      color: var(--site-ink);
      text-align: left;
      background: var(--site-sheet);
      box-shadow: inset 0 3px 0 var(--site-accent), inset 0 0 0 1px var(--site-line);
    }

    .heading {
      margin: 0;
      color: var(--site-heading);
      font: 800 var(--site-heading-size-2)/var(--site-heading-leading) var(--site-serif);
    }

    .about {
      display: grid;
      gap: calc(var(--site-space-unit) * 3);
    }

    .block {
      display: grid;
      align-content: start;
      gap: var(--site-space-unit);
    }

    .results {
      display: grid;
      gap: var(--site-space-unit);
      padding-top: calc(var(--site-space-unit) * 4);
      box-shadow: inset 0 1px 0 var(--site-line);
    }

    .label {
      margin: 0;
      color: var(--site-accent);
      font-size: var(--site-body-size-small);
      line-height: var(--site-heading-leading);
    }

    .note {
      margin-inline-start: var(--site-space-unit);
      color: var(--site-muted);
      font-size: var(--site-body-size-small);
      font-weight: 400;
    }

    .text {
      font-size: var(--site-body-size);
      line-height: var(--site-body-leading);
    }

    .finding {
      display: grid;
      gap: var(--site-space-unit);
      padding-block: calc(var(--site-space-unit) * 3);
      box-shadow: inset 0 1px 0 var(--site-line-soft);

      &:first-child {
        padding-top: var(--site-space-unit);
        box-shadow: none;
      }

      &:last-child {
        padding-bottom: 0;
      }
    }

    .name {
      margin: 0;
      color: var(--site-heading);
      font-family: var(--site-serif);
      font-size: var(--site-heading-size-3);
      line-height: var(--site-heading-leading);

      & .note {
        display: inline-block;
        font-family: var(--site-sans);
      }
    }

    .links {
      display: flex;
      flex-wrap: wrap;
      gap: var(--site-space-unit) calc(var(--site-space-unit) * 3);
      font-size: var(--site-body-size-small);
    }

    @container (min-width: 720px) {
      .about {
        grid-template-columns: 1fr 1fr;
        gap: calc(var(--site-space-unit) * 5);
      }

      .finding {
        grid-template-columns: 1fr 3fr;
        column-gap: calc(var(--site-space-unit) * 4);

        & > .name {
          grid-row: span 2;
        }

        & > .name .note {
          display: block;
          margin-inline-start: 0;
        }
      }
    }
  }
}