/*
Template: shaper
Theme Name: Shaper（シェイパー） Child
Theme URI: http://ownedmediaclub.jp/plus/
Author: Catch the Web Inc.
Author URI: http://www.catch-the-web.com/
Description: Shaper（シェイパー）は、サーフボードを作りあげる職人のこと。サーフボードの質は、職人が作るシェープで決まるとも言われています。OMCのメンバーには、インターネットの荒波を乗りこなす、質の高いサーフボード（メディア）を作り上げていって欲しい。そんな想いで名付けました。
Version: 1.0.0
*/
#comment-form-sns ul { list-style: none; margin: 0 0 0 .75em; padding: 0; display: inline-flex; gap: .5em; }
#comment-form-sns li { display: inline-block; }
#comment-form-sns i { font-size: 1rem; line-height: 1; }
#comment-form-sns a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; border: 1px solid #ddd; }
/* MathJax v3 (CHTML) の行間リセット */
mjx-container { line-height: 0 !important; }                /* ルートで余白をゼロに */
mjx-container * { line-height: normal !important; }         /* 内部要素は通常行間に戻す */
mjx-container[jax="CHTML"][display="false"] {               /* インライン数式の体裁 */
  display: inline-block;
}
/* （任意）ディスプレイ数式の上下マージンを適度に */
mjx-container[jax="CHTML"][display="true"] {
  margin: 1em 0;
}

/* Docs のテーブル内段落をリセット（余白の犯人を除去） */
.content-post table[class^="c"] td > p,
.content-post table[class*=" c"] td > p {
    margin: 0 !important;
    line-height: 1.4; /* 必要に応じて調整 */
}
/* Docs が挿入する空行/高段落も無効化（必要なら） */
.content-post p.c4 {
    margin: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
}
/* 表直後の段落の上マージンも詰める */
.content-post table[class^="c"] + p,
.content-post table[class*=" c"] + p {
    margin-top: 0 !important;
}

/* テーブルを横スクロール可能に */
.content-post table[class^="c"],
.content-post table[class*=" c"] {
    width: 100%;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

/* セル内テキスト折り返し禁止 */
.content-post table[class^="c"] td,
.content-post table[class^="c"] th,
.content-post table[class*=" c"] td,
.content-post table[class*=" c"] th {
    white-space: nowrap;
}

/**************************************
 * Docsテーブル RWD最適化（cNクラス対象）
 **************************************/

/* [共通] セル内段落の余白除去で行間をキープ */
.content-post table[class^="c"] td > p,
.content-post table[class*=" c"] td > p {
  margin: 0 !important;
  line-height: 1.4;
}

/* [共通] Docs由来の空段落を無効化（必要に応じて） */
.content-post p.c4 {
  margin: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
}

/********************************************
 *  PCでは固定、スマホでは横スクロール
 ********************************************/
@media (max-width: 768px) {
  /* テーブルをスクロール可能に */
  .content-post table[class^="c"],
  .content-post table[class*=" c"] {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* 指操作を滑らかに */
  }
}

/********************************************
 * ヘッダ（th）をスクロール時に固定
 ********************************************/
.content-post table[class^="c"] th,
.content-post table[class*=" c"] th {
  position: sticky;
  top: 0;
  z-index: 2;

  /* 固定時も背景が隠れないように */
  background-color: #d9e7f4; /* お好みの色に */
}

/********************************************
 * 小補正：セル全体を見やすい行間に
 ********************************************/
.content-post table[class^="c"] td,
.content-post table[class*=" c"] td,
.content-post table[class^="c"] th,
.content-post table[class*=" c"] th {
  line-height: 1.4;
}

/* もともとのバッジ要素（.related-article-list-category .inner）の色付け */
.related-article-list .related-article-list-category{
  /* 親の “文字色” を CSS 変数に退避 */
  --badge-bg: currentColor;
}

.related-article-list .related-article-list-category .inner{
  /* 背景＝元の文字色、文字＝白 */
  background-color: var(--badge-bg) !important;
  color: #fff !important;
  border: 0;
  border-radius: 6px;
  padding: 3px 8px 2px;  /* お好みで微調整 */
  line-height: 1.2;
}

/* バッジ内の a も白に統一（テーマ側のリンク色を打ち消す） */
.related-article-list .related-article-list-category .inner a{
  color: #fff !important;
  text-decoration: none;
}

/* ホバー時は少しだけ薄く */
.related-article-list .related-article-list-category .inner:hover{
  opacity: .9;
}
/* 例: 高校数学 */
body.category-高校数学 .related-article-list .related-article-list-category { color:#2563eb; }

/* 例: プログラミング */
body.category-プログラミング .related-article-list .related-article-list-category { color:#059669; }