/* トピックス（一覧・記事）の真ん中の見た目。今の HP とAIツールのページ（/tools/_shared/tools.css）に合わせる
   色・文字は tools.css の変数（--kt-navy・--kt-serif など）を使う。記事の本文は /assets/prose.css */

/* HP（STUDIO）の初期化（すべての要素の 文字・行間・色・余白・下線・点 を消す）を、ここでは元に戻す。
   :where() で強さを0にして、AIツールのボタン（.kt-btn）などの指定に負けるようにする */
:where(.kh,.kh *){font-family:inherit;line-height:inherit;color:inherit;word-spacing:normal;transition:none;box-sizing:border-box}
.kh{font-family:var(--kt-sans);color:var(--kt-ink);line-height:1.9;align-self:stretch;width:100%}
.kh a{text-decoration:none}
.kh-narrow{max-width:820px}

/* パンくず：長い記事の題名は折り返す（HP の部品は1行のままのため） */
[aria-label="パンくずリスト"]{flex-wrap:wrap!important;row-gap:6px}
[aria-label="パンくずリスト"]>[aria-current="page"]{min-width:0;max-width:100%;overflow-wrap:anywhere}

/* ---- 一覧 ---- */
.kh-list{margin:0}
.kh-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 40px}
.kh-cat{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--kt-line);background:#fff;color:var(--kt-navy);font-size:14px;line-height:1.4;padding:10px 18px}
.kh-cat span{font-family:var(--kt-en);color:var(--kt-orange);font-size:13px}
.kh-cat:hover{border-color:var(--kt-navy)}
.kh-cat.is-on{background:var(--kt-navy);border-color:var(--kt-navy);color:#fff}
.kh-cat.is-on span{color:#fff}

.kh-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;list-style:none;margin:0;padding:0}
.kh-card{background:#fff;border:1px solid var(--kt-line);min-width:0}
.kh-card-link{display:flex;flex-direction:column;height:100%;color:inherit}
.kh-card-img{aspect-ratio:16/9;background:var(--kt-beige);overflow:hidden}
.kh-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.kh-card-link:hover .kh-card-img img{transform:scale(1.03)}
.kh-card-noimg{display:grid;place-items:center;width:100%;height:100%;background:var(--kt-navy)}
.kh-card-noimg span{font-family:var(--kt-en);color:#fff;letter-spacing:.3em;font-size:15px}
.kh-card-body{padding:20px 22px 24px}
.kh-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 10px;font-size:13px;color:var(--kt-sub)}
.kh-card-meta time{font-family:var(--kt-en);font-size:15px;letter-spacing:.06em;color:var(--kt-sub)}
.kh-chip{display:inline-block;background:var(--kt-navy);color:#fff;font-size:12px;line-height:1.6;padding:2px 10px}
a.kh-chip:hover{background:#2a3d5c}
.kh-card-title{font-family:var(--kt-serif);font-weight:400;font-size:19px;line-height:1.7;color:var(--kt-navy);margin:0 0 8px}
.kh-card-link:hover .kh-card-title{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.kh-card-desc{font-size:14px;line-height:1.9;color:var(--kt-sub);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kh-empty{text-align:center;color:var(--kt-sub);font-size:15px;margin:8px 0 0;padding:32px 0;border-top:1px solid var(--kt-line2);border-bottom:1px solid var(--kt-line2)}
.kh-pager{display:flex;justify-content:center;align-items:center;gap:20px;margin:48px 0 0;font-size:14px}
.kh-pager a,.kh-pager .off{border:1px solid var(--kt-navy);color:var(--kt-navy);padding:10px 22px;line-height:1.4}
.kh-pager a:hover{background:var(--kt-navy);color:#fff}
.kh-pager .off{border-color:var(--kt-line);color:#9AA1AB}
.kh-pager-now{font-family:var(--kt-en);font-size:16px;letter-spacing:.08em}

/* ---- 記事（今の HP（STUDIO）の記事ページに合わせる） ----
   パンくず → カテゴリ｜日付 → 題名（明朝 36px）→ アイキャッチ（幅 1170・高さ 500）→ 本文（幅 --kh-body・真ん中）→ 最新トピックス（ベージュの帯）→ お問い合わせ
   本文の文字は、HP の記事ページと同じ「Noto Sans 300 ＋ 端末の日本語の書体（ヒラギノなど）」
   本文の幅は --kh-body で決める（STUDIO の記事ページは 946。2026-10-29 こうせいさん「もうちょっと広く」→ 1040） */
.kh-main-article>.image.sd:first-child{display:none} /* 記事ページでは写真の帯（トピックスの見出し）を出さない */
.kh-main-article{padding-top:92px} /* ヘッダー（92px、浮いている）の下から始める。パンくずの上の間はパンくず側にある */
.kh-wrap{width:100%;max-width:1218px;margin:0 auto;padding:0 24px;box-sizing:border-box} /* 中身の幅は 1170（HP の記事ページと同じ） */
.kh-article-page{--kh-body:1040px;padding:150px 0 0;background:#fff}
.kh-article-page:has(.kh-preview){padding-top:40px}
.kh-preview{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;max-width:var(--kh-body);margin:0 auto 110px;background:#fff4d6;border:1px solid #e8d38a;padding:10px 16px;font-size:14px;line-height:1.6}
.kh-preview a{color:var(--kt-navy);text-decoration:underline}
.kh-article{margin:0}
.kh-a-head{margin:0 0 50px;padding:0;border:0}
.kh-a-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;margin:0 0 50px;font-size:16px;line-height:2;color:var(--kt-sub)}
.kh-a-meta a{color:var(--kt-sub)}
.kh-a-meta a:hover{text-decoration:underline}
.kh-a-sep{color:#bbb}
.kh-a-upd{font-size:14px}
.kh-a-title{font-family:var(--kt-serif);font-weight:400;font-size:36px;line-height:1.75;letter-spacing:0;color:var(--kt-navy);margin:0}
.kh-a-cover{margin:0 0 80px}
.kh-a-cover img{display:block;width:100%;aspect-ratio:1170/500;object-fit:cover}
.kh-a-body{max-width:var(--kh-body);margin:0 auto}
/* 目次（本文に [toc] が無いとき、本文の前に出す。HP の記事ページと同じ、真ん中の飾りなしの一覧） */
.kh-toc{margin:0 0 112px;padding:0;background:none}
.kh-toc ol{list-style:none;margin:0 auto;padding:0;width:max-content;max-width:100%;font-size:20px;font-weight:500;line-height:2.2;color:#777}
.kh-toc li{margin:0}
.kh-toc a{color:inherit;text-decoration:none}
.kh-toc a:hover{color:var(--kt-navy);text-decoration:underline}

/* 本文（/assets/prose.css）を HP の記事ページの文字に合わせ、HP の初期化で消えた点・下線・枠を戻す */
.kh .prose{--navy:var(--kt-navy);--serif:var(--kt-serif);font-family:'Noto Sans','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','YuGothic',Meiryo,sans-serif;font-weight:300;color:#333;font-size:18px;line-height:2}
.kh .prose ul{list-style:disc}
.kh .prose ol{list-style:decimal}
.kh .prose ul ul{list-style:circle}
.kh .prose li{list-style:inherit}
.kh .prose a{color:#1f6587;text-decoration:underline;text-underline-offset:3px}
.kh .prose strong{color:#333;font-weight:700}
.kh .prose em{font-style:italic}
.kh .prose u{text-decoration:underline}
.kh .prose s{text-decoration:line-through}
.kh .prose h2,.kh .prose h3,.kh .prose h4{font-family:var(--kt-serif)}
.kh .prose img{display:block;max-width:100%;height:auto}
.kh .prose .prose-toc ol{list-style:none;padding:0}
.kh .prose .prose-toc li{list-style:none}
.kh .prose .prose-toc a{color:inherit;text-decoration:none}
.kh .prose .prose-toc a:hover{color:var(--kt-navy);text-decoration:underline}

/* 部品のデザインの「スクロールしても残る」は、上の帯（ヘッダー 92px・900px 以下は 64px）の下で止める */
.kh .prose{--kd-sticky-top:100px}
.kh-a-note{margin:88px 0 0;padding:18px 22px;background:#f6f7f9;font-size:14px;line-height:1.9;color:var(--kt-sub)}
.kh-a-note p{margin:0}

/* 最新トピックス（記事の下の、ベージュの帯。HP の記事ページと同じ） */
.kh-latest{background:var(--kt-beige);padding:150px 0 200px;margin:150px 0 0}
.kt-section.kh-latest{background:var(--kt-beige)}
.kh-latest-h{font-family:var(--kt-serif);font-weight:400;font-size:48px;line-height:1.5;color:var(--kt-navy);margin:0 0 48px}
.kh-latest-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 36px;list-style:none;margin:0;padding:0}
.kh-latest-card{min-width:0}
.kh-latest-link{display:block;color:inherit}
.kh-latest-img{aspect-ratio:16/11;overflow:hidden;background:#e9e4df;margin:0 0 20px}
.kh-latest-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.kh-latest-link:hover .kh-latest-img img{transform:scale(1.03)}
.kh-latest-cat{font-size:16px;line-height:2;color:var(--kt-sub);margin:0 0 8px}
.kh-latest-title{font-family:var(--kt-serif);font-weight:500;font-size:24px;line-height:1.75;color:#333;margin:0 0 12px}
.kh-latest-link:hover .kh-latest-title{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.kh-latest-desc{font-size:18px;font-weight:300;line-height:2;color:#333;margin:0 0 16px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.kh-latest-more{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:300;line-height:2;color:#333;margin:0}
.kh-latest-more svg{width:20px;height:7px}

/* お問い合わせ（HP の記事ページの CONTACT の段。フォームはお問い合わせのページで） */
.kh-contact{padding:160px 0 180px;background:#fff}
.kh-contact-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 80px;align-items:start}
.kh-contact-act{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.kh-contact-note{font-size:14px;line-height:1.9;color:var(--kt-sub);margin:0}
.kh-contact-eyebrow{font-family:var(--kt-en);font-size:14px;letter-spacing:.25em;color:var(--kt-orange);margin:0 0 20px;line-height:1.4}
.kh-contact-h{font-family:var(--kt-serif);font-weight:400;font-size:32px;line-height:1.6;color:var(--kt-navy);margin:0 0 28px}
.kh-contact-lead{font-size:16px;line-height:2;color:var(--kt-ink);margin:0}
.kh-back{margin:8px 0 0;font-size:14px}
.kh-back a{color:var(--kt-navy);text-decoration:underline;text-underline-offset:4px}

/* ---- お知らせ（ページが見つからないときなど） ---- */
.kh-message{text-align:center;padding:16px 0 24px}
.kh-message-h{font-family:var(--kt-serif);font-weight:400;font-size:28px;line-height:1.6;color:var(--kt-navy);margin:0 0 16px}
.kh-message-text{font-size:15px;color:var(--kt-sub);margin:0 0 32px}
.kh-message-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0}

@media (min-width:640px){
  .kh-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1000px){
  .kh-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kh-cards.kh-cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .kh-main-article{padding-top:64px}
  .kh-article-page{padding-top:56px}
  .kh-article-page:has(.kh-preview){padding-top:16px}
  .kh-preview{margin:0 auto 32px}
  .kh-a-meta{margin-bottom:20px;font-size:14px}
  .kh-a-title{font-size:26px;line-height:1.6}
  .kh-a-head{margin-bottom:28px}
  .kh-a-cover{margin-bottom:40px}
  .kh-a-cover img{aspect-ratio:16/9}
  .kh-toc{margin-bottom:56px}
  .kh-toc ol{font-size:16px;line-height:2}
  .kh .prose{font-size:16px;line-height:1.95;--kd-sticky-top:72px}
  .kh-a-note{margin-top:56px}
  .kh-latest{padding:72px 0 88px;margin-top:80px}
  .kh-latest-h{font-size:30px;margin-bottom:28px}
  .kh-latest-cards{grid-template-columns:minmax(0,1fr);gap:36px}
  .kh-latest-title{font-size:20px}
  .kh-latest-desc,.kh-latest-more{font-size:16px}
  .kh-contact{padding:72px 0 88px}
  .kh-contact-in{grid-template-columns:minmax(0,1fr)}
  .kh-contact-text{order:-1}
  .kh-contact-h{font-size:26px}
  .kh-message-h{font-size:22px}
}
@media (min-width:641px) and (max-width:1100px){
  .kh-latest-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}