/* =========================================================
   case.css — 実績一覧（case/index.html）と事例記事（case/<id>/）
   読み込み順：main.css → 各ページの \3c style> → renewal.css → このファイル
   ---------------------------------------------------------
   1. 共通：タグ（.r-tags）・要約ボックス（.r-summary）
   2. 実績一覧（p-case*）
   3. 事例記事（p-casePost* ほか記事内のコンポーネント）
   ========================================================= */

/* ---------- 1. 共通 ---------- */
/* 1-1 タグ：企業規模・課題などを後から入れるための小さな角丸ピル
   使い方：<ul class="r-tags"><li>従業員100名未満</li><li>リード獲得</li></ul>
   （span / a を並べてもよい。中身が空なら表示しない） */

/* 1-2 要約ボックス：記事冒頭に置く「状況／やったこと／成果」 */
.r-summary{margin:40px 0 0;padding:28px 32px 24px;background:var(--color-bg-subtle);border-radius:var(--r-card);color:var(--color-text)}
.r-summary__label{margin:0 0 14px}
.r-summary__list{margin:0}
.r-summary__list > div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:4px 20px;padding:16px 0;border-top:1px solid var(--color-line)}
.r-summary__list dt{font-family:var(--font-copy);font-size:var(--fs-14);font-weight:var(--fw-bold);line-height:1.9}
.r-summary__list dd{margin:0;font-size:var(--fs-14);line-height:1.9;color:var(--color-text)}
.r-summary__list dd ul{margin:0;padding:0;list-style:none}
.r-summary__list dd li{position:relative;padding-left:1em}
.r-summary__list dd li::before{content:"";position:absolute;left:0;top:.95em;width:5px;height:5px;margin-top:-2px;border-radius:50%;background:var(--color-bg-muted)}
.r-summary__list b{font-family:var(--font-num);font-weight:var(--fw-bold);color:var(--color-text)}
.r-summary__list .is--result dd{color:var(--color-text);font-weight:var(--fw-regular)}
@media(max-width:599px){
  .r-summary{padding:22px 20px 18px}
  .r-summary__list > div{grid-template-columns:1fr;gap:2px;padding:14px 0}
}

/* ---------- 2. 実績一覧 ---------- */
/* 2-1 数字＋ロゴ（TOP「実績」と同じ見せ方） */

/* 2-2 種類ごとの件数（各セクションへのリンク。hero の下）：見た目と下の空きは components.css の .c-anchorNav と線のタブ（.c-lineTabs.is--strong） */
/* 2 つで全幅（2 列）。名前と件数は横に並べる。.c-lineTabs（4 列）に負けないよう、2 つのクラスで指定する */
.c-lineTabs.p-caseTypes{grid-template-columns:repeat(2,minmax(0,1fr))}
.p-caseTypes__row{display:flex;align-items:baseline;gap:12px}
.p-caseTypes__row .c-lineTab__sub{margin-top:0}
@media(max-width:599px){.c-lineTabs.p-caseTypes{grid-template-columns:1fr}}
/* アンカーで飛んだとき、セクションの見出しの上端を画面の上から 80px に（セクションの上の余白 PC 80px・767px 以下 64px を差し引く） */
#interview,#message{scroll-margin-top:0}
@media(max-width:767px){#interview,#message{scroll-margin-top:16px}}

/* 2-3 セクション見出しの件数 */
.p-case__count{display:inline-block;margin-left:14px;font-family:var(--font-copy);font-size:var(--fs-14);font-weight:var(--fw-bold);letter-spacing:var(--tracking);color:var(--color-text);vertical-align:middle}

/* 2-4 インタビュー：カード（白セクション上のグレーの面） */
.p-case__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px}
@media(max-width:1023px){.p-case__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:639px){.p-case__grid{grid-template-columns:1fr}}

/* 2-5 匿名ケース：カード（グレーセクション上の白い面） */

/* 2-6 推奨メッセージ：カード（段組み） */

/* 2-7 ページ送り */
[data-paginate] > [hidden]{display:none!important}
.p-case__pager{display:flex;align-items:center;justify-content:center;gap:16px;margin:40px 0 0}
.p-case__pager[hidden]{display:none}
.p-case__pagerNum{min-width:64px;text-align:center;font-family:var(--font-num);font-size:var(--fs-14);font-weight:var(--fw-bold);color:var(--color-text);font-variant-numeric:tabular-nums}
@media(max-width:399px){.p-case__pager{gap:10px}}

/* 2-8 CTA帯 */
.p-case.l-layout__content{padding-bottom:0}

/* ---------- 3. 事例記事 ---------- */
/* 3-1 ページ上部（パンくず → Interview → 会社名 → キャッチ＋タイトル） */
.p-casePost__pageHead{padding-bottom:44px}
.p-casePost__client{margin:0 0 12px;font-size:var(--fs-14);font-weight:var(--fw-regular);line-height:1.6;color:var(--color-text)}
.p-casePost__heading{max-width:960px}
.p-casePost__catch{display:block;line-height:1.38;word-break:auto-phrase;text-wrap:balance}
.p-casePost__name{display:block;margin-top:8px;font-size:var(--fs-heading-4);font-weight:var(--fw-bold);line-height:1.7;letter-spacing:var(--tracking);color:var(--color-text);word-break:auto-phrase}
@media(max-width:599px){.p-casePost__pageHead{padding-bottom:32px}}

/* 3-2 レイアウト */
.p-casePost__wrap{padding-top:0}
.p-casePost__main{min-width:0}
.p-casePost__thumbnail{margin-top:0;padding-bottom:62.5%;overflow:hidden;border-radius:var(--r-card);background:var(--color-bg-hover)}

/* 3-3 本文（読みやすさ優先：16px／行間2／最大760px） */
.p-casePost__content{margin-top:48px;color:var(--color-text)}
.p-casePost__content p{font-size:var(--fs-16);line-height:2}
.p-casePost__content > p{margin:0 0 28px}
.p-casePost__content > p:empty{display:none}
.p-casePost__content strong{font-weight:var(--fw-bold)}
.p-casePost__content h2{background:none;color:var(--color-text);
  font-family:var(--font-copy);font-weight:var(--fw-bold);line-height:1.55;letter-spacing:var(--tracking);word-break:auto-phrase}
.p-casePost__content h3{margin:48px 0 20px;padding-left:0;border-left:0;font-family:var(--font-copy);font-weight:var(--fw-bold);line-height:1.6}
.p-casePost__content h4{font-family:var(--font-copy);font-weight:var(--fw-bold)}
.p-casePost__content figure{margin:40px 0}
.p-casePost__content figure img{height:auto;border-radius:var(--r-card)}
.p-casePost__content figcaption{margin-top:12px;font-size:var(--fs-13);line-height:1.6;color:var(--color-text)}

/* 3-4 記事末の CTA 帯 */

/* 3-5 著者情報：共通の部品 AuthorCard に移した（見た目は components.css の .p-mediaAuthor） */

/* 3-6 シェア */

/* 3-7 関連する実績 */
.p-caseRelated{padding-top:0;border-top:0}
/* シェアの欄から線までは、記事詳細と同じ 88px */
.p-casePost__infoSection.is--related{margin-top:88px}
/* 上の線は記事詳細の「関連する記事」と同じ（main.css の .p-mediaDetail__relatedTitle） */
.p-caseRelated__title{padding-top:48px;border-top:var(--border-strong);font-family:var(--font-copy);font-weight:var(--fw-bold);letter-spacing:var(--tracking)}
.p-caseRelated__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:36px}
@media(max-width:959px){.p-caseRelated__list{grid-template-columns:minmax(0,1fr)}}
.c-arrowLink{border-radius:var(--r-pill)}

/* 3-8 サイドバー（PICK UP・ボタン） */
.p-casePost__asideContent{overflow:hidden;border:0;border-radius:var(--r-card);background:var(--color-bg-subtle)}
.p-casePost__asideTitle{padding:20px 20px 12px}
.p-casePost__asideItem{padding:14px 20px;border-top:1px solid var(--color-line);font-size:var(--fs-13);line-height:1.7;text-align:left;color:var(--color-text)}
.p-casePost__asideItem:hover{background:var(--color-bg-hover)}

/* 本文中の画像が幅指定（width属性）で画面からはみ出さないように */
.p-casePost__content img{max-width:100%;height:auto}

/* 総点検：本文より小さすぎた文字をTOPの基準（本文14.5〜15px）に寄せる */
.p-casePost__asideItem{font-size:var(--fs-14);line-height:1.7}

/* 3-9 サイドバー：幅・固定位置は cms-content.css（記事詳細と共通） */

/* 3-10 タイトルエリアを記事カラムの中へ */
.p-casePost__wrap{padding-top:32px}
.p-casePost__main > .p-casePost__pageHead{padding:0 0 32px}