@charset "utf-8";

/* =========================================================
  FIX for Blog Detail ONLY
  ��������CSS�� index.css �̋����������I�ɑł�����
========================================================= */

body#blogDetail main,
body#blogDetail .blogMain {
  display: block;
}

/* �ǂ����� position/transform ���������ăY����̂��~�߂� */
body#blogDetail .blogMain *,
body#blogDetail .blogMain *::before,
body#blogDetail .blogMain *::after{
  transform: none;
}

/* �L���y�[�W�̃R���e���c�����u�����I�ɒ����񂹁v */
body#blogDetail .blogMain .contentsWrapper {
  width: min(1100px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* 2�J�����̈��艻�igrid����CSS�Œׂ����΍�j */
body#blogDetail .blogLayout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
}

/* ���X�|���V�u */
@media (max-width: 980px) {
  body#blogDetail .blogLayout {
    grid-template-columns: 1fr;
  }
}

/* ���ɔ�ԔƐl��9���́u��/�]��/�z�u�v�Ȃ̂ŁA�^�C�g��������������Z�b�g */
body#blogDetail .blogHeader,
body#blogDetail .blogTitle,
body#blogDetail .blogLead,
body#blogDetail .blogBody {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
}

/* �摜�Ȃǂʼn������\��ĕ����̂�h�� */
body#blogDetail img,
body#blogDetail video,
body#blogDetail iframe {
  max-width: 100%;
  height: auto;
}

/* �E�J�������͂ݏo��/�ׂ��΍� */
body#blogDetail .blogArticle {
  min-width: 0;
}
body#blogDetail .blogSidebar {
  min-width: 0;
}

/* �p�������� / ���Y����ꍇ�̕ی��i���łɗǂ����O�̂��߁j */
body#blogDetail .topicPath {
  padding-left: 0;
}

/* =========================================================
  ✅ Blog Detail ONLY：見出しを読みやすく（H2=章 / H3=小見出し）
  - 対象：#blogDetail .blogBody のみ
========================================================= */

/* ---- H2：章見出し（目立たせる） ---- */
#blogDetail .blogBody h2 {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.02em;

  margin: 34px 0 14px;
  padding: 12px 14px;

  background: #f6f8ff;                 /* 薄い背景 */
  border-left: 6px solid #2f5eff;      /* アクセント */
  border-radius: 10px;

  scroll-margin-top: 110px;            /* 目次クリック時の被り対策（必要なら調整） */
}

/* 先頭の章は少し上余白を詰める（任意） */
#blogDetail .blogBody h2:first-child {
  margin-top: 0;
}

/* ---- H3：小見出し（章内の区切り） ---- */
#blogDetail .blogBody h3 {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.5;

  margin: 22px 0 10px;
  padding: 0 0 8px;

  border-bottom: 2px solid rgba(47, 94, 255, 0.18);
}

/* ---- H2/H3直後の文章の詰まりを改善 ---- */
#blogDetail .blogBody h2 + p,
#blogDetail .blogBody h3 + p,
#blogDetail .blogBody h2 + ul,
#blogDetail .blogBody h3 + ul,
#blogDetail .blogBody h2 + ol,
#blogDetail .blogBody h3 + ol {
  margin-top: 8px;
}

/* ---- 本文のベースも少し読みやすく（任意） ---- */
#blogDetail .blogBody p {
  line-height: 1.85;
  margin: 0 0 14px;
}

/* 罫線や背景の色をサイトに合わせたい場合はここだけ変えればOK */

/* H3に小さなアクセント（任意） */
#blogDetail .blogBody h3 {
  position: relative;
  padding-left: 0.6em;
}
#blogDetail .blogBody h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 4px;
  height: 1.1em;
  background: #2f5eff;
  border-radius: 2px;
  opacity: 0.8;
}

/* =========================================================
  ✅ Blog Detail ONLY：表（table）を見やすく＆崩れない形で整形
  - table自体をdisplay:blockにしない（崩れ防止）
  - 横スクロールはラッパーで対応（JS不要）
========================================================= */

/* 既存の「tableをblock化」しているCSSがあれば無効化（崩れ対策） */
#blogDetail .blogBody table{
  display: table !important;
  overflow: visible !important;
}

/* tableを横スクロールさせたい場合は、tableの親に overflow を持たせる
   既存HTMLを変えたくないので、table直前直後でラップできない場合も考慮し、
   .blogBody 内の table を包含するブロックに近い扱いとして table自身に影響しない形で対応します */
#blogDetail .blogBody table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 18px 0 26px;
  background: #fff;
  border: 1px solid #d9e2f2;
  border-radius: 14px;
  overflow: hidden; /* 角丸 */
}

/* セル共通 */
#blogDetail .blogBody th,
#blogDetail .blogBody td{
  padding: 14px 16px;
  font-size: 1rem;
  line-height: 1.7;
  text-align: left;
  vertical-align: top;

  border-bottom: 1px solid #e7eefc;
  border-right: 1px solid #e7eefc;

  white-space: normal;      /* 折り返し可 */
  word-break: break-word;
}

/* 最終列/最終行の罫線整理 */
#blogDetail .blogBody tr > *:last-child{ border-right: none; }
#blogDetail .blogBody tbody tr:last-child > *{ border-bottom: none; }

/* thead：見出しを強調 */
#blogDetail .blogBody thead th{
  background: #eef4ff;
  color: #0f172a;
  font-weight: 800;
}

/* 1列目（項目列）を読みやすく */
#blogDetail .blogBody tbody td:first-child,
#blogDetail .blogBody tbody th:first-child{
  background: #f6f9ff;
  font-weight: 800;
  color: #0f172a;
}

/* ゼブラで行を追いやすく */
#blogDetail .blogBody tbody tr:nth-child(even) td{
  background: #fbfdff;
}

/* ホバー（PC） */
@media (hover:hover){
  #blogDetail .blogBody tbody tr:hover td{
    background: #f2f7ff;
  }
}

/* スマホ：表が潰れる場合のみ、親要素をスクロールにするための“推奨ラッパー” */
#blogDetail .blogBody .tableWrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ラッパーを使う前提で、表に最低幅を持たせる（潰れ防止） */
@media (max-width: 600px){
  #blogDetail .blogBody .tableWrap table{
    min-width: 720px;
  }
}
/* =========================================================
  ✅ スマホでコードブロックが横幅をはみ出してメニューが崩れるのを防ぐ
========================================================= */
#blogDetail pre{
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre;
  border-radius: 12px;
}

#blogDetail pre code{
  display: block;
}

/* 全体ではなくブログ詳細だけ */
#blogDetail{
  overflow-x: hidden;
}