@charset "UTF-8";
/* =============================================================
   custom.css — 手編集カスタムCSS（追加スタイルはここに書く）

   ■ このファイルの位置づけ
   - 配信される共通CSSは assets/css/common.css。custom.css はその「後」に読み込まれる。
   - common.css は SCSS(_scss/) からコンパイルされた約19,000行の巨大ファイル。
     ただし現在ビルド環境が無く、過去の追加分は common.css の 17881行目以降に
     直接手編集で継ぎ足されてきた（SCSSとcommon.cssは乖離している）。
   - ⚠️ SCSSの再コンパイルは禁止（手編集分が全て消える）。詳細は common.scss の警告を参照。

   ■ 運用ルール（今後の手編集はこの方針で）
   1. 追加・修正は原則このファイルに、用途ごとに区切り見出しを付けて書く。
   2. !important は原則使わない。やむを得ず使う場合は理由をコメントで残す。
   3. すべてのルールに「何のための指定か」をコメントで残す。
   4. custom.css は common.css の後に読み込まれるため、同詳細度なら custom.css が勝つ。
   ============================================================= */

/* -------------------------------------------------------------
   ブログ個別記事（single-blog.php）の上余白
   理由: 他テンプレートは冒頭に .c-mv1 / .c-mv2 のヒーロー領域(高さ385px)があり、
        それが固定ヘッダー(163px)下の余白を自然に作っている。
        しかしブログ個別記事だけヒーロー領域が無く、body の padding-top:163px しか
        無いため、ヘッダー直下にぶら下がるパンくず(.c-breadcrumb)へ記事先頭の
        カテゴリタグが潜り込んでしまう。→ このページ専用に上余白を確保して回避する。
   ------------------------------------------------------------- */
main.l-inner2.blog-content {
  padding-top: 130px;
}
@media (max-width: 799px) {
  main.l-inner2.blog-content {
    padding-top: 80px;
  }
}

/* -------------------------------------------------------------
   SP: .c-mv1 ヒーロー領域（ブログ一覧・受講生の声アーカイブ等）の上余白
   理由: common.js が スマホ（≤750px幅）では viewport を強制的に width=375 に設定する。
        その結果 @media (max-width:375px) が発動し、
          body { padding-top: 60px }  ← ヘッダー高さ分
          .c-mv1 { padding-top: 20px } ← common.css の既定値
        となるが、合計80px（= 60+20）とヘッダー下端60pxの差がわずか20pxしかなく、
        端末・ブラウザの差異でタイトルが固定ヘッダーに隠れることがある。
        50px に増やすことで確実に60px以上の余白を確保する。
        （.c-mv2 は margin-top:150px が別途あるため対象外）
   ------------------------------------------------------------- */
@media screen and (max-width: 375px) {
  .c-mv1 {
    padding-top: 50px;
  }
}

/* -------------------------------------------------------------
   読了時間（ブログカード・個別記事）
   ------------------------------------------------------------- */
.reading-time {
  font-size: 0.85em;
  color: #888;
  margin-left: 8px;
}

/* -------------------------------------------------------------
   ブログ個別記事：タグ一覧
   ------------------------------------------------------------- */
.blog-tags {
  margin: 24px 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.blog-tag {
  display: inline-block;
  font-size: 1.3rem;
  color: #555;
  background: #f5f5f5;
  padding: 4px 10px;
  border-radius: 3px;
  text-decoration: none;
}
.blog-tag:hover {
  background: #e8e8e8;
  color: #333;
}

/* -------------------------------------------------------------
   ブログカード：サムネイル未設定時のロゴフォールバック
   ------------------------------------------------------------- */
.card-no-thumbnail {
  object-fit: contain;
  padding: 20px;
  background: #f8f8f8;
}

/* -------------------------------------------------------------
   ブログカード：抜粋文
   ------------------------------------------------------------- */
.c-card3 .excerpt {
  font-size: 1.3rem;
  color: #666;
  line-height: 1.6;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -------------------------------------------------------------
   ブログ個別記事：目次（TOC）
   見出しが3つ以上ある記事にのみ自動挿入
   ------------------------------------------------------------- */
.blog-toc {
  background: #f8f7f5;
  border-left: 3px solid #ad002d;
  padding: 20px 28px;
  margin: 32px 0;
  max-width: 680px;
}
.blog-toc__title {
  font-weight: bold;
  font-size: 1.5rem;
  color: #333;
  margin: 0 0 12px;
}
.blog-toc__list {
  margin: 0;
  padding-left: 20px;
  list-style: decimal;
}
.blog-toc__item {
  margin: 6px 0;
  font-size: 1.4rem;
  line-height: 1.5;
}
.blog-toc__item a {
  color: #555;
  text-decoration: none;
}
.blog-toc__item a:hover {
  color: #ad002d;
  text-decoration: underline;
}
.toc-level-3 {
  padding-left: 16px;
  font-size: 1.3rem;
}
.toc-level-4 {
  padding-left: 32px;
  font-size: 1.2rem;
}
@media (max-width: 799px) {
  .blog-toc {
    max-width: 100%;
    padding: 16px 20px;
  }
}

/* -------------------------------------------------------------
   著者情報：所属名
   ------------------------------------------------------------- */
.author-org {
  color: #888;
  font-size: 0.9em;
  margin: 2px 0 0;
}

/* -------------------------------------------------------------
   シェアボタン：LinkedIn（share.php に追加）
   SVGアイコンが無いためCSSでバッジを生成
   ------------------------------------------------------------- */
.c-sns__linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #0a66c2;
  color: #fff;
  font-weight: bold;
  font-size: 1.4rem;
  font-family: Arial, sans-serif;
  border-radius: 4px;
  vertical-align: middle;
}
a.linkedin:hover .c-sns__linkedin {
  background: #004182;
}