/* ================================
   テスト用目次スタイル（featurePage.css の後に読み込む）
   ↳ .page-article 内のナビだけに適用
   ================================ */

p{
    font-size: 1em 
}
/* 1. まず全てのリストマーカーを完全にリセット */
.page-article nav[aria-label="目次"] ol,
.page-article nav[aria-label="目次"] ol li,
.page-article nav[aria-label="目次"] ol ol,
.page-article nav[aria-label="目次"] ol ol li,
.page-article nav[aria-label="目次"] ol ol ol,
.page-article nav[aria-label="目次"] ol ol ol li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. H2（第一階層）にだけ番号を付与 */
.page-article nav[aria-label="目次"] > ol {
  counter-reset: toc1 !important;
}
.page-article nav[aria-label="目次"] > ol > li {
  counter-increment: toc1 !important;
  position: relative !important;
  margin-bottom: 0.8em !important;
  padding-left: 2em !important;       /* テキストをずらす */
}
.page-article nav[aria-label="目次"] > ol > li::before {
  content: counter(toc1) ". " !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 2em !important;
  text-align: right !important;
  color: var(--accent-blue) !important;
  font-weight: bold !important;
}

/* 3. H3（第二階層）は ● マーカー */
.page-article nav[aria-label="目次"] > ol > li > ol {
  margin-top: 0.5em !important;
}
.page-article nav[aria-label="目次"] > ol > li > ol > li {
  position: relative !important;
  margin-bottom: 0.6em !important;
  padding-left: 1.5em !important;
}
.page-article nav[aria-label="目次"] > ol > li > ol > li::before {
  content: "●" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1.5em !important;
  text-align: center !important;
  color: var(--accent-green) !important;
  font-size: 0.8em !important;
}

/* 4. H4（第三階層）は ◦ マーカー */
.page-article nav[aria-label="目次"] > ol > li > ol > li > ol {
  margin-top: 0.4em !important;
}
.page-article nav[aria-label="目次"] > ol > li > ol > li > ol > li {
  position: relative !important;
  margin-bottom: 0.5em !important;
  padding-left: 1.2em !important;
}
.page-article nav[aria-label="目次"] > ol > li > ol > li > ol > li::before {
  content: "◦" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1.2em !important;
  text-align: center !important;
  color: var(--soft-gray) !important;
  font-size: 0.8em !important;
}

/* 5. 目次コンテナ装飾（中央寄せ＋背景） */
.page-article nav[aria-label="目次"] {
  width: 90% !important;
  max-width: 700px !important;
  margin: 2rem auto !important;
  background: rgba(38,144,186,0.06) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08) !important;
  border-radius: 8px !important;
  padding: 1rem 1.2rem !important;
}
.page-article nav[aria-label="目次"] a {
  display: inline-block !important;
  color: var(--main-dark) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.page-article nav[aria-label="目次"] a:hover {
  color: var(--accent-blue) !important;
}

/* 6. モバイル時：通常フローに戻す */
@media (max-width: 768px) {
  .page-article nav[aria-label="目次"] {
    width: auto !important;
    margin: 1.5rem 1rem !important;
    padding: 1rem !important;
  }
  .page-article nav[aria-label="目次"] ol ol,
  .page-article nav[aria-label="目次"] ol ol ol {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}

/* ────────────────────────────────────────
   記事メタ情報（公開日＋更新日）
   Global に出して OK
──────────────────────────────────────── */
.post-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 1.5rem;
  color: #666666;
  margin-top: 0.3rem;
  width: 100%;
}
.post-meta__published::before { content: "公開："; }
.post-meta__published + .post-meta__updated {
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 1px solid #ddd;
}
@media (max-width: 768px) {
  .post-meta {
    justify-content: flex-start;
    font-size: 0.9rem;
    margin-top: 0.4rem;
  }
}

/* ────────────────────────────────────────
   監修者カード（supervisor）スタイルを追加
──────────────────────────────────────── */
.supervisor {
  display: table !important;
  margin: 2rem auto !important;
  padding: 1rem !important;
  background-color: #E6F7FF !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}
.supervisor__img {
  display: table-cell !important;
  vertical-align: middle !important;
}
.supervisor__img img {
  display: block !important;
  width: 100px !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 4px !important;
}
.supervisor__info {
  display: table-cell !important;
  vertical-align: middle !important;
  padding-left: 1rem !important;
  line-height: 1.4 !important;
}
.supervisor__role {
  font-weight: bold !important;
  margin: 0 0 0.25em !important;
}
.supervisor__company,
.supervisor__dept,
.supervisor__name {
  margin: 0 !important;
}
.supervisor__name {
  margin-top: 0.5em !important;
  font-weight: bold !important;
}
@media (max-width: 600px) {
  .supervisor {
    display: block !important;
    text-align: center !important;
  }
  .supervisor__img {
    display: block !important;
    margin: 0 auto 1rem !important;
  }
  .supervisor__info {
    display: block !important;
    padding-left: 0 !important;
    margin-top: 1rem !important;
  }
}

/* ────────────────────────────────────────
   コラム内の画像を中央寄せ＋キャプション右揃え
──────────────────────────────────────── */
/* s-featureContent-body 以下、すべての図版を中央寄せ＋キャプション右揃え */
.s-featureContent-body figure.image {
  display: table !important;
  margin: 0 auto 1.5em !important;
}
.s-featureContent-body figure.image img {
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
}
.s-featureContent-body figure.image figcaption {
  text-align: right !important;
  margin-top: 0.5em !important;
  color: #666 !important;
  font-size: 0.9rem !important;
}

/* ヘッダーバナー画像を確実に中央寄せ */
.s-featureContent-item__headerImage {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ────────────────────────────────────────
   コラム本文中の段落間隔拡大
──────────────────────────────────────── */
.s-featureContent-body p {
  margin-bottom: 1.5em;   /* 調整可 */
}

/* 最後の段落だけ余白をなくす */
.s-featureContent-body p:last-of-type {
  margin-bottom: 0;
}

/* ────────────────────────────────────────
   コラム内テーブルを内容幅にフィット＋セルにパディング
──────────────────────────────────────── */

/* 1. 図版コンテナ自体を中央寄せ */
.s-featureContent-body figure.table {
  display: table;
  margin: 2em auto !important;
  width: auto !important;    /* 内容幅に合わせる */
}

/* 2. テーブル本体も中央寄せかつ内容幅にフィット */
.s-featureContent-body figure.table table {
  display: table;
  margin: 0 auto 1em !important;
  width: auto !important;    /* 自動幅 */
  border-collapse: collapse;
}

/* 3. セルに適度な余白を付与 */
.s-featureContent-body figure.table table th,
.s-featureContent-body figure.table table td {
  padding: 0.8em 1em !important;  /* 上下0.8em、左右1emの余白 */
  border: 1px solid #666 !important; /* 境界線はお好みで */
}

/* 4. ヘッダー行だけ背景色を付けたい場合例 */
.s-featureContent-body figure.table table th {
  background-color: #E6F7FB !important;
  color: #1C3040 !important;
}

.orange_strong{
  color:#E57700;
  font-weight:bold;
}