@charset "utf-8";
/* =============================================================================
JEMS 共通コンテンツ（導入事例／ニュース／セミナー／環境ナレッジ）デザイン
-----------------------------------------------------------------------------
対象 : P12〜P19 の8画面
/hub/case/ 導入事例一覧 design/case/index.html
/hub/case/{slug}/ 導入事例詳細 design/case/tohogas/index.html
/hub/news/ ニュース一覧 design/news/index.html
/hub/news/{slug}/ ニュース詳細 design/news/pr-20260707/index.html
/hub/seminar/ セミナー一覧 design/seminar/index.html
/hub/seminar/{slug}/ セミナー詳細 design/seminar/seminar-20260825/index.html
/hub/column/ 環境ナレッジ一覧 design/column/index.html
/hub/column/{slug}/ 環境ナレッジ詳細 design/column/electronic-manifest/index.html
前提 : 以下の順で読み込む。
1. assets/jems-design.css 共通デザインシステム（トークン）
2. design/assets/design.css /hub/ デザインの共通シェル
（ヘッダー・フッター・.jcta2・.cvbtn・
.pill-btn・.gbtn・.casecard・.tag-pill・.ph）
3. design/assets/common.css 本ファイル。共通コンテンツ8画面で共有する
クラス名は hc- 接頭辞（hub common）で名前空間を分け、
design.css の /hub/ 固有クラス（.fv / .cases / .service-card 等）と衝突させない。
テーマ : data-theme="jems"（JEMS全体＝グリーン）。
共通コンテンツは事業領域をまたぐため、廃棄物マネジメント（Blue）／
資源循環マネジメント（Teal）ではなく JEMS全体のグリーンで組む。
色は --fg-mantis-* / --fg-pale-green / --fg-grad を参照し、16進を直書きしない。
ページ骨格（8画面で共通）:
ヘッダー（/hub/ と同一）
.hc-hero パンくず＋見出し。地色 --fg-gray、右上にJEMSマーク
.hc-plate 白面。40px角丸でヒーローに40px重ねる（/hub/ の .svc-intro と同じ作り）
.hc-sec … 本文セクション
.jcta2 ご相談・資料請求（/hub/ S8 と同一）
.jfooter2 フッター（/hub/ S9 と同一）
========================================================================== */
/* =============================================================================
1. ページトークン
-----------------------------------------------------------------------------
hidden属性で出し入れする要素（複合検索のカード・0件表示・選択中の条件・
ページ送り）は display:flex / grid を持つため、ブラウザ既定の display:none が
負けてしまう。属性が付いたら必ず消えるようにしておく。
========================================================================== */
[hidden] { display:none !important; }
:root {
--hc-sec-gap:80px; /* セクション間隔（PC） */
--hc-key:var(--fg-mantis-400); /* #63c95a キーカラー（面・ドット） */
--hc-key-deep:var(--fg-mantis-500); /* #41af38 文字に載せるグリーン */
--hc-pale:var(--fg-pale-green); /* #f2f8f0 淡色面 */
--hc-tint:var(--fg-mantis-50); /* #f3fbf2 セクション地色 */
--hc-line:var(--fg-mantis-200); /* #c7efc3 枠線・区切り */
--hc-radius:20px;
/* 受付ステータスの3色（Figma: Seminar/Status 709:34）。Paintスタイル未登録のため実値で持つ */
--hc-status-open:#247a20; /* 申込受付中 */
--hc-status-scheduled:var(--warn-ink);/* #7a5100 開催予定（アンバー） */
--hc-status-ended:var(--ink-muted); /* #64696e 開催終了 */
}
/* =============================================================================
2. セクションの枠組み
========================================================================== */
.hc-sec { padding-block:calc(var(--hc-sec-gap) / 2); }
.hc-sec--tint { background:var(--hc-tint); }
.hc-sec--gray { background:var(--fg-gray); }
/* 白面プレートの先頭は角丸ぶん（40px）を足して天井との間を確保する */
.hc-plate > .hc-sec:first-child { padding-top:calc(var(--hc-sec-gap) / 2 + var(--fg-radius-block)); }
/* プレートの直後がフッターになるページ（.jcta2 を持たない導入事例詳細など）は、
.jfooter2 が margin-top で角丸ぶん（40px）重なってくるため下余白が消える。
先頭と同じ考え方で、最終セクションに角丸ぶんを足して上下の余白を揃える */
.hc-plate--footer-next > .hc-sec:last-child { padding-bottom:calc(var(--hc-sec-gap) / 2 + var(--fg-radius-block)); }
/* 見出しは共通コンポーネント .sec-head（英字ラベル＋H2＋リード）を使う。
英字ラベルの色は共通CSSがJEMSグリーン固定なので、そのまま受ける。 */
.hc-sec .sec-head { max-width:none; }
/* セクションH2の上限はFigma（ニュース・導入事例）どおり32px／字間2%。
design.css の事業トップ用スケール（clamp 30〜44px）はここでは使わない。
英字ラベル（.sec-head__en 12px・字間.14em・Mantis/600）は共通CSSのままでFigmaと一致する。
共通コンテンツ4種（ニュース・導入事例・環境ナレッジ・セミナー）すべてに適用する。
固定32pxだと、幅が狭いときにページタイトル（H1）と同じか大きくなって階層が崩れる
（SPでは一覧H1の30pxと同値、詳細H1の24pxより大きい）。H1と同じ流動値にして、
どの幅でも H1 ＞ セクションH2 ＞ 本文H2（22px）の順序を保つ。 */
body[data-page="news"] .hc-sec .sec-head__title,
body[data-page="case"] .hc-sec .sec-head__title,
body[data-page="column"] .hc-sec .sec-head__title,
body[data-page="seminar"] .hc-sec .sec-head__title {
font-size:clamp(24px, 2.2vw, 32px); line-height:1.4; letter-spacing:.02em;
}
/* 見出しと中身の間隔。共通CSSの 24px では足りないブロックだけ足す */
.hc-sec__body { margin-top:var(--sp-5); }
.hc-note { margin-top:var(--sp-4); font-size:12px; line-height:1.8; color:var(--ink-muted); }
.hc-note--right { text-align:right; }
/* =============================================================================
3. パンくず
========================================================================== */
.hc-crumb { padding-block:16px 0; }
.hc-crumb ol { display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px; }
.hc-crumb li { display:flex; align-items:center; gap:10px; font-size:12px; line-height:1.8; color:var(--ink-muted); }
.hc-crumb li + li::before {
content:""; flex:none; width:5px; height:5px;
border-right:1px solid var(--line-strong); border-top:1px solid var(--line-strong);
transform:rotate(45deg);
}
.hc-crumb a { color:var(--ink-muted); text-decoration:none; }
.hc-crumb a:hover { color:var(--hc-key-deep); text-decoration:underline; }
.hc-crumb [aria-current] { color:var(--fg-charcoal); }
/* 記事タイトルが長い詳細ページでは、現在地だけ1行に省略する */
.hc-crumb__now { max-width:34em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* =============================================================================
4. ページヒーロー
-----------------------------------------------------------------------------
/hub/ のFVは事業部トップ専用（.fv）。下層は地色 --fg-gray の低いヒーローで、
H1 は /hub/（72px）・廃マネTOP（56px）より一段小さい 44px を上限にする。
========================================================================== */
/* 背景装飾のJEMSマーク（.hc-hero__deco）は下層ページ全画面で不使用にしたため撤去済み */
.hc-hero { position:relative; overflow:hidden; background:var(--fg-gray); padding-bottom:calc(var(--fg-radius-block) + 56px); }
.hc-hero__inner { position:relative; z-index:1; }
.hc-hero__head { padding-top:40px; }
.hc-hero__en {
display:block; font-family:var(--font-num); font-size:12px; font-weight:700;
letter-spacing:.14em; text-transform:uppercase; color:var(--hc-key); margin-bottom:8px;
}
.hc-hero__title { font-size:clamp(30px, 3.4vw, 44px); line-height:1.35; color:var(--fg-heading); }
/* 共通コンテンツ4種（ニュース・導入事例・コラム・セミナー）はリード文を持たず
H1だけが立つため、44pxでは大きく見える。セクションH2（上限32px）との差を
保てる38pxまで下げる。廃棄物マネジメント下層のキャッチコピーH1は44pxのまま */
body[data-page="news"] .hc-hero__title,
body[data-page="case"] .hc-hero__title,
body[data-page="column"] .hc-hero__title,
body[data-page="seminar"] .hc-hero__title { font-size:clamp(28px, 2.9vw, 38px); }
/* --- 一覧ページのヒーロー（パンくず＋英字ラベル＋H1だけ） ---------------------
リード文を外した目的はページ上段の高さを削ることなので、見出し前後の余白も詰める。
H1の下に残す余白は、プレートの角丸（40px）に24pxを足した分だけ。
下段のプレート内は従来のリズムのままにして、削るのは上段に限定する。 */
.hc-hero--list { padding-bottom:calc(var(--fg-radius-block) + 24px); }
.hc-hero--list .hc-hero__head { padding-top:20px; }
/* セクション見出しを持たないページ（ニュース・導入事例）は、プレート冒頭も詰める */
.hc-plate--tight > .hc-sec:first-child { padding-top:calc(var(--fg-radius-block) + 16px); }
/* --- 詳細ページのヒーロー（タグ＋タイトル＋メタ） --- */
/* 記事タイトルは長文なので上限は一覧より小さい。ただし下限を24pxにすると
狭い幅でセクションH2（下限24px）と同値になるため、1段上の28pxを下限にする */
.hc-hero--article .hc-hero__title { font-size:clamp(28px, 2.6vw, 36px); line-height:1.5; }
.hc-hero__tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--sp-4); }
.hc-hero__company { margin-top:var(--sp-3); font-size:17px; font-weight:700; line-height:1.6; color:var(--hc-key-deep); }
.hc-hero__meta { margin-top:var(--sp-4); display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; font-size:12px; line-height:1.8; color:var(--ink-muted); }
.hc-hero__meta time { font-family:var(--font-num); }
/* --- 白面プレート（ヒーローに40px重ねる） --- */
.hc-plate {
position:relative; z-index:1;
margin-top:calc(-1 * var(--fg-radius-block));
background:var(--fg-canvas);
border-radius:var(--fg-radius-block) var(--fg-radius-block) 0 0;
}
/* =============================================================================
5. タグ・ステータス
-----------------------------------------------------------------------------
.tag-pill は design.css（淡いグリーン地＋Mantis/500）をそのまま使う。
ここでは共通コンテンツで必要になる派生だけを足す。
========================================================================== */
.tag-pill--plain { background:var(--surface-sub); color:var(--ink-muted); }
/* 開催形式（オンライン／会場）。テーマタグ（淡グリーン面）と見た目を分ける属性タグ
Figma: Seminar/Meta Tag 708:37 の Kind=Format */
.tag-pill--format {
padding:4px 11px; background:var(--fg-canvas);
border:1px solid var(--line); color:var(--fg-charcoal);
}
.tag-pill--alert { background:var(--warn-bg); color:var(--warn-ink); font-weight:700; }
/* 受付状態は色だけに頼らず、必ず文言でも示す（3種） */
.hc-status {
display:inline-flex; align-items:center; gap:6px;
padding:4px 12px; border-radius:var(--r-full);
font-size:12px; font-weight:700; line-height:1.6; white-space:nowrap;
}
.hc-status::before { content:""; flex:none; width:7px; height:7px; border-radius:50%; background:currentColor; }
.hc-status--open { color:var(--fg-canvas); background:var(--hc-key); }
.hc-status--open::before { background:var(--fg-canvas); }
.hc-status--closed { color:var(--warn-ink); background:var(--warn-bg); }
.hc-status--ended { color:var(--ink-muted); background:var(--surface-sub); }
/* =============================================================================
6. 絞り込み（一覧ページ共通）
-----------------------------------------------------------------------------
公開画面の表示名は利用者向けの語（業種／課題／導入サービス／企業規模 ほか）。
カテゴリ・タグといったCMS上の管理語は出さない。
========================================================================== */
/* 余白は行の高さを決める要素なので、チップの当たり判定（34px）を保ったまま
上下だけを詰める。セミナー一覧・コラム一覧の同一パーツで共通 */
.hc-filter {
display:flex; flex-direction:column;
padding:4px 32px 14px; background:var(--fg-canvas);
border:1px solid var(--hc-line); border-radius:var(--hc-radius);
}
.hc-filter__row {
display:grid; grid-template-columns:120px minmax(0,1fr); gap:10px var(--sp-4);
align-items:baseline; padding-block:10px;
}
.hc-filter__row + .hc-filter__row { border-top:1px dashed var(--hc-line); }
.hc-filter__label { font-size:13px; font-weight:700; line-height:1.6; color:var(--fg-charcoal); }
.hc-filter__opts { display:flex; flex-wrap:wrap; gap:8px; }
.hc-chip {
display:inline-flex; align-items:center; min-height:34px; padding:4px 16px;
background:var(--fg-canvas); border:1px solid var(--line); border-radius:var(--r-full);
font-size:13px; line-height:1.6; color:var(--fg-charcoal); text-decoration:none; cursor:pointer;
transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.hc-chip:hover { border-color:var(--hc-key); background:var(--hc-pale); color:var(--hc-key-deep); }
/* 選択中は Mantis/400 のベタ塗り。枠線は消して面で示す */
.hc-chip.is-active { background:var(--hc-key); border-color:transparent; color:var(--fg-canvas); }
.hc-chip.is-active:hover { background:var(--hc-key-deep); color:var(--fg-canvas); }
/* button要素で使うため、ブラウザ既定の見た目を打ち消す */
.hc-chip { appearance:none; font-family:inherit; }
/* 選択中の条件。1件ずつ外せるチップと、まとめて解除するリンクを置く */
.hc-filter__state {
display:flex; flex-wrap:wrap; align-items:center; gap:10px var(--sp-4);
margin-top:12px; padding-top:12px; border-top:1px solid var(--hc-line);
font-size:12px; color:var(--ink-muted);
}
.hc-selchips { display:flex; flex-wrap:wrap; gap:8px; }
.hc-selchip {
display:inline-flex; align-items:center; gap:8px; padding:4px 8px 4px 12px;
background:var(--hc-pale); border-radius:var(--r-full);
font-size:12px; font-weight:700; line-height:1.8; color:var(--hc-key-deep);
}
.hc-selchip__x {
display:inline-flex; align-items:center; justify-content:center;
appearance:none; border:0; padding:0;
width:18px; height:18px; border-radius:50%;
background:var(--fg-canvas); color:var(--hc-key-deep);
font-family:inherit; font-size:11px; line-height:1; text-decoration:none; cursor:pointer;
}
.hc-selchip__x:hover { background:var(--hc-key); color:var(--fg-canvas); }
.hc-filter__clear {
margin-left:auto; appearance:none; padding:0; border:0; background:none;
font-family:inherit; font-size:12px; color:var(--ink-muted); text-decoration:underline; cursor:pointer;
}
.hc-filter__clear:hover { color:var(--hc-key-deep); }
/* =============================================================================
7. 件数・並び替え
========================================================================== */
.hc-result {
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
gap:var(--sp-3) var(--sp-5); padding-block:var(--sp-2);
}
.hc-result__count { font-size:14px; line-height:1.6; color:var(--fg-charcoal); }
.hc-result__count b { font-family:var(--font-num); font-size:24px; font-weight:700; color:var(--hc-key-deep); padding-inline:3px; }
.hc-result__sort { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--ink-muted); }
.hc-select {
appearance:none; min-height:40px; padding:8px 38px 8px 16px;
background:var(--fg-canvas); border:1px solid var(--line); border-radius:var(--r-full);
font-family:var(--font); font-size:13px; line-height:1.6; color:var(--fg-charcoal);
background-image:
linear-gradient(45deg,transparent 50%,var(--ink-muted) 50%),
linear-gradient(135deg,var(--ink-muted) 50%,transparent 50%);
background-position:calc(100% - 20px) 18px, calc(100% - 15px) 18px;
background-size:5px 5px; background-repeat:no-repeat;
}
.hc-select:hover { border-color:var(--hc-key); }
/* =============================================================================
8. カード一覧
========================================================================== */
.hc-grid { display:grid; gap:24px; align-items:stretch; }
.hc-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.hc-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
/* 一覧カード。影・角丸は /hub/ のセミナーカード（.casecard）と同じ質感に揃える */
.hc-card {
display:flex; flex-direction:column; overflow:hidden;
background:var(--fg-canvas); border-radius:16px;
color:var(--fg-charcoal); text-decoration:none;
box-shadow:
-16px 16px 32px rgba(235,235,235,.2), 16px -16px 32px rgba(235,235,235,.2),
-16px -16px 32px rgba(255,255,255,.9), 16px 16px 40px rgba(235,235,235,.9),
inset 1px 1px 2px rgba(255,255,255,.3), inset -1px -1px 2px rgba(235,235,235,.5);
transition:box-shadow var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.hc-card:hover { box-shadow:16px 16px 40px rgba(182,220,171,.5); translate:0 -3px; }
.hc-card__thumb {
aspect-ratio:16 / 10; display:flex; align-items:center; justify-content:center;
background:var(--surface-sub); color:var(--ink-disabled);
font-size:12px; line-height:1.7; text-align:center; overflow:hidden;
}
/* 実写を入れる場合は縦横比を保ったまま面いっぱいに敷く */
.hc-card__thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.hc-card__body { flex:1 1 auto; display:flex; flex-direction:column; gap:10px; padding:20px; }
/* カテゴリ（塗り）とキーワード（淡色・#付き）を同じ行に並べる。
種類ごとの見た目は .tag-pill / .tag-pill--plain のまま分けておく */
.hc-card__tags { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
/* タイトルは3行で止める。原記事の見出しをそのまま入れるため長いものがある */
.hc-card__title {
font-size:16px; font-weight:700; line-height:1.6;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
transition:color var(--dur) var(--ease);
}
.hc-card:hover .hc-card__title { color:var(--hc-key-deep); }
/* その他の導入事例：タイトルの行数が違っても企業名・公開日の位置が揃うよう、
3行ぶんの高さを確保する（カテゴリタグを外したぶんの空きも吸収する） */
[data-case-others] .hc-card__title { min-height:calc(1.6em * 3); }
.hc-card__company { font-size:13px; font-weight:700; line-height:1.6; color:var(--hc-key-deep); }
.hc-card__date { font-family:var(--font-num); font-size:12px; line-height:1.8; color:var(--fg-news-date); }
.hc-card__text { font-size:13px; line-height:1.8; color:var(--ink-body); }
/* 分類は「ラベル：値」の対で並べ、全カードで同じ順序・同じ項目名にする */
.hc-card__meta { display:flex; flex-direction:column; gap:6px; padding-top:12px; border-top:1px solid var(--hc-line); }
.hc-card__row { display:grid; grid-template-columns:5.5em minmax(0,1fr); gap:8px; font-size:12px; line-height:1.7; }
.hc-card__k { color:var(--ink-muted); }
.hc-card__v { color:var(--fg-charcoal); }
/* 矢印は常に右端。テキスト導線（.hc-card__more）がある場合だけ左端へ寄せる */
.hc-card__foot { margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.hc-card__more { margin-right:auto; font-size:12px; font-weight:700; line-height:1.6; color:var(--hc-key-deep); }
.hc-card__go { flex:none; display:block; width:20px; height:20px; }
/* --- アイキャッチのクリック領域（カード共通） ---------------------------------
.hc-card はカード全体が なので画像も既にクリックできる。カード全体を
リンクにできない作り（セミナーカード・注目枠）では、画像をこのクラスで包んで
タイトル・CTAと同じ遷移先を持たせる。
同じ遷移先のリンクが増えるだけなので、キーボード移動と読み上げでは重複させない
（HTML側で tabindex="-1" / aria-hidden="true" を付ける）。
ホバーの見え方は既存のカード表現に合わせ、独自の効果は足さない。 */
.hc-thumblink { display:block; }
/* 画像にホバーしたときも、タイトルリンクと同じ色変化で遷移先が同じことを示す */
.hc-smcard:has(.hc-thumblink:hover) .hc-smcard__t a,
.hc-feature:has(.hc-thumblink:hover) .hc-feature__title a { color:var(--hc-key-deep); }
/* --- 注目枠（横組みの大カード）。一覧より前に置く固定コンテンツ --- */
/* セミナーの注目枠と同じ考え方で、アイキャッチの幅を 420px → 360px に詰める
（本文の高さと釣り合う位置。これ以上狭めてもカードの高さは変わらない） */
.hc-feature {
display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:32px; align-items:center;
padding:24px; background:var(--fg-canvas); border-radius:var(--hc-radius);
box-shadow:var(--fg-shadow-card);
}
.hc-feature__visual { border-radius:16px; overflow:hidden; }
.hc-feature__visual .ph { aspect-ratio:16 / 10; border:0; border-radius:16px; }
.hc-feature__visual img { display:block; width:100%; height:auto; }
.hc-feature__body { display:flex; flex-direction:column; gap:12px; min-width:0; }
.hc-feature__title { font-size:22px; font-weight:700; line-height:1.6; color:var(--fg-charcoal); }
.hc-feature__title a { color:inherit; text-decoration:none; }
.hc-feature__title a:hover { color:var(--hc-key-deep); text-decoration:underline; text-underline-offset:3px; }
/* 投稿本文から機械生成した抜粋（注目枠のみ）。
PC・SPともCSSで3行に打ち切り、カードを並べたときに高さが揃うよう
3行分の領域を常に確保する。本文が取れない場合は hidden で欄ごと消える */
.hc-feature__excerpt {
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
min-height:calc(1.8em * 3);
font-size:13px; line-height:1.8; color:var(--ink-muted);
}
.hc-feature__company { font-size:15px; font-weight:700; line-height:1.6; color:var(--hc-key-deep); }
.hc-feature__meta { display:flex; flex-direction:column; gap:6px; padding-block:4px; }
/* タグ・ステータスなどを1行に並べる場合 */
.hc-feature__meta--inline { flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.hc-feature__row { display:grid; grid-template-columns:7em minmax(0,1fr); gap:12px; font-size:13px; line-height:1.8; }
.hc-feature__row dd { margin:0; }
.hc-feature__k { color:var(--ink-muted); }
.hc-feature__text { font-size:14px; line-height:1.9; color:var(--ink-body); }
.hc-feature__act { padding-top:4px; }
/* =============================================================================
9. ニュース一覧（日付・タイトルの行形式）
-----------------------------------------------------------------------------
ニュースは一覧性を優先し、カードにしない。カテゴリは持たない（現行サイトに分類がないため）。
========================================================================== */
.hc-news { border-top:1px solid var(--hc-line); }
.hc-news__item { border-bottom:1px solid var(--hc-line); }
.hc-news__link {
display:grid; grid-template-columns:108px minmax(0,1fr) 20px;
gap:var(--sp-4); align-items:center;
padding:22px 8px; text-decoration:none; color:var(--fg-charcoal);
transition:background var(--dur) var(--ease);
}
.hc-news__link:hover { background:var(--hc-tint); }
.hc-news__date { font-family:var(--font-num); font-size:13px; font-weight:500; line-height:1.8; color:var(--fg-news-date); }
.hc-news__title { font-size:15px; font-weight:700; line-height:1.7; transition:color var(--dur) var(--ease); }
.hc-news__link:hover .hc-news__title { color:var(--hc-key-deep); }
.hc-news__go { flex:none; display:block; width:20px; height:20px; }
/* コラムカードのキーワード行（#付きのピル）。カテゴリピルとは別の行に置く */
/* =============================================================================
10-a. セミナーカード（画像左＋本文右）
-----------------------------------------------------------------------------
受付状態 → 日時 → タイトル → テーマ → 導線の順で全カードを統一する。
注目枠（.hc-smcard--pickup）がこの大カードを使う。
一覧とTOPの「直近2件」は同じ部品を小カード（.hc-smcard--sm）に切り替えて2カラムで並べる
（項目は大カードと同じで、レイアウトと文字サイズだけが変わる）。
本文抜粋（.hc-smcard__lead）と開催形式タグはセミナーのどのカードでも使わない
（スタイルだけ残してある）。
========================================================================== */
/* 受付ステータス（Figma: Seminar/Status 709:34）
背景付きチップにはせず「7pxのドット＋文言」で示す。色だけに依存させない。 */
.hc-smstatus {
display:inline-flex; align-items:center; gap:8px;
font-size:12px; font-weight:700; line-height:20px; white-space:nowrap;
color:var(--hc-status-open);
}
.hc-smstatus::before { content:""; flex:none; width:7px; height:7px; border-radius:50%; background:currentColor; }
.hc-smstatus--scheduled { color:var(--hc-status-scheduled); }
.hc-smstatus--ended { color:var(--hc-status-ended); }
/* セミナーカード（Figma: Seminar/Card 711:107）
3状態で構造・情報配置・文字組みは共通。状態差は data-status で切り替える。 */
/* アイキャッチ（16:9）の幅がカードの高さを決めるので、本文の高さに合わせて
460px → 400px に詰める。これ以上狭めても本文側の高さが下限になり効果がない */
.hc-smcard {
display:grid; grid-template-columns:400px minmax(0,1fr); gap:24px; align-items:start;
padding:25px 29px; background:var(--fg-canvas);
border:1px solid var(--hc-line); border-radius:16px;
transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* ホバーは詳細ページへ行けるカードに付ける。
開催終了も記事としては読めるので対象。受付開始前（scheduled）だけ付けない */
.hc-smcard:not([data-status="scheduled"]):hover { border-color:var(--hc-key); box-shadow:var(--sh-1); }
/* 注目のセミナー（Pick up）。カードの作りは一覧と同じで、影だけ従来の
グリーンの浮き（--fg-shadow-card）を引き継いで注目枠だと分かるようにする */
.hc-smcard--pickup { box-shadow:var(--fg-shadow-card); }
.hc-smcard--pickup:not([data-status="scheduled"]):hover { box-shadow:var(--fg-shadow-card), var(--sh-1); }
/* 開催予定は枠をアンバーにせず、通常の淡いグリーン罫線のまま */
/* 開催終了だけ地色と罫線を落とす。文字は可読性を保つため個別に指定する */
.hc-smcard[data-status="ended"] { background:var(--surface-sub); border-color:var(--line); }
.hc-smcard__visual { border-radius:16px; overflow:hidden; }
.hc-smcard__visual .ph { aspect-ratio:16 / 9; border:0; border-radius:16px; }
.hc-smcard__visual img { display:block; width:100%; height:auto; }
.hc-smcard__body { display:flex; flex-direction:column; gap:24px; min-width:0; }
.hc-smcard__head { display:flex; flex-direction:column; gap:4px; }
.hc-smcard__main { display:flex; flex-direction:column; gap:10px; }
.hc-smcard__text { display:flex; flex-direction:column; gap:2px; }
.hc-smcard__date { font-size:15px; font-weight:700; line-height:24px; color:var(--fg-charcoal); }
.hc-smcard__t { font-size:17px; font-weight:700; line-height:1.6; color:var(--fg-charcoal); }
.hc-smcard__t a { color:inherit; text-decoration:none; }
.hc-smcard__t a:hover { color:var(--hc-key-deep); text-decoration:underline; text-underline-offset:3px; }
/* カードのリード。現行サイトと同じく詳細本文のプレーンテキスト冒頭55文字＋「…」を出す
（現行 /env-mgt/seminar/ の .lead_area 相当。対象者などの個別項目ではない） */
.hc-smcard__lead { font-size:13px; line-height:1.8; color:var(--ink-muted); }
.hc-smcard__tags { display:flex; flex-wrap:wrap; gap:6px; }
/* 開催終了でも日時・タイトル・対象は読める濃度を保つ（グレー化はしない） */
.hc-smcard[data-status="ended"] .hc-smcard__date,
.hc-smcard[data-status="ended"] .hc-smcard__t { color:var(--fg-charcoal); }
/* CTA。申込可能な状態だけ 、他は で出すのでリンクとしては動作しない */
.hc-smcard__cta {
display:flex; align-items:center; justify-content:space-between; gap:12px;
width:320px; max-width:100%; min-height:48px; padding:14px 12px;
border-radius:var(--r-full); text-decoration:none;
font-size:14px; font-weight:500; line-height:19.6px;
background:var(--hc-key); color:var(--fg-canvas);
transition:filter var(--dur) var(--ease);
}
.hc-smcard__cta::before { content:""; flex:none; width:20px; height:20px; }
.hc-smcard__cta > span { flex:1 1 auto; min-width:0; text-align:center; }
.hc-smcard__cta img { flex:none; display:block; width:20px; height:20px; }
a.hc-smcard__cta:hover { filter:brightness(1.04); }
/* 受付開始前だけは押せる見た目にしない */
.hc-smcard__cta--wait { cursor:default; }
/* 開催予定＝予告。まだ詳細ページへ行けないので矢印を出さず、
白地＋Mantis/400の罫線と文字だけで「これから受付が始まる」ことを示す
（Figma 711:105）。左右に20pxのスペーサーを置いて文言を光学的な中央へ寄せる */
.hc-smcard__cta--wait {
/* 罫線1pxぶん padding を詰めて、他の状態と外寸（48px）を揃える */
padding:13px 11px;
background:var(--fg-canvas); border:1px solid var(--hc-key); color:var(--hc-key);
}
.hc-smcard__cta--wait::after { content:""; flex:none; width:20px; height:20px; }
/* 開催終了＝申し込みはできないが記事としては読める。
白地＋Mantis/300の罫線で「主導線ではないが遷移できる」ことを示す（Figma 714:3869） */
.hc-smcard__cta--off {
padding:13px 11px;
background:var(--fg-canvas); border:1px solid var(--fg-mantis-300); color:var(--fg-charcoal);
}
/* --- 一覧の小カード（デスクトップ2カラム） -----------------------------------
持たせるのはアイキャッチ・開催日時・タイトル・テーマと、状態別のCTA。
本文抜粋だけを外し、導線（詳細・申し込み／受付開始までお待ちください／
詳細を見る）は当初の設計どおり大カードと同じものを残す。
タイトルは2行目以降を「…」で省略し、どのカードも同じ高さで揃える。
CTAは行内のカードで高さが違っても下端に揃うよう、本文を伸ばして最下部に置く。 */
.hc-smcard--sm { grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr; gap:16px; padding:16px; }
/* 告知バナーは縦横比が揃っていないものがあるため、一覧では16:9で切り揃える */
.hc-smcard--sm .hc-smcard__visual img { aspect-ratio:16 / 9; height:100%; object-fit:cover; }
.hc-smcard--sm .hc-smcard__body { gap:12px; }
/* CTAの幅はカード幅に合わせず、大カードと同じ320px（入りきらない幅では max-width で縮む）。
小カードは本文の行が短いので、ボタンはカードの中央に置く */
.hc-smcard--sm .hc-smcard__cta { width:320px; margin-top:auto; margin-inline:auto; }
.hc-smcard--sm .hc-smcard__head { flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 12px; }
.hc-smcard--sm .hc-smcard__main { gap:8px; }
.hc-smcard--sm .hc-smcard__date { font-size:14px; }
.hc-smcard--sm .hc-smcard__t {
font-size:16px;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden;
}
/* =============================================================================
10. セミナー一覧（受付状態→日時→タイトル→テーマ→導線）
========================================================================== */
.hc-smlist { display:flex; flex-direction:column; gap:16px; }
/* 一覧だけデスクトップ2カラム（1024px以上）。TOPの「直近2件」は縦積みのまま使うため、
グリッド化は一覧側の修飾クラスで持つ。列数はレスポンシブで 2 → 1 と落とす */
.hc-smlist--grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:stretch; }
.hc-smrow {
display:grid; grid-template-columns:186px minmax(0,1fr) 232px; gap:var(--sp-5);
align-items:center; padding:24px 28px;
background:var(--fg-canvas); border:1px solid var(--hc-line); border-radius:16px;
transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hc-smrow:hover { border-color:var(--hc-key); box-shadow:var(--sh-1); }
/* 開催終了は面を落として、受付中との差を色以外（地色・彩度）でも示す */
.hc-smrow--ended { background:var(--surface-sub); border-color:var(--line); }
.hc-smrow--ended:hover { border-color:var(--line-strong); box-shadow:none; }
.hc-smrow__state { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.hc-smrow__date { font-size:15px; font-weight:700; line-height:1.6; color:var(--fg-charcoal); }
.hc-smrow__body { display:flex; flex-direction:column; gap:10px; min-width:0; }
.hc-smrow__t { font-size:17px; font-weight:700; line-height:1.6; color:var(--fg-charcoal); }
.hc-smrow__t a { color:inherit; text-decoration:none; }
.hc-smrow__t a:hover { color:var(--hc-key-deep); text-decoration:underline; text-underline-offset:3px; }
.hc-smrow--ended .hc-smrow__t { color:var(--ink-muted); }
.hc-smrow__tags { display:flex; flex-wrap:wrap; gap:6px; }
.hc-smrow__target { font-size:13px; line-height:1.8; color:var(--ink-muted); }
.hc-smrow__act { display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.hc-smrow__act .gbtn,
.hc-smrow__act .pill-btn { width:100%; }
.hc-smrow__off { font-size:12px; line-height:1.7; color:var(--ink-muted); text-align:center; }
/* =============================================================================
11. ページネーション・0件表示
========================================================================== */
.hc-pager { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; }
.hc-pager a,
.hc-pager span {
min-width:44px; min-height:44px; padding-inline:14px;
display:inline-flex; align-items:center; justify-content:center;
background:var(--fg-canvas); border:1px solid var(--line); border-radius:var(--r-full);
font-family:var(--font-num); font-size:14px; line-height:1.2; color:var(--fg-charcoal); text-decoration:none;
transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.hc-pager a:hover { border-color:var(--hc-key); background:var(--hc-pale); }
/* 2026-09-13（0909CL ⑰）：白文字が乗るのに --fg-grad（#63C95A→#A1E79B）では
1.46〜2.09:1 しか出ていなかった。--fg-grad は見出し下の装飾罫にも使っていて
淡いままにしたいので、ここだけ文字が読める濃さの単色にする */
.hc-pager .is-current { background:var(--fg-mantis-600); border-color:transparent; color:var(--fg-canvas); font-weight:700; }
.hc-pager .is-off { color:var(--ink-disabled); background:var(--surface-sub); }
.hc-empty {
padding:56px var(--sp-5); text-align:center;
background:var(--fg-canvas); border:1px dashed var(--hc-line); border-radius:var(--hc-radius);
}
.hc-empty__t { font-size:18px; font-weight:700; line-height:1.6; color:var(--fg-charcoal); }
.hc-empty__d { margin-top:var(--sp-2); font-size:14px; line-height:1.9; color:var(--ink-muted); }
.hc-empty__act { margin-top:var(--sp-4); display:flex; justify-content:center; }
/* =============================================================================
12. 記事本文（詳細ページ共通）
-----------------------------------------------------------------------------
本文は .jw--read（840px）に流し込む。ここでは字組みだけを持つ。
========================================================================== */
.hc-mainvisual { border-radius:var(--hc-radius); overflow:hidden; }
.hc-mainvisual img { display:block; width:100%; height:auto; }
/* メインビジュアルは本文中の図版（.hc-figure--inset）と同じ48pxで本文と離す */
.hc-mainvisual + .hc-body { margin-top:var(--sp-7); }
.hc-mainvisual .ph { aspect-ratio:16 / 7; border:0; border-radius:var(--hc-radius); }
/* 導入事例詳細のカンプは 840×560（3:2）。他の詳細ページはFigma更新後に揃える */
body[data-page="case"] .hc-mainvisual .ph { aspect-ratio:3 / 2; }
.hc-body { font-size:16px; line-height:2; color:var(--ink-body); }
.hc-body > *:first-child { margin-top:0; }
.hc-body p { margin-top:var(--sp-4); }
/* H2：本文中の見出し。共通コンテンツ（ニュース・導入事例・セミナー・環境ナレッジ）の
詳細ページで共通に使う統一コンポーネント。
Figma準拠：22px／行間32px／字間2%。見出し→下罫8px、下罫→本文24px、前ブロック→見出し48px。
下罫は左80pxだけをグリーンのグラデーションにする */
.hc-body h2 {
position:relative; margin-top:var(--sp-7); margin-bottom:var(--sp-5);
padding-bottom:var(--sp-2);
font-size:22px; line-height:32px; letter-spacing:.02em; color:var(--fg-charcoal);
border-bottom:2px solid var(--hc-line);
}
.hc-body h2::after { content:""; position:absolute; left:0; bottom:-2px; width:80px; height:2px; background:var(--fg-grad); }
.hc-body h3 {
margin-top:var(--sp-6); margin-bottom:var(--sp-3);
padding-left:14px; border-left:4px solid var(--hc-key);
font-size:19px; line-height:1.6; color:var(--fg-charcoal);
}
.hc-body h2 + h3 { margin-top:var(--sp-5); }
.hc-body strong { font-weight:700; color:var(--fg-charcoal); }
.hc-body a { color:var(--hc-key-deep); }
/* 記事リード（見出し直後の要約） */
.hc-catch { font-size:17px; font-weight:700; line-height:1.9; color:var(--fg-charcoal); }
/* インタビューの質問。行頭に20pxのグリーンバーを置き、折り返しは本文に揃える */
.hc-body .hc-qa {
position:relative; margin-top:var(--sp-7); padding-left:28px;
font-size:16px; font-weight:700; line-height:1.75; color:var(--fg-charcoal);
}
.hc-body .hc-qa::before { content:""; position:absolute; left:0; top:13px; width:20px; height:2px; background:var(--hc-key); }
.hc-body .hc-qa + p { margin-top:var(--sp-4); }
/* 図版は下の「図版・本文中のプレースホルダー」（.hc-figure）を使う */
/* 箇条書き */
.hc-list { display:flex; flex-direction:column; gap:10px; margin-top:var(--sp-4); }
.hc-list li { position:relative; padding-left:22px; font-size:15px; line-height:1.9; color:var(--ink-body); }
.hc-list li::before { content:""; position:absolute; left:2px; top:.72em; width:8px; height:8px; border-radius:50%; background:var(--hc-key); }
/* チェックリスト（要点・おすすめ対象） */
.hc-checks { display:flex; flex-direction:column; gap:12px; }
.hc-checks li { position:relative; padding-left:30px; font-size:15px; line-height:1.9; color:var(--ink-body); }
.hc-checks li::before { content:""; position:absolute; left:0; top:.42em; width:19px; height:19px; border-radius:50%; background:var(--hc-key); }
.hc-checks li::after {
content:""; position:absolute; left:5px; top:calc(.42em + 5px);
width:9px; height:4.5px; border-left:2px solid var(--fg-canvas); border-bottom:2px solid var(--fg-canvas);
transform:rotate(-45deg);
}
/* 要点サマリー */
.hc-summary { padding:28px 32px; background:var(--hc-pale); border:1px solid var(--hc-line); border-radius:var(--hc-radius); }
.hc-summary__t { display:flex; align-items:center; gap:10px; margin-bottom:var(--sp-4); font-size:16px; font-weight:700; line-height:1.6; color:var(--fg-charcoal); }
.hc-summary__t::before { content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--hc-key); }
/* 目次 */
.hc-toc { padding:24px 28px; background:var(--fg-canvas); border:1px solid var(--hc-line); border-radius:16px; }
.hc-toc__t { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; line-height:1.6; color:var(--fg-charcoal); }
.hc-toc__t::before { content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--hc-key); }
.hc-toc ol { counter-reset:hc-toc; display:grid; gap:10px; margin-top:var(--sp-4); }
.hc-toc li { counter-increment:hc-toc; }
.hc-toc a { display:flex; gap:12px; font-size:14px; line-height:1.7; color:var(--fg-charcoal); text-decoration:none; }
.hc-toc a::before { content:counter(hc-toc,decimal-leading-zero); flex:none; font-family:var(--font-num); font-weight:700; color:var(--hc-key); }
.hc-toc a:hover { color:var(--hc-key-deep); text-decoration:underline; text-underline-offset:3px; }
/* 表（比較表・開催概要・プログラム） */
.hc-tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* 本文中の表は前後32px（--sp-6）。直前の段落は表の見出し扱いなので表側に寄せ、
段落自身は上に32pxを取って直前の本文から切り離す */
.hc-body .hc-tablewrap { margin-block:var(--sp-6); }
.hc-body p:has(+ .hc-tablewrap) { margin-top:var(--sp-6); }
.hc-body p + .hc-tablewrap { margin-top:var(--sp-3); }
.hc-table { width:100%; border-collapse:collapse; font-size:14px; }
.hc-table th,
.hc-table td { padding:14px 18px; border:1px solid var(--hc-line); text-align:left; vertical-align:top; line-height:1.9; }
.hc-table thead th { background:var(--hc-tint); color:var(--fg-charcoal); font-weight:700; white-space:nowrap; }
.hc-table tbody th { background:var(--hc-pale); color:var(--fg-charcoal); font-weight:700; white-space:nowrap; width:10em; }
.hc-table--wide { min-width:640px; }
/* 図版・本文中のプレースホルダー */
.hc-figure { margin-top:var(--sp-5); }
.hc-figure .ph { aspect-ratio:16 / 7; }
.hc-figure figcaption { margin-top:var(--sp-2); font-size:12px; line-height:1.7; color:var(--ink-muted); }
/* 本文幅（840px）の中で588pxに収める版。導入事例詳細の取材写真がこれ。
キャプションは画像の左端に揃える */
.hc-figure--inset { margin-block:var(--sp-7); }
.hc-figure--inset .hc-figure__body { max-width:588px; margin-inline:auto; }
.hc-figure--inset .ph { aspect-ratio:3 / 2; border:0; border-radius:16px; }
.hc-figure--inset img { display:block; width:100%; height:auto; border-radius:16px; }
.hc-figure--inset figcaption { margin-top:var(--sp-2); font-size:13px; line-height:1.8; }
/* 原記事からの移設待ち。デザイン確認時に「ここに本文が入る」ことを示す枠 */
.hc-migrate {
margin-top:var(--sp-5); padding:16px 20px;
background:var(--surface-sub); border:1px dashed var(--line-strong); border-radius:12px;
font-size:13px; line-height:1.9; color:var(--ink-muted);
}
.hc-migrate::before {
content:"移設"; display:inline-block; margin-right:10px; padding:1px 8px;
background:var(--fg-canvas); border:1px solid var(--line); border-radius:var(--r-sm);
font-size:11px; font-weight:700; color:var(--ink-body);
}
/* 成果サマリー（導入事例詳細） */
.hc-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.hc-result-card {
display:flex; flex-direction:column; gap:12px; padding:28px 24px;
background:var(--fg-canvas); border-radius:16px; box-shadow:var(--fg-shadow-neu);
}
.hc-result-card__no {
font-size:13px; font-weight:700; line-height:1.6; letter-spacing:.06em;
background:linear-gradient(180deg,#1fb43f,#a9ce56);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.hc-result-card__t { font-size:16px; font-weight:700; line-height:1.8; color:var(--fg-charcoal); }
/* 企業プロフィール */
.hc-profile {
display:grid; grid-template-columns:240px minmax(0,1fr); gap:32px; align-items:center;
margin-top:56px; padding:28px 32px; background:var(--fg-gray); border-radius:var(--hc-radius);
}
.hc-profile__visual .ph { aspect-ratio:4 / 3; background:var(--fg-canvas); }
/* 画像枠を持たず、表だけをグレー面に載せる形（導入事例詳細のカンプ） */
.hc-profile--plain { display:block; padding:32px; }
/* 導入事例詳細のカンプは リード→企業プロフィール→次のH2 を48px間隔で置く。
H2どうしの間隔はカンプの80px（ニュース詳細の48pxより広い） */
body[data-page="case"] .hc-body + .hc-profile { margin-top:var(--sp-7); }
body[data-page="case"] .hc-body h2 { margin-top:80px; }
.hc-profile__dl { display:grid; grid-template-columns:7em minmax(0,1fr); }
.hc-profile__dl dt,
.hc-profile__dl dd { margin:0; padding:12px 0; border-top:1px solid var(--line); line-height:1.8; }
.hc-profile__dl dt { font-size:13px; font-weight:700; color:var(--ink-muted); }
.hc-profile__dl dd { font-size:14px; color:var(--fg-charcoal); }
/* 登壇者
現行サイトのセミナー詳細は本文画像が告知バナー1枚のみで、登壇者写真を載せる運用が
ないため（seminar-3263 ほか6件で確認）、画像枠は持たずテキストだけで組む */
.hc-speaker {
display:block;
padding:24px 28px; background:var(--fg-canvas); border:1px solid var(--hc-line); border-radius:16px;
}
.hc-speaker__name { font-size:16px; font-weight:700; line-height:1.7; color:var(--fg-charcoal); }
.hc-speaker__d { margin-top:var(--sp-3); font-size:14px; line-height:1.9; color:var(--ink-body); }
/* 関連リンク（本文末の箱） */
.hc-linkbox { padding:24px 28px; background:var(--hc-tint); border-radius:16px; }
/* 見出しの印は箱の中の箇条書き（丸ドット）と重ならないよう縦バーにする */
.hc-linkbox__t { display:flex; align-items:center; gap:10px; margin-bottom:var(--sp-3); font-size:15px; font-weight:700; color:var(--fg-charcoal); }
.hc-linkbox__t::before { content:""; flex:none; width:3px; height:15px; border-radius:2px; background:var(--hc-key); }
/* =============================================================================
13. 次の行動（関連導線・ページ内CTA）
========================================================================== */
.hc-related { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.hc-related--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
/* Figma: NextStep/Card（732:158）
左にイラスト、右に「タイトル → 説明文 →（注記）→ 丸矢印」を積む横組み。
小見出し（遷移理由）はFigmaの更新で廃止した */
.hc-related__item {
/* 既定はJEMSグリーン。セミナー・環境ナレッジなど共通コンテンツへ送るカードはこのまま */
--rel-key:var(--hc-key); --rel-ink:var(--hc-key-deep); --rel-line:var(--hc-line);
/* align-items は stretch（既定）のまま。flex-start にするとテキスト列が
中身の高さで止まり、丸矢印がカード下端ではなく本文の直下に来てしまう */
display:flex; gap:16px; padding:24px 26px;
background:var(--fg-canvas); border:1px solid var(--rel-line); border-radius:16px;
color:var(--fg-charcoal); text-decoration:none;
transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* イラスト。枠（span）は固定幅で高さだけテキスト列に追従させ、画像は枠内に収める。
img を直接 align-self:stretch にすると、CSSの高さ指定がないぶん
固有の高さ（640px等）が採用されてカードが縦に伸びてしまう */
.hc-related__illust {
flex:none; width:114px; align-self:stretch;
display:flex; align-items:center; justify-content:center;
}
.hc-related__illust img { width:100%; height:100%; object-fit:contain; }
/* 右側のテキスト列。行間で間隔が決まるので要素間の gap は持たせない */
.hc-related__body { flex:1 1 0; min-width:0; display:flex; flex-direction:column; }
/* 3列（ニュース詳細）はカードが387pxしかないため、イラストを一段小さくして
タイトルの折り返しを抑える。Figmaの定義は2列（590px）基準 */
.hc-related:not(.hc-related--2) .hc-related__illust { width:88px; }
/* 事業領域へ送るカードは、遷移先の領域色に切り替える（.cta-card / .fgroup と同じ考え方）。
ミント＝廃棄物マネジメント／ブルー＝資源循環マネジメント。
文字は白地で4.5:1を満たす段（waste 800／circ 600）を使う */
.hc-related__item[data-theme="waste"] { --rel-key:var(--fg-waste-500); --rel-ink:var(--fg-waste-800); --rel-line:var(--fg-waste-200); }
.hc-related__item[data-theme="circular"] { --rel-key:var(--fg-circ-400); --rel-ink:var(--fg-circ-600); --rel-line:var(--fg-circ-200); }
.hc-related__item:hover { border-color:var(--rel-key); box-shadow:var(--sh-1); }
/* 外部リンクは見出し行の末尾にアイコンを添える */
.hc-related__t { display:flex; align-items:center; gap:8px; font-size:17px; font-weight:700; line-height:1.6; }
.hc-related__ext { flex:none; display:block; width:12px; height:12px; }
/* 本文リンクに添える外部リンクアイコン（インライン） */
.hc-ext-ico { display:inline-block; width:12px; height:12px; margin-left:4px; vertical-align:-1px; }
/* .gbtn / .pill-btn のラベル末尾に添える版。矢印（20px）と混ざらないよう span の中に置く。
ラベルとアイコンが2行に割れないよう、ボタン幅は内容に合わせて伸ばす */
/* 外部リンクのボタンは、右端の丸矢印を外部リンクアイコン（20px）に差し替える。
.gbtn img / .pill-btn img の 20px 枠をそのまま使うのでサイズ指定は不要 */
.hc-related__d { font-size:13px; line-height:1.8; color:var(--ink-muted); }
/* 補足（会員登録の要否など）。説明文より一段小さく落とす */
.hc-related__note { font-size:12px; line-height:1.7; color:var(--ink-muted); }
/* リンクラベル。カード全体がリンクなので下線は持たせず、矢印と同じ行に置く */
.hc-related__more {
margin-top:auto; padding-top:var(--sp-3);
display:flex; align-items:center; justify-content:space-between; gap:8px;
font-size:13px; font-weight:700; line-height:1.6; color:var(--rel-ink);
}
.hc-related__more .hc-related__go { margin-top:0; padding-top:0; }
/* 全体が border-box なので、height を指定した img に padding を足すと
その分だけ画像が潰れる。ここだけ content-box にして 20×20 を保つ。
上の余白はFigmaどおり6px（説明文・注記の行間で残りは足りる） */
.hc-related__go {
box-sizing:content-box;
margin-top:auto; padding-top:6px; align-self:flex-end;
display:block; width:20px; height:20px;
}
/* ページ内CTA帯。ページ末の .jcta2（ご相談・資料請求）とは役割を分ける */
.hc-cvband {
display:flex; flex-direction:column; align-items:center; gap:var(--sp-2);
padding:44px var(--sp-6); text-align:center;
background:var(--hc-tint); border:1px solid var(--hc-line); border-radius:24px;
}
.hc-cvband__t { font-size:24px; font-weight:700; line-height:1.5; color:var(--fg-charcoal); }
.hc-cvband__d { font-size:15px; line-height:1.9; color:var(--ink-body); }
.hc-cvband__btns { margin-top:var(--sp-4); display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:center; }
/* 受付中のセミナー詳細など、申込を強く出す場合 */
/* 開催終了の告知。申し込みができない状態なので、グレー面に落として
受付中のCTA帯（--key）と役割を明確に分ける。文字は可読性を保つ */
.hc-cvband--ended { background:var(--surface-sub); border-color:var(--line); }
.hc-cvband--key { background:var(--fg-cta-grad); border-color:transparent; }
.hc-cvband--key .hc-cvband__t,
.hc-cvband--key .hc-cvband__d { color:var(--fg-canvas); }
/* 緑帯の上ではグリーン塗りのボタン（.gbtn--green）が地色に沈むため、2つとも白地にする。
主・副の差は文字色（グリーン太字／チャコール）と罫線で付ける */
.hc-cvband--key .gbtn {
/* 罫線を持つ副ボタン（.pill-btn）と外寸を揃えるため、透明の1pxを敷く */
background:var(--fg-canvas); border:1px solid transparent;
color:var(--hc-key-deep); font-weight:700;
}
/* 本文末に置く箱型CTA。全幅の帯（.jcta2）ではなく本文幅（840px）に収める。
中身のカード・ボタンは .cta-card / .cvbtn をそのまま使う */
.hc-ctabox {
position:relative; overflow:hidden; margin-top:var(--sp-7);
padding:32px; border-radius:24px; background:var(--fg-cta-grad);
}
/* 2026-09-13（0909CL ⑰）：帯を濃くしたので .jcta2__plane と同じ比率へ */
.hc-ctabox__plane { position:absolute; top:-24px; right:-36px; width:280px; opacity:.22; pointer-events:none; }
.hc-ctabox__plane img { display:block; width:100%; height:auto; }
.hc-ctabox__inner { position:relative; z-index:1; }
.hc-ctabox__head { max-width:none; margin-bottom:0; padding-bottom:24px; }
.hc-ctabox__head .sec-head__en { margin-bottom:6px; }
.hc-ctabox__head .sec-head__lead { margin-top:8px; font-size:14px; line-height:1.7; }
.hc-ctabox__head .sec-head__en,
.hc-ctabox__head .sec-head__title,
.hc-ctabox__head .sec-head__lead,
.hc-ctabox__note { color:var(--fg-canvas); }
.hc-ctabox__cards { display:flex; align-items:stretch; gap:12px; }
/* 箱に収めるぶんカード内を詰め、ボタンは縦積みにする */
.hc-ctabox .cta-card { padding:28px; gap:16px; }
.hc-ctabox .cta-card__title { font-size:22px; }
.hc-ctabox .cta-card__btns { flex-direction:column; gap:10px; }
.hc-ctabox__note { margin-top:16px; font-size:12px; line-height:1.8; }
/* 一覧へ戻る */
.hc-back { display:flex; justify-content:center; padding-top:var(--sp-6); }
/* 状態違いの表示パターンを並べて見せるための枠（デザイン確認用）。
公開ページでは片方の状態しか出ないため、破線で「切り替えパターン」だと分かるようにする */
.hc-pattern { margin-top:var(--sp-6); padding:24px 28px; border:1px dashed var(--line-strong); border-radius:var(--hc-radius); background:var(--fg-canvas); }
.hc-pattern > .subsec2 { margin-bottom:var(--sp-2); }
/* =============================================================================
14. レスポンシブ
========================================================================== */
@media (max-width:1199px) {
.hc-feature { grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:24px; }
.hc-smrow { grid-template-columns:160px minmax(0,1fr) 200px; gap:var(--sp-4); padding:20px 22px; }
}
@media (max-width:1023px) {
:root { --hc-sec-gap:64px; }
.hc-hero { padding-bottom:calc(var(--fg-radius-block) + 40px); }
.hc-hero__head { padding-top:28px; }
.hc-hero--list { padding-bottom:calc(var(--fg-radius-block) + 16px); }
.hc-hero--list .hc-hero__head { padding-top:16px; }
.hc-plate--tight > .hc-sec:first-child { padding-top:calc(var(--fg-radius-block) + 12px); }
.hc-grid--3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.hc-related { grid-template-columns:repeat(2,minmax(0,1fr)); }
.hc-results { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.hc-result-card { padding:20px 18px; }
.hc-feature { grid-template-columns:minmax(0,1fr); gap:20px; }
/* ニュース行：日付を1段目、見出しを2段目へ */
.hc-news__link { grid-template-columns:minmax(0,1fr) 20px; gap:8px var(--sp-3); }
.hc-news__date { grid-column:1; }
.hc-news__title { grid-column:1 / -1; }
.hc-news__go { grid-row:1; grid-column:2; }
/* セミナー行：状態・本文・導線を縦に積む */
/* 狭い幅では画像を縮めず縦積みに切り替える */
.hc-smcard { grid-template-columns:minmax(0,1fr); gap:20px; padding:20px; }
.hc-smcard__body { gap:20px; }
.hc-smcard__cta { width:100%; }
/* 小カードは狭い幅でも詰めたまま2カラムを保つ */
.hc-smcard--sm { gap:16px; padding:16px; }
.hc-smcard--sm .hc-smcard__body { gap:12px; }
.hc-smrow { grid-template-columns:minmax(0,1fr); gap:var(--sp-4); }
.hc-smrow__state { flex-direction:row; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.hc-smrow__act { flex-direction:row; align-items:center; flex-wrap:wrap; gap:var(--sp-3); }
.hc-smrow__act .gbtn,
.hc-smrow__act .pill-btn { width:auto; }
.hc-profile { grid-template-columns:minmax(0,1fr); gap:20px; padding:24px; }
.hc-profile--plain { padding:24px; }
.hc-profile__visual { max-width:280px; }
.hc-ctabox { padding:24px; }
.hc-ctabox__cards { flex-direction:column; }
.hc-ctabox__plane { top:-14px; right:-30px; width:200px; }
.hc-filter { padding:4px 24px 14px; }
.hc-filter__row { grid-template-columns:minmax(0,1fr); gap:6px; }
}
@media (max-width:767px) {
:root { --hc-sec-gap:48px; }
.hc-crumb__now { max-width:16em; }
.hc-grid--3,
.hc-grid--2 { grid-template-columns:minmax(0,1fr); }
.hc-smlist--grid { grid-template-columns:minmax(0,1fr); }
.hc-related,
.hc-related--2 { grid-template-columns:minmax(0,1fr); }
.hc-results { grid-template-columns:minmax(0,1fr); gap:12px; }
.hc-filter { padding:2px 18px 12px; }
.hc-filter__state { flex-direction:column; align-items:flex-start; gap:10px; }
.hc-filter__clear { margin-left:0; }
.hc-result { justify-content:flex-start; }
.hc-feature { padding:16px; }
.hc-feature__title { font-size:18px; }
.hc-feature__row { grid-template-columns:6em minmax(0,1fr); gap:8px; font-size:12px; }
.hc-news__link { padding:18px 4px; }
.hc-news__title { font-size:14px; }
.hc-smrow { padding:18px; }
.hc-smrow__t { font-size:16px; }
.hc-smrow__act .gbtn,
.hc-smrow__act .pill-btn { width:100%; max-width:320px; }
.hc-body { font-size:15px; }
/* H2のサイズはPCと共通（22px）。SPは前ブロックとの間隔だけ詰める */
.hc-body h2 { margin-top:40px; }
.hc-body h3 { font-size:17px; }
.hc-catch { font-size:15px; }
.hc-summary { padding:20px; }
.hc-toc { padding:18px 20px; }
.hc-table th,
.hc-table td { padding:10px 12px; font-size:13px; }
.hc-table tbody th { width:auto; }
.hc-speaker { padding:18px; }
.hc-cvband { padding:32px 20px; border-radius:20px; }
.hc-cvband__t { font-size:20px; }
.hc-cvband__d { font-size:14px; }
.hc-cvband__btns { flex-direction:column; align-items:center; width:100%; }
.hc-cvband__btns .gbtn,
.hc-cvband__btns .pill-btn { width:100%; max-width:320px; }
.hc-pager a,
.hc-pager span { min-width:40px; min-height:40px; padding-inline:10px; font-size:13px; }
}