/* =========================================================
   note-contact.css — NOTE（メディア一覧）／お問い合わせ・資料DL
   renewal.css の「後」に読み込む。TOP（p-home）のトンマナに合わせた上書き。
   ---------------------------------------------------------
   1. NOTE 一覧（.nc-note）
   2. お問い合わせ・資料DL（.nc-contact / .nc-download / .nc-thanks）
   （プライバシーポリシーは changelog の 22 で企業情報・採用と同じ作りにし、company.css に移した）
   4. 共通（CTA帯の置き場）
   ========================================================= */

/* ---------- 1. NOTE 一覧 ---------- */
.nc-note{color:var(--color-text)}
.nc-note .p-media__container{padding-top:0}
@media(min-width:960px){.nc-note .p-media__container{gap:56px}}

/* 1-1 上部タブ：黒ピル */

/* 1-2 記事一覧（カードの見た目は components.css の .c-mediaCards。トップの NOTE と共通） */
.nc-note .p-media__main{container-type:inline-size;min-width:0}
.nc-note .c-overlayBorderLink{border-radius:var(--r-card)}
.nc-note .c-overlayBorderLink::before,.nc-note .c-overlayBorderLink::after{display:none}
.nc-note .c-overlayBorderLink:focus-visible{outline:2px solid var(--color-line-strong);outline-offset:2px}

/* 1-3 ページネーション：丸 */
.nc-note .p-media__pagination{grid-column:1/-1;margin-top:40px}
.nc-note .p-media__paginationList{flex-wrap:wrap;gap:6px}
.nc-note .p-media__paginationItem a,.nc-note .p-media__paginationItem span{border-radius:50%;border-color:var(--color-line);font-family:var(--font-num);font-weight:var(--fw-bold)}
.nc-note .p-media__paginationItem a:hover{border-color:var(--color-line-strong)}
.nc-note .p-media__paginationItem.is--current a,.nc-note .p-media__paginationItem.is--current span{background:var(--color-bg-dark);border-color:var(--color-line-strong);color:var(--color-text-on-dark)}

/* 1-4 親カテゴリの子カテゴリ一覧：白いピル */

/* 1-5 月報（メルマガ）の案内：薄いグレーの角丸。新着のカードの一部に見えないよう、上はセクションの間と同じだけ空ける（.nc-sec + .nc-sec） */
/* 見出し → ボタンの縦並び・中央そろえ（どの幅でも） */
.nc-note .p-media__cta{margin:72px 0 0;padding:40px 32px;border-radius:var(--r-card);background:var(--color-bg-subtle);
  display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.nc-note .p-media__ctaText{margin:0;color:var(--color-text);font-family:var(--font-copy);font-size:var(--fs-20);font-weight:var(--fw-bold);line-height:1.5;letter-spacing:var(--tracking);text-align:center;word-break:auto-phrase}
.nc-note .p-media__ctaInner{margin:0;width:auto}
@media(max-width:959px){.nc-note .p-media__cta{padding:32px 22px}}
/* SP は、ボタンのラベルが入りきるように全幅に */
@media(max-width:599px){.nc-note .p-media__ctaInner,.nc-note .p-media__ctaLink{width:100%}}
@media(max-width:599px){.nc-note .p-media__cta{margin:56px 0 0}}

/* 1-6 サイドバー：TOPトーン（角丸・余白） */
@media(min-width:960px){
  .nc-note .p-mediaSidebar{top:104px}
}
.nc-note .p-mediaSidebar__cta{gap:10px}

/* ---------- 4. 共通：一覧・本文の最後に置く CTA 帯 ---------- */

/* 1-7 追記：カテゴリのピルは1行分まで・下余白 */
.nc-note.l-layout__content{padding-bottom:88px}
@media(max-width:767px){.nc-note.l-layout__content{padding-bottom:72px}}

/* ---------- 2. お問い合わせ・資料DL ---------- */
/* 2-1 共通：見出しは r-pageHead、フォームはグレーの面の上の白い角丸カード */
.nc-narrow .nc-card{max-width:880px}
.nc-contact.l-layout__content,.nc-thanks.l-layout__content,.nc-contact.p-contact__wrap{padding-bottom:0;min-height:0}
.nc-formSec{padding:72px 0 88px}
@media(max-width:767px){.nc-formSec{padding:40px 0 64px}}
.nc-card{padding:48px 56px 52px;background:var(--color-bg);border-radius:var(--r-card);color:var(--color-text)}
@media(max-width:959px){.nc-card{padding:32px 28px 36px}}
@media(max-width:599px){.nc-card{padding:28px 18px 32px;border-radius:var(--r-card)}}

/* 見出し下の注記（総合お問い合わせへの案内）：赤→グレーの面 */
.nc-head .p-contactHero__note{max-width:760px;margin-top:24px;padding:14px 18px;border-radius:var(--r-inner);background:var(--color-bg-subtle);font-size:var(--fs-14);line-height:1.85;color:var(--color-text)}
.nc-head .p-contactHero__note a{font-weight:var(--fw-bold);color:var(--color-text)}
.nc-head .p-contactHero__note a::before,.nc-head .p-contactHero__note a::after{display:none}

/* 必須マーク：赤ではなく黒の点 */

/* 2-2 HubSpot フォームの見た目（動作に関わる属性には触れない） */

/* 2-3 会社案内ダウンロード：左に説明（グレーの面）・右にフォーム（白カード） */
.nc-download.l-download__wrap{padding:0}

/* 2-4 サンクスページ */
.nc-thanks .l-mediaContent p{font-size:var(--fs-16);line-height:2;color:var(--color-text)}
.nc-thanks .l-mediaContent a{color:var(--color-text)}
.nc-thanks .p-contactThanks__content{margin:0}
/* 送信完了ページの本文：見出しの下に続ける（上 32px）。下は hero の下の余白（80／64px）でフッターへ */
.nc-thanksBody{margin-top:32px}
.nc-thanks .r-pageHead__title br{display:none}
.nc-thanks .p-contactThanks__cta{margin-top:40px;border:0;border-radius:var(--r-inner);background:var(--color-bg-subtle);overflow:hidden;transition:background-color .35s var(--ease)}
.nc-thanks .p-contactThanks__cta:hover{background:var(--color-bg-hover)}
.nc-thanks .p-contactThanks__ctaContent{padding:24px 28px}
.nc-thanks .p-contactThanks__ctaTitle{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-right:0;font-family:var(--font-copy);font-size:var(--fs-20);font-weight:var(--fw-bold);line-height:1.5}
.nc-thanks .p-contactThanks__ctaTitle::after{content:none}
.nc-thanks .p-contactThanks__ctaText{margin-top:8px;font-size:var(--fs-14);line-height:1.8;color:var(--color-text)}
.nc-thanks .p-contactThanks__ctaImage{overflow:hidden}
.nc-thanks .p-contactThanks__back,.nc-thanks .p-downloadThanks__back{margin-top:40px}
.nc-thanks .p-downloadThanks__text{margin:0;font-size:var(--fs-16);line-height:2;color:var(--color-text)}
/* 資料 DL の送信完了：ダウンロードのボタンは、薄いグレーの面の中央に置く（角丸は会社案内の誘導と同じ --r-inner） */
.nc-thanks .p-downloadThanks__buttonWrap{margin-top:32px;padding:40px 24px;border-radius:var(--r-inner);background:var(--color-bg-subtle);text-align:center}
@media(max-width:599px){.nc-thanks .p-downloadThanks__buttonWrap{padding:32px 24px}}
/* 「トップへ戻る」：枠線の角丸リンク（r-link 風） */

/* 2-5 長いサンクス見出しは少し小さく */
.nc-thanks .r-pageHead__title{font-size:var(--fs-display-2);line-height:1.4}

/* ---------- NOTE 一覧：横1列（行で並べる） ---------- */
/* 右端の矢印 */

/* ---------- NOTE 一覧：タイトルを大きく／著者を出す／日付は非表示 ---------- */
/* 著者 */

/* =========================================================
   NOTE 一覧：1カラム／カテゴリ上／人気3×3／新着3列
   ========================================================= */
.nc-note .p-media__container{display:block;padding-bottom:0}
.nc-note .p-mediaSidebar{display:none}
.nc-note .p-media__main{container-type:normal;width:100%}
.nc-sec + .nc-sec{margin-top:72px}
.nc-secHead{margin:0 0 24px}
.nc-secTitle{margin:0;font-family:var(--font-copy);font-size:var(--fs-display-2);font-weight:var(--fw-bold);line-height:1.4;letter-spacing:var(--tracking)}

/* カテゴリ */
.nc-cat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.nc-cat__group{padding-top:16px;border-top:var(--border-strong)}
.nc-cat__groupHead{display:flex;align-items:baseline;gap:10px;margin:0 0 12px}
.nc-cat__name{font-family:var(--font-copy);font-size:var(--fs-16);font-weight:var(--fw-bold);color:var(--color-text);text-decoration:none}
.nc-cat__groupHead small{font-size:var(--fs-12);font-weight:var(--fw-bold);color:var(--color-text)}
.nc-cat__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.nc-cat__chips a{display:inline-block;padding:6px 14px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--color-line);
  font-size:var(--fs-13);font-weight:var(--fw-bold);color:var(--color-text);text-decoration:none;transition:background-color .25s,color .25s,box-shadow .25s}
.nc-cat__chips a:hover{background:var(--color-bg-dark);box-shadow:none;color:var(--color-text-on-dark)}

/* 記事カードの見た目は components.css の .c-mediaCards（トップの NOTE と共通） */
.nc-secLabel{margin:0 0 10px;display:flex;gap:14px;align-items:baseline}
@media(max-width:999px){.nc-cat{grid-template-columns:1fr}}
@media(max-width:599px){.nc-sec + .nc-sec{margin-top:56px}}

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

/* =========================================================
   NOTE 記事詳細（media/<id>/）
   事例記事（renewal/case.css の 3.）と同じ作法で揃える
   ========================================================= */
.p-mediaDetail__wrap{padding:32px 0 96px}
.p-mediaDetail__main{min-width:0}

/* タイトルエリア（記事カラムの中）：h1（PC・SP とも 28px）→ 日付（グレー）→ サムネイル */
.p-mediaDetail__info{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 32px}
.p-mediaDetail__infoDate{font-family:var(--font-num);font-size:var(--fs-13);font-weight:var(--fw-regular);letter-spacing:var(--tracking);color:var(--color-text-muted)}
.p-mediaDetail__infoLabel{margin-right:6px;font-family:var(--font-copy)}
.p-mediaDetail__title{margin:0 0 16px;font-family:var(--font-copy);font-weight:var(--fw-bold);
  line-height:1.4;letter-spacing:var(--tracking);word-break:auto-phrase;color:var(--color-text)}
.p-mediaDetail__thumbnail{overflow:hidden;border-radius:var(--r-card);background:var(--color-bg-hover)}
.p-mediaDetail__thumbnail img{display:block;width:100%;height:auto}

/* 本文 */
.p-mediaDetail__content{margin-top:48px;color:var(--color-text)}
.p-mediaDetail__content p{margin:0 0 28px;font-size:var(--fs-16);line-height:2}
.p-mediaDetail__content p:empty{display:none}
.p-mediaDetail__content strong{font-weight:var(--fw-bold)}
.p-mediaDetail__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-mediaDetail__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-mediaDetail__content figure{margin:40px 0}
.p-mediaDetail__content img{max-width:100%;height:auto;border-radius:var(--r-card)}
.p-mediaDetail__content figcaption{margin-top:12px;font-size:var(--fs-13);line-height:1.6;color:var(--color-text)}
.p-mediaDetail__content ul,.p-mediaDetail__content ol{margin:0 0 28px;padding-left:1.4em}
.p-mediaDetail__content li{font-size:var(--fs-16);line-height:2}

/* 著者・シェア（事例記事と共通の見え方） */
.p-mediaDetail__related{margin-top:88px;padding-top:0;border-top:0}
.p-mediaDetail__relatedTitle{font-family:var(--font-copy);font-weight:var(--fw-bold);letter-spacing:var(--tracking)}
/* 関連する記事：一覧と同じカード（.c-mediaCards）を 2×2 */
.p-mediaDetail__related .p-mediaDetail__relatedList{margin-top:36px}  /* 共通の .c-mediaCards（margin:0）が後に読まれるので、親のクラスで強くする */

/* サイドバー：PICK UP ＋ CTA（幅・固定位置は cms-content.css） */
.p-mediaSidebar{position:sticky}
.p-mediaSidebar__pick{overflow:hidden;border-radius:var(--r-card);background:var(--color-bg-subtle)}
.p-mediaSidebar__pickTitle{margin:0;padding:20px 20px 12px}
.p-mediaSidebar__pickList{display:flex;flex-direction:column}
.p-mediaSidebar__pickItem{display:block;padding:14px 20px;border-top:1px solid var(--color-line);font-size:var(--fs-14);line-height:1.7;
  text-align:left;text-decoration:none;color:var(--color-text);transition:background-color .25s}
.p-mediaSidebar__pickItem:hover{background:var(--color-bg-hover)}
.p-mediaSidebar__news{display:grid;gap:14px;margin-top:20px;padding:20px;border-radius:var(--r-card);background:var(--color-bg-subtle);text-align:center}
.p-mediaSidebar__newsText{margin:0;font-family:var(--font-copy);font-size:var(--fs-14);font-weight:var(--fw-bold);line-height:1.7;color:var(--color-text)}
.p-mediaSidebar__cta{display:grid;gap:12px;margin-top:20px}
@media(max-width:959px){
  .p-mediaSidebar{position:static;width:100%;margin-top:48px}
  .p-mediaDetail__wrap{padding:24px 0 72px}
}

/* 事例記事と同じ余白・段組みに合わせる */
@media(min-width:960px){
  .p-mediaDetail__container{padding-top:0;gap:64px;align-items:flex-start}
}
@media(min-width:1200px){
  .p-mediaDetail__container{gap:64px}
}