/* ============================================================
   KNOCK — 営業・キャリアのメディア（KOR運営）
   /blog/ ・ /guide/ 専用スキン（白 × 黒 × ディープティールのエディトリアル）
   本体 style.css の上に読み込み、body.media 配下のみ上書きする。
   本体サイトのデザイントークンには干渉しない。
   ============================================================ */

.media {
  --k-paper:    #FFFFFF;
  --k-ink:      #141414;
  --k-body:     #1E1E1E;
  --k-ink-soft: #3F3F3F;
  --k-ink-mute: #767676;
  --k-accent:   #0F6E5B;   /* ディープティール */
  --k-accent-d: #0B5446;   /* 文字用の濃いティール（白地でAA） */
  --k-accent-l: #A7D5CB;   /* 番号など装飾用の淡いティール */
  --k-deep:     #0C4A3E;   /* フッター/CTA/追従バーの面 */
  --k-line:     #EAEAEA;
  --k-bg-subtle:#F1F7F5;   /* 淡いティール地（結論・要点・タイムライン） */
  --k-mark:     #C7E8DF;   /* マーカー */
  --k-black:    #141414;
  --k-measure:  720px;

  --k-serif:  "Shippori Mincho", "Yu Mincho", serif;
  --k-disp:   "Archivo", "Zen Kaku Gothic New", sans-serif;
  --k-body-f: "Noto Sans JP", "Zen Kaku Gothic New", system-ui, sans-serif;

  background: var(--k-paper);
  color: var(--k-ink);
  font-family: var(--k-body-f);
  letter-spacing: .01em;
}

/* ── 読了プログレス（上部・ティール） ───────────────────── */
.media .reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(15,110,91,.12); z-index: 60; }
.media .reading-progress__bar { height: 3px; width: 0; background: var(--k-accent); transition: width .1s linear; }

/* ── マストヘッド（白基調・ティールのアクセント） ───────── */
.masthead { background: #fff; color: var(--k-ink); border-bottom: 1px solid var(--k-line); }
.masthead__bar {
  max-width: 1120px; margin-inline: auto; padding: 0 var(--gutter);
  min-height: 64px; display: flex; align-items: center; gap: 20px;
}
.masthead__brand { display: inline-flex; align-items: baseline; gap: 12px; text-decoration: none; color: var(--k-ink); }
.masthead__logo { font-family: var(--k-disp); font-weight: 800; font-size: 1.55rem; letter-spacing: .24em; padding-left: .24em; line-height: 1; color: var(--k-ink); }
.masthead__tagline { font-size: .72rem; letter-spacing: .04em; color: var(--k-ink-mute); white-space: nowrap; }
@media (max-width: 640px) { .masthead__tagline { display: none; } }
.masthead__nav { display: none; gap: 26px; margin-left: 24px; }
.masthead__nav a { font-size: .92rem; text-decoration: none; color: var(--k-ink-soft); font-weight: 500; transition: color var(--t); }
.masthead__nav a:hover, .masthead__nav a[aria-current="page"] { color: var(--k-accent-d); }
.masthead__cta {
  margin-left: auto; display: inline-flex; align-items: center; min-height: 40px;
  padding: 8px 18px; border-radius: 999px; background: var(--k-accent); color: #fff;
  font-weight: 700; font-size: .88rem; text-decoration: none; white-space: nowrap;
  transition: background var(--t), transform var(--t);
}
.masthead__cta:hover { background: var(--k-accent-d); transform: translateY(-1px); }
.masthead__menu { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 0; color: var(--k-ink); cursor: pointer; }
@media (min-width: 880px) { .masthead__nav { display: flex; } .masthead__menu { display: none; } .masthead__cta { margin-left: 0; } }
.masthead__operator { border-top: 1px solid var(--k-line); background: var(--k-bg-subtle); font-size: .74rem; color: var(--k-ink-mute); text-align: center; padding: 6px 12px; }
.masthead__operator a { color: var(--k-accent-d); text-decoration: none; }
.masthead__operator a:hover { text-decoration: underline; }

/* KNOCK ドロワー（main.js の #hamburger/#drawer を流用） */
.media .drawer { background: var(--k-deep); }
.media .drawer a { color: #fff; border-bottom-color: rgba(255,255,255,.16); font-family: var(--k-body-f); }
.media .drawer .knock-cta { margin-top: 16px; background: #fff; color: var(--k-accent-d); border-radius: 999px; padding: 12px 20px; text-align: center; font-weight: 700; }

/* ── 共通の地色・本文 ─────────────────────────────────── */
.media .section { padding-block: clamp(48px, 8vw, 96px); }
.media .section--subtle { background: var(--k-bg-subtle); }
.media .container { max-width: 1120px; }

/* ── 記事レイアウト（追従インデックス＋本文の2カラム） ──── */
.media .article-layout { display: block; max-width: var(--k-measure); margin-inline: auto; }
.media .article-index { margin: 0 0 28px; }
.media .article-index__label { font-family: var(--k-disp); font-weight: 800; letter-spacing: .12em; font-size: .66rem; color: var(--k-ink-mute); margin-bottom: 10px; }
.media .article-index a { display: block; font-size: .84rem; color: var(--k-ink-mute); text-decoration: none; padding: 6px 0 6px 12px; border-left: 2px solid var(--k-line); line-height: 1.55; transition: color .2s, border-color .2s; }
.media .article-index a:hover { color: var(--k-ink); }
.media .article-index a.is-active { color: var(--k-accent-d); font-weight: 700; border-left-color: var(--k-accent); }
.media .article-index__author { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--k-line); display: flex; align-items: center; gap: 8px; font-size: .76rem; color: var(--k-ink-mute); }
@media (min-width: 980px) {
  .media .article-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; align-items: start; max-width: 1000px; }
  .media .article-index { position: sticky; top: 24px; margin: 0; }
}

/* 記事タイポグラフィ（エディトリアル） */
.media .article { max-width: var(--k-measure); counter-reset: ksec; }
.media .article h1,
.media h1 { font-family: var(--k-serif) !important; font-weight: 700; letter-spacing: .01em; color: var(--k-ink); }
.media .article h2 {
  font-family: var(--k-serif) !important; font-weight: 700; font-size: clamp(1.35rem, 3vw, 1.7rem);
  line-height: 1.4; color: var(--k-ink); counter-increment: ksec; position: relative;
  margin: 2.4em 0 1em; padding-bottom: .55em;
}
.media .article h2::before { content: counter(ksec, decimal-leading-zero); display: block; font-family: var(--k-disp); font-weight: 800; font-size: 1.5rem; letter-spacing: .04em; color: var(--k-accent-l); line-height: 1; margin-bottom: .25em; }
.media .article h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 2px; background: var(--k-accent); }
.media .article h3 { font-family: var(--k-serif); font-weight: 700; font-size: 1.18rem; margin: 1.7em 0 .5em; color: var(--k-ink); }
.media .article p { color: var(--k-body); line-height: 1.95; font-size: 1.02rem; margin: 0 0 1.3em; }
.media .article p.lead { font-size: 1.14rem; color: var(--k-ink); line-height: 1.9; }
.media .article a:not(.btn) { color: var(--k-accent-d); text-underline-offset: 2px; }
.media .article strong { font-weight: 700; color: var(--k-ink); }
.media .article .mark, .media .article mark { background: linear-gradient(transparent 58%, var(--k-mark) 58%); color: var(--k-ink); font-weight: 700; padding: 0 .05em; }

/* リスト（チェック／タイムライン） */
.media .article ul.daily,
.media .article ul.bullets { list-style: none; padding: 0; margin: 1.2em 0; display: grid; gap: 10px; }
.media .article ul.daily li { padding: 11px 14px; background: var(--k-bg-subtle); border-radius: 8px; line-height: 1.6; display: flex; gap: 14px; align-items: baseline; }
.media .article ul.daily li strong { display: inline-block; min-width: 3.4em; color: var(--k-accent-d); font-family: var(--k-disp); font-weight: 800; }
.media .article ul.bullets li { padding-left: 1.6em; position: relative; line-height: 1.9; color: var(--k-body); }
.media .article ul.bullets li::before { content: "✓"; position: absolute; left: 0; color: var(--k-accent); font-weight: 700; }

/* 要点カード（callout） */
.media .callout { background: var(--k-bg-subtle); border: 1px solid var(--k-line); border-radius: 10px; padding: 16px 18px; margin: 22px 0; }
.media .callout__label { font-family: var(--k-disp); font-weight: 800; letter-spacing: .06em; color: var(--k-accent-d); font-size: .72rem; margin-bottom: 9px; display: flex; align-items: center; gap: 6px; }
.media .callout ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.media .callout li { padding-left: 1.5em; position: relative; font-size: .95rem; line-height: 1.7; color: var(--k-body); }
.media .callout li::before { content: "✓"; position: absolute; left: 0; color: var(--k-accent); font-weight: 700; }

/* プルクオート */
.media .article blockquote { margin: 28px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--k-accent); }
.media .article blockquote p { font-family: var(--k-serif); font-size: 1.28rem; line-height: 1.7; color: var(--k-ink); margin: 0; }
.media .article blockquote footer { font-size: .9rem; color: var(--k-ink-mute); margin-top: 8px; }

/* 結論ボックス・目次・見出し・パンくず */
.media .h2 { font-family: var(--k-serif); color: var(--k-ink); }
.media .eyebrow { font-family: var(--k-disp); color: var(--k-accent-d); letter-spacing: .14em; }
.media .post-card__cat,
.media .breadcrumb a { color: var(--k-accent-d); }
.media .tldr { background: var(--k-bg-subtle); border-left: 3px solid var(--k-accent); border-radius: 0 8px 8px 0; }
.media .tldr__label { color: var(--k-accent-d); font-family: var(--k-disp); letter-spacing: .08em; }
.media .toc { border-color: var(--k-line); background: #fff; }
.media .byline__name { color: var(--k-ink); }
.media .byline__dates { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8rem; color: var(--k-ink-mute); margin-left: auto; }

/* ── 記事カード（写真主役） ───────────────────────────── */
.media .postgrid { gap: 32px; }
.media .post-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.media .post-card:hover { transform: none; box-shadow: none; }
.media .post-card__thumb { border-radius: 10px; background: var(--k-bg-subtle); display: flex; align-items: center; justify-content: center; color: var(--k-ink-mute); font-family: var(--k-disp); letter-spacing: .08em; font-size: .8rem; overflow: hidden; }
.media .post-card:hover .post-card__thumb img { transform: scale(1.03); }
.media .post-card__thumb img { transition: transform .4s ease; }
.media .post-card__body { padding: 14px 2px 0; }
.media .post-card__title { font-family: var(--k-serif); font-weight: 700; font-size: 1.18rem; line-height: 1.5; color: var(--k-ink); }
.media .post-card__cat { font-family: var(--k-disp); letter-spacing: .1em; font-size: .72rem; }
.media .post-card__dek { color: var(--k-ink-soft); }
.media .post-card__author { color: var(--k-ink); }
.media .post-card__meta { color: var(--k-ink-mute); }

@media (min-width: 880px) {
  .media .post-card--feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: center; }
  .media .post-card--feature .post-card__thumb { height: 100%; aspect-ratio: 16/10; }
  .media .post-card--feature .post-card__title { font-size: clamp(1.6rem, 2.4vw, 2.1rem); -webkit-line-clamp: 3; }
  .media .post-card--feature .post-card__dek { font-size: 1rem; -webkit-line-clamp: 3; }
}

/* カテゴリタブ */
.media .cattabs a { border-color: var(--k-line); color: var(--k-ink-soft); font-family: var(--k-body-f); }
.media .cattabs a:hover { color: var(--k-accent-d); border-color: var(--k-accent); }
.media .cattabs a[aria-current="page"] { background: var(--k-ink); border-color: var(--k-ink); color: #fff; }

/* 関連カード */
.media .related__card { border-color: var(--k-line); border-radius: 10px; }
.media .related__card:hover { border-color: var(--k-accent); }
.media .related__title { font-family: var(--k-serif); }
.media .related__cat { color: var(--k-accent-d); }

/* インラインCTA（廃止方針／残存時の見た目だけ担保） */
.media .inlinecta { background: var(--k-deep); border-radius: 12px; }
.media .inlinecta p { color: #fff; }
.media .inlinecta .btn--primary { background: #fff; color: var(--k-accent-d); }
.media .inlinecta .btn--secondary { border-color: rgba(255,255,255,.72); color: #fff; background: rgba(255,255,255,.08); }

/* ボタン（メディア内） */
.media .btn--primary { background: var(--k-accent); color: #fff; }
.media .btn--primary:hover { background: var(--k-accent-d); }
.media .btn--secondary { border-color: var(--k-ink); color: var(--k-ink); }
.media .btn--secondary:hover { background: var(--k-ink); color: #fff; }

/* 末尾CTAバンド（ディープティール地・KOR採用への送客） */
.media .ctaband { background: var(--k-deep); }
.media .ctaband .h2 { font-family: var(--k-serif); color: #fff; }
.media .ctaband .lead { color: rgba(255,255,255,.88); }
.media .ctaband__note { color: rgba(255,255,255,.72); }
.media .ctaband .btn--primary { background: #fff; color: var(--k-accent-d); }
.media .ctaband .btn--primary:hover { background: #EAF4F1; }
.media .ctaband .btn--secondary { border-color: rgba(255,255,255,.72); color: #fff; background: rgba(255,255,255,.08); }
.media .ctaband .btn--secondary:hover { background: #fff; color: var(--k-accent-d); }

/* ── KNOCK フッター（ディープティール地／運営=KOR 明示） ── */
.knock-footer { background: var(--k-deep); color: rgba(255,255,255,.80); }
.knock-footer__inner { max-width: 1120px; margin-inline: auto; padding: 48px var(--gutter); display: grid; gap: 28px; }
@media (min-width: 768px) { .knock-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; } }
.knock-footer__logo { font-family: var(--k-disp); font-weight: 800; letter-spacing: .24em; font-size: 1.3rem; color: #fff; }
.knock-footer__about { font-size: .86rem; line-height: 1.9; margin-top: 8px; }
.knock-footer__operator { font-size: .82rem; margin-top: 12px; color: rgba(255,255,255,.7); }
.knock-footer__operator a { color: #fff; text-decoration: none; }
.knock-footer__operator a:hover { text-decoration: underline; }
.knock-footer__title { font-family: var(--k-disp); letter-spacing: .1em; font-size: .78rem; color: #fff; margin-bottom: 12px; }
.knock-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.knock-footer a { color: rgba(255,255,255,.80); text-decoration: none; font-size: .88rem; }
.knock-footer a:hover { color: #fff; }
.knock-footer__copy { border-top: 1px solid rgba(255,255,255,.16); text-align: center; font-size: .76rem; color: rgba(255,255,255,.6); padding: 16px; }

/* 追従CTA（モバイル）＝ディープティール地 */
.media .stickycta { background: var(--k-deep); }
.media .stickycta .btn--primary { background: #fff; color: var(--k-accent-d); }
.media .stickycta .btn--secondary { border-color: rgba(255,255,255,.72); color: #fff; }

/* 編集部/著者ボックス（E-E-A-T／「次の一歩」③） */
.media .authorbox { max-width: var(--k-measure); margin: 40px auto 0; display: flex; gap: 16px; padding: 24px; background: var(--k-bg-subtle); border: 1px solid var(--k-line); border-radius: 12px; }
.media .authorbox__avatar { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 999px; background: #fff; border: 1px solid var(--k-line); }
.media .authorbox__name { font-family: var(--k-serif); font-weight: 700; color: var(--k-ink); font-size: 1.05rem; }
.media .authorbox__role { font-size: .82rem; font-weight: 500; color: var(--k-ink-soft); margin-left: 10px; }
.media .authorbox__bio { color: var(--k-ink-soft); font-size: .9rem; line-height: 1.8; margin: 6px 0 0; }
.media .authorbox__team { color: var(--k-accent-d); font-family: var(--k-disp); letter-spacing: .04em; font-size: .76rem; margin: 8px 0 0; }
.media .authorbox__review { color: var(--k-ink-mute); font-size: .82rem; margin: 6px 0 0; }

/* ページヒーロー（ガイド・一覧／白基調） */
.media .page-hero { background: var(--k-paper); color: var(--k-ink); border-bottom: 1px solid var(--k-line); }
.media .page-hero h1 { color: var(--k-ink); font-size: clamp(1.9rem, 4vw, 2.8rem); }
.media .page-hero .lead { color: var(--k-ink-soft); }
.media .page-hero .breadcrumb a,
.media .page-hero .breadcrumb li { color: var(--k-ink-mute); }
.media .page-hero__media img { opacity: .08; }