/* ==========================================================================
   pages/case.css — 05-page-case.md / Figma 3037:838 写経（事例詳細1件）
   ⚠️ 本文はプレースホルダ多数＝実原稿差し替え前提（10未確定表）
   ========================================================================== */

/* 事例バナー */
.p-case-banner {
  width: 100%; background: var(--color-bg-soft);
  padding: 44px 20px; text-align: center; margin-top: 48px;
}
.p-case-banner__num {
  font-family: var(--font-en); font-weight: 700; font-size: 24px;
  letter-spacing: 2.4px; color: var(--color-ink);
}
.p-case-banner__title {
  font-family: var(--font-jp); font-weight: 700; font-size: 30px;
  line-height: 56px; letter-spacing: 1.5px; color: var(--color-ink);
  max-width: 896px; margin: 14px auto 0;
}
.p-case-banner__tag {
  font-family: var(--font-jp); font-weight: 700; font-size: 20px;
  letter-spacing: 2px; color: var(--color-ink); margin-top: 12px;
}

/* 悩み種別リンク列 */
.p-case-nav { padding: 40px 0 8px; }
.p-case-nav__list {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  font-family: var(--font-jp); font-weight: 600; font-size: 12px;
}
.p-case-nav__list a {
  color: var(--color-ink); display: inline-flex; align-items: center; gap: 6px;
}
.p-case-nav__list a::after { content: ">"; }
.p-case-nav__list a.is-current { color: var(--color-main); text-decoration: underline; }

/* 事例本文（ラベル式） */
/* 0901修正・事例紹介4「『結果』のところのアキを正ス。」
   各ブロックは padding:28px 0 ＋ 上罫なので、ブロック間は罫の上下とも28pxで均等。
   ところが最後の「結果」だけは、下の罫（＝ポイントの border-top）までに
   28（自分の下padding）＋40（p-case-body の下padding）＋8（p-case-point の上padding）＝**76px** 空いていた。
   上29px に対して下76px。この下側の余分（40＋8）を落として、上下とも28pxに揃える。 */
.p-case-body { padding: 24px 0 0; }
.p-case-block {
  display: grid; grid-template-columns: 180px 1fr; gap: 32px;
  padding: 28px 0; border-top: 1px solid var(--color-main);
  /* 0831修正・事例紹介2「項目は上下センターソロエに。以下同。」 */
  align-items: center;
}
.p-case-block__label {
  font-family: var(--font-jp); font-weight: 700; font-size: 20px;
  letter-spacing: 2px; color: var(--color-main);
}
.p-case-block__text {
  font-family: var(--font-jp); font-weight: 600; font-size: 15px;
  line-height: 30px; letter-spacing: .3px; color: var(--color-ink);
}
/* 本文ブロック内の段落／注記／箇条書き（2026-08-08 NENGO実原稿の構造に対応） */
.p-case-block__text > * + * { margin-top: 14px; }
/* 0831修正・事例紹介2「※の文章はテキストの色をRBG120（グレー）に変更」＝ rgb(120,120,120) */
.p-case-block__note { font-size: 13px; line-height: 26px; color: #787878; }
/* 原稿内の連番見出し（CASE4「1. 耐火被覆材の吹付補修」等） */
.p-case-block__step { font-weight: 700; color: var(--color-main); }
.p-case-block__list { display: grid; gap: 4px; }
.p-case-block__list li { list-style: none; position: relative; padding-left: 18px; }
.p-case-block__list li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-main);
}

/* 事例の締め文（実原稿の末尾段落） */
/* 0901修正・事例紹介4「ポイントの下のカコミと文字大きさを見本に合わせる。事例01〜06まで同様に。」
   見本の実測（0901 zip のテキストレイヤー実寸・同一スケール内の比で判定）:
     ・地色 = rgb(80,105,75) = #50694B（＝--color-main）／文字 = 白。弊社は生成り地に黒だった
     ・文字の大きさ: カコミ本文 [55] 2053x107（2行=行送り53.5）／結果本文 [53] 1737x89（2行=行送り44.5）
       → カコミは本文の **1.20倍**。弊社は両方 15px/lh30 で同寸だったので 18px/lh36 に上げる */
.p-case-closing { padding: 0 0 48px; }
.p-case-closing__text {
  font-family: var(--font-jp); font-weight: 600; font-size: 18px;
  line-height: 36px; letter-spacing: .3px; color: var(--color-white);
  background: var(--color-main); padding: 24px 28px;
}

/* ポイント */
/* 0831修正・事例紹介3「結果の下の線を右に合わせる。ポイントの下の線とまとめ文言を右に合わせて。他も同様」
   実測: この罫だけ 0〜1440 の全幅で、他の罫と まとめ box（いずれも 170〜1270）と揃っていなかった。
   セクションは全幅のまま、罫を内側(l-inner 1100)へ移す。 */
.p-case-point {
  /* 0901修正・事例紹介4: 上の 8px は「結果」の下のアキに足し込まれていたので落とす（上記 .p-case-body 参照） */
  padding: 0 0 48px; margin-top: 0;
}
.p-case-point__inner {
  display: grid; grid-template-columns: 180px 1fr; gap: 32px; padding-top: 28px;
  border-top: 1px solid var(--color-main);
  /* 2026-09-02 前田社長指示: ポイントと締め文カコミの間にも、対応/結果ブロック間と同じ下線を入れる。
     アキも上下対称にする（上＝border 1px＋padding 28px＝29px。実測で結果ブロックの上のアキと同値）。 */
  padding-bottom: 28px;
  border-bottom: 1px solid var(--color-main);
  /* 0831修正・事例紹介2「項目は上下センターソロエに」＝ポイントのラベルも同じ扱い */
  align-items: center;
}
.p-case-point__label {
  font-family: var(--font-jp); font-weight: 700; font-size: 20px;
  letter-spacing: 2px; color: var(--color-main);
}
.p-case-point__title {
  font-family: var(--font-jp); font-weight: 700; font-size: 20px;
  line-height: 32px; color: var(--color-ink); margin-bottom: 18px;
}
.p-case-point__list { display: grid; gap: 14px; }
.p-case-point__list li {
  list-style: none; position: relative; padding-left: 34px;
  font-family: var(--font-jp); font-weight: 700; font-size: 20px;
  line-height: 30px; color: var(--color-ink);
}
.p-case-point__list li::before {
  /* 0831修正・事例紹介3「チェックマークは現状で良いが、上下センターが少しズレている」
     本文 20px / 行送り 30px の1行目の中心は 15px。丸22pxの中心を合わせる → top = 15-11 = 4px = .2em */
  content: ""; position: absolute; left: 0; top: .2em;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-main);
}
.p-case-point__list li::after {
  content: ""; position: absolute; left: 7px; top: .57em; /* 丸を .35em→.2em 上げたぶん追従（差 7.4px を維持） */
  width: 9px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

@media (max-width: 767px) {
  .p-case-banner__title { font-size: 22px; line-height: 38px; }
  .p-case-block { grid-template-columns: 1fr; gap: 10px; }
  .p-case-point__inner { grid-template-columns: 1fr; gap: 12px; }
  .p-case-point__list li { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   SP（Figma SPフレーム実測・2026-08-23）
   ⚠️ 事例の**文言はFigmaより弊社が新しい**（2026-08-08 NENGO実原稿）。
      Figma SPフレームは旧タイトル＋ダミー本文なので、**寸法と揃えだけ**合わせる。
   実測(1x): CASE英字 ink幅109 → 36px（現行48pxはSP指定が詳細度で負けていた）
             バナー見出し 字面22.5・行送り45 → 24px/lh45・中央
             本文 行送り26（現行30）／種別リンク 行送り20
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .p-case-banner__title { font-size: 24px; line-height: 45px; }
  .p-case-block__text,
  .p-case-closing__text { line-height: 26px; }
  .p-case-nav__list { line-height: 20px; }
}