/* ==========================================================================
   pages/column.css — 06-page-column.md / Figma 2934:9752(一覧) 2935:11070(詳細)
   ========================================================================== */

/* ---- 共通: カテゴリチップ列の上マージン ---- */
.p-column-cats { padding: 40px 0 8px; }

/* ================= 一覧(archive) ================= */
.p-archive { padding: 40px 0 72px; }
.p-archive__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 34px;
  margin-top: 8px;
}
.p-archive__grid .c-column-card { width: 100%; }
.p-archive__grid .c-column-card__title { width: 100%; }
.p-archive__pager {
  text-align: right; margin-top: 40px;
  /* Figma Yu Gothic D 16/lh30→Noto中間500 */
  font-family: var(--font-body); font-weight: 500; font-size: 16px;
  line-height: 30px; letter-spacing: 1px; color: var(--color-ink);
}
.p-archive__pager a { color: var(--color-ink); padding: 0 6px; }
.p-archive__pager a.is-current { color: var(--color-main); font-weight: 700; }

/* ================= 詳細(single) ================= */
.p-article { padding: 32px 0 64px; }
.p-article__inner { max-width: 800px; margin-inline: auto; }
.p-article__divider { width: 100%; height: 1px; background: var(--color-sub); margin-bottom: 40px; }
.p-article__cat {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 100px; height: 28px; padding: 0 12px; border-radius: 14px;
  background: var(--color-gray245);
  font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--color-ink);
}
.p-article__h1 {
  font-family: var(--font-jp); font-weight: 700; font-size: 24px;
  line-height: 40px; letter-spacing: .5px; color: var(--color-ink); margin: 20px 0;
}
.p-article__lead {
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  line-height: 30px; color: var(--color-ink);
}
/* 見出し帯（h2に生成り背景） */
.p-article__h2 {
  width: 100%; min-height: 60px; display: flex; align-items: center;
  background: var(--color-bg-soft); padding: 12px 20px; margin: 48px 0 24px;
  font-family: var(--font-jp); font-weight: 700; font-size: 20px;
  line-height: 30px; color: var(--color-ink);
}
.p-article__block { display: grid; grid-template-columns: 410px 1fr; gap: 28px; align-items: start; }
.p-article__text {
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  line-height: 30px; color: var(--color-ink);
}
.p-article__img {
  width: 100%; min-height: 271px; background: var(--color-gray180) center/cover no-repeat;
}
.p-article__body {
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  line-height: 30px; color: var(--color-ink);
}
/* 箇条書き「・項目」＝Figma Yu Gothic B（太字・15px） */
.p-article__li { font-family: var(--font-jp); font-weight: 700; }
/* 本文中のリンク（お問い合わせ導線） */
.p-article__body a, .p-article__lead a, .p-article__text a {
  color: var(--color-main); text-decoration: underline; text-underline-offset: 3px;
}

/* ---- 支給コラム4本（2026-08-22）で足した部品 ---------------------------- */
/* 小見出し＝原稿の ■／数字見出し／太字行。h2の生成り帯より1段軽い扱い */
/* 0831修正・お役立ちコラム2「H3のタイトルは装飾をトル。H3をまとめるラベル（セクションタイトル）を作ってください」
   見本（Figma col5 y=11207〜11460）の階層:
     セクションタイトル … #EDEBE5 の帯 20px/700（= .p-article__h2・既存のまま）
     まとめラベル       … 左に 5x30 の #9E9B7C バー・18px/700（= .p-article__label・今回新設）
     H3（連番見出し）   … 装飾なし・18px/700
   「■」で始まる見出しをまとめラベルに付け替えてある。 */
.p-article__h3 {
  font-family: var(--font-jp); font-weight: 700; font-size: 18px; line-height: 30px;
  color: var(--color-ink); margin: 28px 0 8px;
}
.p-article__label {
  position: relative;
  font-family: var(--font-jp); font-weight: 700; font-size: 18px; line-height: 30px;
  color: var(--color-ink); margin: 32px 0 10px;
  padding-left: 14px;
}
.p-article__label::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 30px;
  background: var(--color-sub); /* 見本実測 #9E9B7C */
}
.p-article__body + .p-article__h3 { margin-top: 24px; }
/* 原稿の ✓POINT 行 */
/* 0831修正・お役立ちコラム2「ポイントの背景色変更」
   見本実測: 帯 800x60・地 #50694B・文字 #FFFFFF 18px/700（左の緑バーは見本に無いので外す） */
.p-article__point {
  display: flex; align-items: center; min-height: 60px;
  background: var(--color-main);
  padding: 12px 20px; margin: 24px 0;
  font-family: var(--font-jp); font-weight: 700; font-size: 18px; line-height: 30px;
  color: var(--color-white);
}
/* 本文中の写真。--pending は「原稿が写真を前提にしているが実写真が未受領」の枠 */
.p-article__figure { margin: 24px 0; }
/* 原稿が「1枚目／2枚目」と書いている箇所は2枚並び。縦位置は中央で揃える。
   縦写真が来ても記事を占領しないよう高さに上限を置き、幅は自動（横写真は上限に当たらない） */
.p-article__figrow { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; }
.p-article__figure--pair .p-article__figrow { grid-template-columns: 1fr 1fr; }
/* 0831修正・お役立ちコラム1: キャプションが左揃えなのに写真だけ中央だったので、写真も左揃えに揃える。
   （中央寄せは弊社の実装判断で、Figma・設計書に図版の揃えの指定は無い。金谷さん確認のうえ左揃えで確定） */
.p-article__figrow img {
  display: block; margin-inline: 0;
  max-width: 100%; max-height: 520px; width: auto; height: auto;
}
.p-article__ph {
  display: flex; align-items: center; justify-content: center;
  /* 実写真が入るまでの仮枠。16:9で全幅にすると空白が記事を支配するので、height を抑えている */
  width: 100%; height: 200px;
  background: var(--color-gray245); border: 1px dashed var(--color-gray180);
  font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--color-gray153);
}
.p-article__caption {
  font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 24px;
  color: var(--color-gray153); margin-top: 8px;
}
/* 工程内の補足注釈＝Figma 14px */
.p-steps__note { font-size: 14px; }

/* 工程ステップ×9 */
.p-steps { display: grid; gap: 0; }
.p-steps__item { display: grid; grid-template-columns: 1fr 260px; gap: 28px; padding: 24px 0; align-items: start; }
.p-steps__item--nothumb { grid-template-columns: 1fr; }
.p-steps__num {
  font-family: var(--font-jp); font-weight: 700; font-size: 18px;
  color: var(--color-ink); padding-bottom: 10px;
  border-bottom: 1px solid var(--divider-line); margin-bottom: 14px;
}
.p-steps__text {
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  line-height: 30px; color: var(--color-ink);
}
.p-steps__thumb { width: 260px; height: 195px; background: var(--color-gray180) center/cover no-repeat; }

/* 関連する記事 */
.p-related { padding: 8px 0 56px; }
.p-related__title {
  font-family: var(--font-jp); font-weight: 700; font-size: 20px;
  color: var(--color-ink); margin-bottom: 24px;
}
.p-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.p-related__grid .c-column-card { width: 100%; }
.p-related__grid .c-column-card__title { width: 100%; }

@media (max-width: 900px) {
  .p-archive__grid { grid-template-columns: repeat(2, 1fr); }
  .p-related__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .p-archive__grid { grid-template-columns: 1fr; }
  .p-article__block { grid-template-columns: 1fr; gap: 14px; }
  .p-steps__item { grid-template-columns: 1fr; gap: 12px; }
  .p-steps__thumb { width: 100%; }
}

/* --------------------------------------------------------------------------
   SP（Figma SPフレーム実測・2026-08-23）
   実測(1x): カテゴリチップ列に **「Category」ラベルは無い**（緑の要素が0件）
             記事タイトル h1 = 字面17・行送り32 → 18px/lh32（PCは24px/lh40）
             リード・本文 = 字面14・行送り26（現行30）
   ⚠️ 記事の**文言はFigmaより弊社が新しい**（NENGO支給4本）。寸法と揃えだけ合わせる。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .c-category-tabs__label { display: none; }
  .p-article__h1 { font-size: 18px; line-height: 32px; }
  .p-article__lead,
  .p-article__text,
  .p-article__li { line-height: 26px; }
}