/* wp-posts.css
   ブログ・事例・資料ダウンロード・検索結果・404 を WordPress に載せるための小さな追加。
   見本の base.css・layout.css・components.css・parts.css・pages/*.css は変えずに移してあるので、
   WordPress の都合で要る調整（見本に無い状態の余白・隠しフィールド）だけを、このファイルに書く。
   読み込みは inc/blog.php の of_posts_page_assets()（of_page_assets フィルター）。wp.css のあとに読む。
   書く決まりは見本と同じ: FLOCSS + BEM（p-<ページ>-）、従来のメディアクエリ、影・2px を超える角丸・ピル型・ホバーで浮く動きは使わない。

   1. 一覧の余白（検索結果・資料ダウンロードのページ送り、注目記事が無いブログの一覧のグリッド。ほかの余白は見本の pages/blog.css・case.css が決める）
   2. 事例詳細: 本文（エディタ）の補足、数字が無くグラフだけの成果の章
   3. 資料ダウンロードの詳細
   4. 404 */

/* ============================================================
   1. 一覧のページ送りの上の余白（見本の p-blog-pager・p-case-list__pagination と同じ 56px / SP 40px）
   ============================================================ */

.p-search-pager,
.p-download-pager {
  margin-top: 56px;
}

@media (max-width: 767.98px) {
  .p-search-pager,
  .p-download-pager {
    margin-top: 40px;
  }
}

/* ブログの一覧で、注目記事が無いとき（カテゴリ・タグなどの一覧と、投稿ページの2ページ目以降）は、
   記事のグリッドが見えない見出し（u-visually-hidden の h2）の直後に来る。見本の p-blog-grid は、
   注目記事の下に置く前提で上に 24px（SP は 32px）の余白を持つので、そのときだけ 0 にして、右のサイドバーの上端にそろえる */
.u-visually-hidden + .p-blog-grid {
  margin-top: 0;
}

/* ============================================================
   2. 事例詳細: 5章に入らない補足の説明（本文）、数字が無くグラフだけの成果の章
   章の「内容の列」にそろえる（見本の p-case-detail-visual と同じ。PC・タブレットは左に見出し・右に内容の2列）
   ============================================================ */

@media (min-width: 768px) {
  .p-case-detail-extra {
    grid-column: 2;
  }
}

/* 成果の章に数字が無く、グラフの図（c-case-detail__graph）だけのとき。見本は数字の下にグラフを置く前提で、図の上に 24px の余白を持つ。
   図が章の最初の要素のときは 0 にして、PC では左の見出しの上端に、SP では見出しとの間隔（章の gap）だけにそろえる */
.c-case-detail__body > .c-case-detail__graph:first-child {
  margin-top: 0;
}

/* ============================================================
   3. 資料ダウンロードの詳細
   ============================================================ */

/* 表紙（アイキャッチ。無いときは格子柄のタイル）。画像は 1px の枠・角丸 2px（c-prose の画像と同じ考え方） */
.p-download-cover > img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-m);
}

/* 説明（本文）。表紙との間をあける */
.p-download-body {
  margin-top: 32px;
}

/* ゲート（フォーム・完了・準備中）。エラーや完了で #download-form へ戻ったとき、固定ヘッダーの下に隠れない
   （base.css の [id] { scroll-margin-top } で足りるので、ここは幅が縮められるようにするだけ） */
.p-download-gate {
  min-width: 0;
}

/* 完了の表示は、中央にそろえる（チェックのアイコン・見出し・説明・ボタン） */
.p-download-ready {
  text-align: center;
}

/* ハニーポット（人間には見えず、読み上げにも出ない。ボットだけが入力する）。画面の外に出す */
.p-download-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================
   4. 404
   ============================================================ */

.p-notfound-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}