/* ヘルプセンター。front レイアウトの上に載せるため .hc- 接頭辞で閉じています

   設計の方針
     罫線は最小限にして、余白と淡い面で群をつくります。
     青は行き先のあるものにだけ使い、装飾には使いません。
     グラデーションと、見出しの下の飾り線は置きません。
     カテゴリのアイコンだけ、くすんだパステルで識別をつけます。 */

/* ナビは front レイアウトの都合で .hc の外に出るため、変数は両方に定義します。
   .hc だけに置くとナビ内で var() が解決せず、色が bootstrap の既定に落ちます。 */
.hc, .hc-nav {
    --hc-br: #1976d2;            /* 面と枠線に使う青。白抜き文字を載せる用 */
    --hc-link: #1565c0;          /* 文字の青。--hc-br だと淡い面の上で 4.27 まで落ちるため一段暗くする */
    --hc-ink: #1a1d21;           /* 見出しと本文 */
    --hc-ink2: #1a1d21;
    --hc-sub: #5b6570;           /* 補助テキスト */
    --hc-mute: #8b949e;          /* アイコンなど装飾のみ。読ませる文字には --hc-sub を使う */
    --hc-line: #e6eaee;          /* 枠線。使う場所を絞る */
    --hc-line2: #eef1f4;         /* 薄い区切り */
    --hc-surface: #f7f8fa;       /* 群をつくる面 */
    --hc-surface2: #f1f3f6;      /* 一段濃い面 */
    --hc-tint: #eef4fc;          /* 選択中を示す面 */
    --hc-ok-bg: #edf5f0;         /* うまくいく話のコールアウト */
    --hc-warn-bg: #faf3e8;       /* 注意のコールアウト */
}

.hc {
    background: #fff;
    color: var(--hc-ink);
    line-height: 1.8;
    padding-bottom: 4rem;
}

.hc * { box-sizing: border-box; }
/* リンク色の既定は本文だけに効かせます。全体に効かせると各部品の色指定に勝ってしまいます */
.hc-body a, .hc-crumb a { color: var(--hc-link); }
.hc svg { display: block; }

/* ===== ナビ ===== */
.hc-nav { background: #fff; border-bottom: 1px solid var(--hc-line); }
.hc-nav-inner {
    max-width: 1060px; margin: 0 auto; padding: .7rem 1.5rem;
    display: flex; align-items: center; gap: 1.1rem;
}
.hc-brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.hc-brand:hover { text-decoration: none; }
.hc-mark {
    width: 28px; height: 28px; border-radius: 9px; flex: none;
    background: var(--hc-br);
    color: #fff; font-weight: 800; font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
}
.hc-brand-name { font-size: .95rem; font-weight: 600; color: var(--hc-ink); white-space: nowrap; }
.hc-brand-name em { font-style: normal; font-weight: 400; color: var(--hc-sub); margin-left: .35rem; font-size: .82rem; }
.hc-nav-divider { width: 1px; height: 18px; background: var(--hc-line); }
.hc-nav-link { font-size: .84rem; color: var(--hc-sub); text-decoration: none; white-space: nowrap; }
.hc-nav-link:hover { color: var(--hc-ink); text-decoration: none; }
.hc-nav-spacer { flex: 1; }
/* ナビの検索。結果は入力欄の下に重ねて出します */
.hc-nav-search { position: relative; width: 260px; flex: none; }
.hc-nav-search input {
    width: 100%; border: 1px solid transparent; border-radius: 9px; background: var(--hc-surface2);
    padding: .45rem .8rem .45rem 2.1rem; font-size: .83rem; font-family: inherit; outline: none; color: var(--hc-ink);
}
.hc-nav-search input:focus { border-color: var(--hc-br); background: #fff; box-shadow: 0 0 0 3px rgba(25, 118, 210, .12); }
.hc-nav-search > i { position: absolute; left: .68rem; top: 50%; transform: translateY(-50%); color: var(--hc-mute); font-size: .78rem; }
.hc-nav-results { display: none; }
/* 重なって出るものは、面だけでは本文と区別が付かないため影を許しています */
.hc-nav-results.hc-nav-results-open {
    display: block; position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 40;
    background: #fff; border: 1px solid var(--hc-line); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(26, 29, 33, .12);
    padding: .4rem; max-height: 70vh; overflow-y: auto; width: 360px;
}
.hc-nav-results .hc-result { background: none; border-radius: 9px; margin: 0; padding: .55rem .6rem; }
.hc-nav-results .hc-result:hover { background: var(--hc-surface); }
.hc-nav-results .hc-result-sum { display: none; }
.hc-nav-results .hc-noresult { padding: .7rem .6rem; }
/* href を持たないモーダル用リンクは bootstrap の a:not([href]) に色を奪われるため、重みを揃えます */
.hc-nav a.hc-nav-login { font-size: .84rem; color: var(--hc-sub); text-decoration: none; white-space: nowrap; cursor: pointer; }
.hc-nav a.hc-nav-cta {
    font-size: .84rem; font-weight: 600; color: #fff; white-space: nowrap; cursor: pointer;
    background: var(--hc-br);
    border-radius: 9px; padding: .46rem 1.1rem; text-decoration: none;
}
.hc-nav a.hc-nav-cta:hover { color: #fff; text-decoration: none; opacity: .92; }

/* ===== 共通 ===== */
.hc-wrap { max-width: 820px; margin: 0 auto; padding: 0 1.5rem; }
.hc-wrap-wide { max-width: 1060px; margin: 0 auto; padding: 0 1.5rem; }
/* 見出しは飾り線を置かず、下の罫線で区切ります */
.hc-heading {
    font-size: 1.05rem; font-weight: 600; color: var(--hc-ink);
    margin: 0 0 1.1rem;
}
.hc-pill {
    display: inline-block; border-radius: 999px; font-size: .72rem; font-weight: 600;
    padding: .2rem .75rem; background: var(--hc-surface2); color: var(--hc-sub);
}
/* パンくずはページの中身なので、線は引きません。
   ナビの下線と続けて出ると二重線に見えます。
   文字は本文の幅に揃えます。幅が違うと見出しと左端がずれて見えます。 */
.hc-crumb { background: #fff; margin: 0; }
.hc-crumb-in {
    max-width: 1060px; margin: 0 auto; padding: .9rem 1.5rem .2rem;
    font-size: .82rem; color: var(--hc-sub);
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.hc-crumb a { text-decoration: none; }
.hc-crumb i { color: var(--hc-mute); font-size: .6rem; }
/* .hc-wrap（820px）を使うトップ用。他は .hc-wrap-wide に揃えます */
.hc-crumb-narrow .hc-crumb-in { max-width: 820px; }

/* ===== トップの検索 ===== */
/* トップだけ見せる作りにします。中の階層は抑制的なままです */
.hc-hero { background: #fff; }
.hc-hero-in { max-width: 820px; margin: 0 auto; padding: 4rem 1.5rem 3.2rem; text-align: center; }
.hc-hero h1 {
    font-size: 2.25rem; font-weight: 600; letter-spacing: -.02em;
    color: var(--hc-ink); margin: 0 0 1.6rem; line-height: 1.4;
}
.hc-search { position: relative; max-width: 560px; margin: 0 auto; }
.hc-search input {
    width: 100%; height: 54px; border: 1px solid var(--hc-line); border-radius: 14px;
    padding: 0 1.2rem 0 3rem; font-size: 1rem; outline: none;
    font-family: inherit; color: var(--hc-ink); background: var(--hc-surface);
}
.hc-search input:focus { background: #fff; border-color: var(--hc-br); box-shadow: 0 0 0 4px rgba(25, 118, 210, .1); }
.hc-search > i { position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%); color: var(--hc-mute); }
/* よく見られる記事へのショートカット */
.hc-quick { margin: 1.3rem 0 0; display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }
.hc-quick a {
    font-size: .81rem; color: var(--hc-sub); background: var(--hc-surface2);
    border-radius: 999px; padding: .34rem .95rem; text-decoration: none;
}
.hc-quick a:hover { background: var(--hc-tint); color: var(--hc-link); text-decoration: none; }
.hc-results { margin-top: 1rem; text-align: left; max-width: 560px; margin-left: auto; margin-right: auto; }
.hc-results:empty { display: none; }
.hc-result {
    display: block; text-decoration: none; padding: .7rem .9rem;
    border-radius: 12px; margin-bottom: .25rem; background: var(--hc-surface);
}
.hc-result:hover { background: var(--hc-surface2); text-decoration: none; }
.hc-result-cat { font-size: .72rem; color: var(--hc-sub); margin: 0 0 .2rem; }
.hc-result-title { font-size: .92rem; font-weight: 600; color: var(--hc-link); margin: 0 0 .2rem; }
.hc-result-sum { font-size: .84rem; color: var(--hc-sub); margin: 0; line-height: 1.8; }
.hc-noresult { font-size: .88rem; color: var(--hc-sub); padding: .8rem .2rem; margin: 0; }

/* ===== アコーディオン ===== */
/* 外枠を引かず、項目ごとの面で分けます */
.hc-acc { display: grid; gap: .35rem; }
.hc-acc-item { border-radius: 12px; overflow: hidden; background: var(--hc-surface); }
.hc-acc-item.hc-open { background: var(--hc-tint); }
.hc-acc-q {
    display: flex; align-items: center; gap: .9rem; padding: .95rem 1.2rem;
    cursor: pointer; width: 100%; background: none; border: none;
    text-align: left; font-family: inherit;
}
.hc-acc-q .hc-acc-t { font-size: .95rem; font-weight: 600; color: var(--hc-ink); flex: 1; line-height: 1.6; }
.hc-acc-q .hc-acc-cv { color: var(--hc-mute); font-size: .72rem; transition: transform .25s; }
.hc-acc-item.hc-open .hc-acc-cv { color: var(--hc-br); transform: rotate(180deg); }
.hc-acc-a { padding: 0 1.2rem 1.1rem; display: none; }
.hc-acc-item.hc-open .hc-acc-a { display: block; }
.hc-acc-a p { font-size: .93rem; color: var(--hc-sub); line-height: 1.85; margin: 0 0 .55rem; }
.hc-acc-more {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .87rem; font-weight: 600; color: var(--hc-link); text-decoration: none;
}

/* ===== カテゴリ ===== */
/* 幅を詰めたため 4 列ではラベルが折り返します。3 列にします */
.hc-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.hc-cat {
    display: flex; align-items: center; gap: .85rem; padding: .95rem 1.1rem;
    border-radius: 14px; text-decoration: none; background: var(--hc-surface); color: var(--hc-ink);
}
.hc-cat:hover { background: var(--hc-surface2); text-decoration: none; }
.hc-cat-ic {
    width: 36px; height: 36px; border-radius: 11px; flex: none; font-size: .88rem;
    display: flex; align-items: center; justify-content: center;
}
.hc-cat-t { font-size: .88rem; font-weight: 600; color: var(--hc-ink); line-height: 1.45; }
.hc-cat-n { margin-left: auto; font-size: .78rem; color: var(--hc-sub); }

/* カテゴリごとの色。message-card やチーム開発と同じ、くすんだパステルです。
   識別のための装飾なので、文字はタイルの外側に置いています。 */
.hc-ic-problems  { background: #e8eefa; color: #43598a; }
.hc-ic-ai        { background: #efe9f7; color: #6b5590; }
.hc-ic-courses   { background: #e7f2ec; color: #3f7259; }
.hc-ic-billing   { background: #f9f0e6; color: #8a6640; }
.hc-ic-account   { background: #e7f0f5; color: #41697e; }
.hc-ic-projects  { background: #f7ebed; color: #8a5059; }
.hc-ic-community { background: #eceef8; color: #54598a; }
.hc-ic-about     { background: #f2f1ea; color: #6f6d53; }

/* ===== 学習ガイドの入口 ===== */
.hc-guide-block { margin-top: 2.2rem; border-radius: 16px; background: var(--hc-surface); padding: 1.5rem 1.6rem; }
.hc-guide-l .hc-guide-lb { display: none; }
.hc-guide-l h2 { font-size: 1.05rem; font-weight: 600; color: var(--hc-ink); margin: 0 0 .3rem; line-height: 1.6; }
.hc-guide-l p { font-size: .87rem; color: var(--hc-sub); margin: 0 0 1.1rem; line-height: 1.8; }
.hc-guide-r { display: grid; grid-template-columns: repeat(2, 1fr); gap: .2rem .8rem; }
.hc-guide-r a {
    display: flex; align-items: center; gap: .6rem; font-size: .89rem;
    color: var(--hc-ink); text-decoration: none; padding: .5rem .7rem; border-radius: 9px;
}
.hc-guide-r a:hover { color: var(--hc-link); background: #fff; text-decoration: none; }
.hc-guide-r a i { color: var(--hc-mute); font-size: .62rem; margin-left: auto; order: 2; }
.hc-guide-r .hc-guide-all {
    grid-column: 1 / -1; font-size: .87rem; font-weight: 600; color: var(--hc-link);
    text-decoration: none; margin-top: .6rem;
}
.hc-guide-r .hc-guide-all:hover { background: none; }
/* すべて見るだけは、矢印を右端に飛ばさず文字の直後に置きます */
.hc-guide-r .hc-guide-all i { margin-left: .3rem; order: 0; }

/* ===== 一覧の行 ===== */
/* 罫線を引かず、余白と hover の面で分けます */
.hc-items { display: grid; gap: .15rem; }
.hc-item {
    display: block; text-decoration: none;
    padding: .85rem 1rem; border-radius: 12px; margin-left: -1rem;
}
.hc-item:hover { background: var(--hc-surface); text-decoration: none; }
.hc-item h3 { font-size: .97rem; font-weight: 600; color: var(--hc-link); margin: 0 0 .2rem; line-height: 1.55; }
.hc-item p { font-size: .87rem; color: var(--hc-sub); margin: 0; line-height: 1.75; }

/* ===== 一覧ページ ===== */
.hc-list-grid {
    display: grid; grid-template-columns: 216px minmax(0, 1fr);
    gap: 2.5rem; align-items: start;
}
.hc-list-grid > main { padding: 1.7rem 0 3rem; max-width: 640px; }

/* ===== 一覧ページのヘッダー ===== */
.hc-list-head { margin-bottom: 1.6rem; }
.hc-list-head h1 {
    font-size: 1.85rem; font-weight: 600; letter-spacing: -.015em;
    color: var(--hc-ink); margin: 0 0 .5rem; line-height: 1.45;
}
.hc-list-head p { font-size: 1rem; color: var(--hc-sub); margin: 0; line-height: 1.8; }
.hc-list-head .hc-list-count { display: block; font-size: .82rem; color: var(--hc-sub); margin-top: .5rem; }

/* ===== 記事ページ ===== */
/* 1 記事が短いため、GitHub より 1 行を短くして密度を上げています。
   本文は 1 行およそ 35 文字です。 */
.hc-article-grid {
    display: grid; grid-template-columns: 216px minmax(0, 1fr) 176px;
    gap: 2.5rem; align-items: start;
}
.hc-rail { position: sticky; top: 1.2rem; padding: 2rem 0; }
.hc-rail-lb {
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--hc-sub); margin: 0 0 .7rem; padding-left: .7rem;
}
/* 縦罫は引かず、選択中は淡い面で示します */
.hc-rail a {
    display: block; font-size: .86rem; color: var(--hc-sub); text-decoration: none; line-height: 1.6;
    padding: .4rem .7rem; border-radius: 9px;
}
.hc-rail a:hover { background: var(--hc-surface); color: var(--hc-ink); text-decoration: none; }
.hc-rail a.hc-on { background: var(--hc-tint); color: var(--hc-link); font-weight: 600; }
/* .hc-rail a (0,2,0) に負けるため、セレクタを (0,3,0) にしています。
   これが無いと display:block になり、gap が効かず < と文字がくっつきます。 */
.hc-rail a.hc-rail-all {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem;
    border: none; padding: .4rem .7rem;
    font-size: .81rem; color: var(--hc-sub); text-decoration: none;
}
.hc-rail a.hc-rail-all:hover { color: var(--hc-link); background: var(--hc-surface); text-decoration: none; }
.hc-toc { position: sticky; top: 1.2rem; padding: 2rem 0; }
.hc-toc p {
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--hc-sub); margin: 0 0 .6rem;
}
.hc-toc a {
    display: block; font-size: .8rem; color: var(--hc-sub); text-decoration: none;
    padding: .3rem 0 .3rem .8rem; border-left: 2px solid var(--hc-line2); line-height: 1.55;
}
.hc-toc a:hover, .hc-toc a.hc-on { color: var(--hc-link); border-left-color: var(--hc-link); text-decoration: none; font-weight: 600; }

.hc-body { padding: 1.7rem 0 0; max-width: 560px; }
.hc-body h1 {
    font-size: 1.85rem; font-weight: 600; line-height: 1.45; letter-spacing: -.015em;
    color: var(--hc-ink); margin: 0 0 .7rem;
}
.hc-meta {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    font-size: .78rem; color: var(--hc-sub); margin: 0 0 1.9rem; padding-bottom: 0;
}
.hc-body p { font-size: 1rem; line-height: 1.85; margin: 0 0 1rem; }
/* 見出しは飾り線を置きません */
.hc-body h2 {
    font-size: 1.3rem; font-weight: 600; line-height: 1.6; color: var(--hc-ink);
    margin: 2.2rem 0 .85rem; scroll-margin-top: 1.5rem;
}
.hc-body h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.7; color: var(--hc-ink); margin: 1.7rem 0 .55rem; }
.hc-body ul { margin: 0 0 1rem; padding-left: 1.3rem; list-style: disc; }
.hc-body ul li { font-size: 1rem; line-height: 1.85; margin-bottom: .3rem; padding-left: 0; }
.hc-body ul li::marker { color: var(--hc-mute); }
.hc-body b, .hc-body strong { color: var(--hc-ink); font-weight: 600; }
.hc-body code {
    background: var(--hc-surface2); border-radius: 6px; padding: .15rem .42rem;
    font-size: .86em; color: var(--hc-ink); font-family: "SFMono-Regular", Consolas, monospace;
}
.hc-body pre {
    background: var(--hc-surface); color: var(--hc-ink); border: none;
    border-radius: 12px; padding: 1rem 1.2rem;
    overflow-x: auto; font-size: .84rem; line-height: 1.8; margin: 0 0 1.4rem;
    font-family: "SFMono-Regular", Consolas, monospace;
}
.hc-body pre code { background: none; color: inherit; padding: 0; font-size: 1em; }
.hc-body figure { margin: 0 0 1.5rem; }
.hc-body figure img { width: 100%; border: 1px solid var(--hc-line); border-radius: 12px; display: block; }
.hc-body figcaption { font-size: .8rem; color: var(--hc-sub); margin-top: .55rem; }
.hc-body table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 0 0 1.4rem; }
.hc-body th, .hc-body td { padding: .6rem .8rem; border-bottom: 1px solid var(--hc-line2); text-align: left; vertical-align: top; }
.hc-body th { font-weight: 600; color: var(--hc-sub); font-size: .82rem; border-bottom: 1px solid var(--hc-line); }
.hc-table-scroll { overflow-x: auto; }

/* 手順 */
.hc-steps { counter-reset: hcstep; margin: 0 0 1.5rem; }
.hc-step { position: relative; padding-left: 2.3rem; padding-bottom: 1.1rem; }
.hc-step:not(:last-child)::before {
    content: ''; position: absolute; left: .82rem; top: 1.9rem; bottom: 0;
    width: 1px; background: var(--hc-line);
}
.hc-step::after {
    counter-increment: hcstep; content: counter(hcstep);
    position: absolute; left: 0; top: .15rem; width: 1.65rem; height: 1.65rem;
    border-radius: 999px; background: var(--hc-surface2); border: none; color: var(--hc-sub);
    font-size: .78rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.hc-step > *:last-child { margin-bottom: 0; }

/* コールアウト。枠線ではなく淡い面で種類を示します */
.hc-note { border: none; border-radius: 14px; padding: 1rem 1.2rem; margin: 0 0 1.2rem; background: var(--hc-tint); }
.hc-note-h {
    display: block; font-size: .89rem; font-weight: 600;
    color: var(--hc-ink); margin: 0 0 .3rem; padding: 0; background: none;
}
.hc-note-h i { color: var(--hc-ink); opacity: .55; margin-right: .45rem; font-size: .82rem; }
.hc-note p { margin: 0; font-size: .92rem; line-height: 1.8; color: var(--hc-sub); }
.hc-note p + p { margin-top: .7rem; }
.hc-note ul { margin: .6rem 0 0; }
.hc-note ul li { font-size: .92rem; color: var(--hc-sub); }
.hc-note-warn { background: var(--hc-warn-bg); }
.hc-note-ok { background: var(--hc-ok-bg); }

/* ===== 記事フッター ===== */
.hc-foot { margin-top: 2.6rem; padding-top: 1.5rem; border-top: 1px solid var(--hc-line); max-width: 560px; }
.hc-more {
    background: var(--hc-surface); border: none; border-radius: 14px;
    padding: 1.1rem 1.3rem;
    display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.hc-more p { font-size: .9rem; color: var(--hc-sub); margin: 0; flex: 1; min-width: 220px; line-height: 1.85; }
.hc-more-btn {
    display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
    background: var(--hc-br); color: #fff;
    border-radius: 9px; padding: .55rem 1.2rem; font-size: .86rem; font-weight: 600; text-decoration: none;
}
.hc-more-btn:hover { color: #fff; text-decoration: none; opacity: .92; }
.hc-report { font-size: .88rem; color: var(--hc-sub); margin: 1.8rem 0 0; line-height: 1.85; }
.hc-report a { color: var(--hc-ink2); text-decoration: underline; text-underline-offset: 2px; }
.hc-report a:hover { color: var(--hc-link); }
.hc-related { margin-top: 2rem; }
.hc-related h2 { font-size: .95rem; font-weight: 600; color: var(--hc-ink); margin: 0 0 .8rem; }
.hc-related a {
    display: flex; align-items: center; gap: .6rem; font-size: .93rem;
    text-decoration: none; color: var(--hc-ink); padding: .7rem 1rem;
    background: var(--hc-surface); border-radius: 12px; margin-bottom: .35rem;
}
.hc-related a:hover { background: var(--hc-surface2); text-decoration: none; }
.hc-related a i { color: var(--hc-mute); font-size: .7rem; margin-left: auto; }

/* 無料会員への案内。青で塗らず、淡い面で出します */
.hc-exit { margin-top: 2rem; border: none; border-radius: 16px; padding: 1.4rem 1.5rem; background: var(--hc-tint); }
.hc-exit-top { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.hc-exit-top > div { flex: 1; min-width: 220px; }
.hc-exit h2 { font-size: .98rem; font-weight: 600; color: var(--hc-ink); margin: 0 0 .3rem; }
.hc-exit p { font-size: .88rem; color: var(--hc-sub); margin: 0; line-height: 1.85; }
.hc-exit-btn {
    display: inline-flex; align-items: center; gap: .5rem; background: var(--hc-br);
    color: #fff; border-radius: 9px; padding: .58rem 1.3rem;
    font-size: .86rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.hc-exit-btn:hover { color: #fff; text-decoration: none; opacity: .92; }
/* 同じ枠内の .hc-exit p に負けないよう、意図して詳細度を上げています */
.hc-exit .hc-exit-sub {
    margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid rgba(26, 29, 33, .1);
    font-size: .85rem; color: var(--hc-sub); line-height: 1.85;
}
.hc-exit-sub a { color: var(--hc-link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1100px) {
    .hc-article-grid, .hc-list-grid { grid-template-columns: 1fr; gap: 0; }
    .hc-rail, .hc-toc { display: none; }
    .hc-nav-search { width: 200px; }
    .hc-nav-results.hc-nav-results-open { width: 300px; left: auto; right: 0; }
    .hc-cats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .hc-nav-inner { padding: .6rem 1rem; gap: .6rem .8rem; flex-wrap: wrap; }
    .hc-brand-name em { display: none; }
    .hc-nav-link, .hc-nav-divider { display: none; }
    /* 1 行に収まらないため、検索は下の段へ送ります */
    .hc-nav-search { order: 3; width: 100%; }
    .hc-nav-results.hc-nav-results-open { width: 100%; left: 0; right: 0; }
    .hc-crumb-in, .hc-wrap, .hc-wrap-wide, .hc-hero-in { padding-left: 1rem; padding-right: 1rem; }
    .hc-cats { grid-template-columns: 1fr; }
    .hc-hero h1 { font-size: 1.35rem; }
    .hc-list-head h1 { font-size: 1.5rem; }
    .hc-list-head p { font-size: .95rem; }
    .hc-body h1 { font-size: 1.5rem; }
    .hc-body h2 { font-size: 1.18rem; }
}