/* 記事本文内のスタイリング */
.prose {
  color: #374151;
  /* text-gray-700 */
  max-width: none;
}

/* --- 見出し系 --- */
.prose h1 {
  font-size: 1.875rem;
  /* 3xl */
  font-weight: 700;
  color: #1f2937;
  /* gray-800 */
  margin-bottom: 1.5rem;
}

.prose h2 {
  font-size: 1.5rem;
  /* 2xl */
  font-weight: 700;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
  /* gray-200 */
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

/* H2の前に擬似要素でアイコン（または装飾）を入れる場合 */
.prose h2::before {
  content: " ";
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background-color: #0891b2;
  /* cyan-600 */
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>');
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.prose h3 {
  font-size: 1.25rem;
  /* xl */
  font-weight: 700;
  border-left: 4px solid #67e8f9;
  /* cyan-300 */
  padding-left: 0.75rem;
  margin-top: 2rem;
}

.prose h4 {
  font-size: 1.125rem;
  /* lg */
  font-weight: 700;
  color: #374151;
  margin-top: 1.5rem;
}

.prose h5 {
  font-size: 1rem;
  /* base */
  font-weight: 700;
  color: #4b5563;
}

/* --- テキスト装飾 --- */
.prose strong,
.prose b {
  color: #111827;
  /* gray-900 */
  font-weight: 700;
  /* 薄いエメラルドのマーカー線 */
}

.prose a {
  color: #0891b2;
  /* cyan-600 */
  text-decoration: underline;
  border-bottom: 1px solid transparent;
}

/* --- リスト系 --- */
.prose ul {
  list-style: none;
  padding-top:1rem;
  padding-bottom: 1rem;
  padding-left: 1.5rem;
}

.prose ul li {
  position: relative;
  margin-bottom: 0.5rem;
}

.prose ul li::before {
  content: "•";
  color: #208DC3;
  /* cyan-400 */
  font-weight: bold;
  position: absolute;
  left: -1.25rem;
}
/* --- リスト系：階層付き順序リスト --- */

/* 1階層目 (数字: 1, 2, 3...) */
.prose ol {
  counter-reset: level1;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1.5rem;
  list-style: none;
}

.prose ol>li {
  position: relative;
  counter-increment: level1;
  /* 1階層目のみカウントアップ */
}

.prose ol>li::before {
  content: counter(level1) ".";
  /* 数字を表示 */
  color: #0891b2;
  /* cyan-600 */
  font-weight: 700;
  position: absolute;
  left: -1.5rem;
}

/* 2階層目 (アルファベット: a, b, c...) */
.prose ol ol {
  counter-reset: level2;
  /* 2階層目のカウンターをリセット */
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
}

.prose ol ol>li {
  counter-increment: level2;
  /* 2階層目のみカウントアップ */
}

.prose ol ol>li::before {
  content: counter(level2, lower-alpha) ".";
  /* アルファベット(小文字)を表示 */
  color: #0891b2;
  font-weight: 600;
  position: absolute;
  left: -1.5rem;
}

/* さらに深い階層（3階層目など）が必要な場合は、ここに追加できます */




/* --- テーブル --- */
.prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
  margin: 2rem 0;
}

.prose th {
  background-color: #f9fafb;
  /* gray-50 */
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: #4b5563;
  border-bottom: 1px solid #e5e7eb;
}

.prose td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  border-bottom: 1px solid #f3f4f6;
}

.prose tr:last-child td {
  border-bottom: none;
}

/* --- 前略：.prose tr:last-child td { border-bottom: none; } のすぐ下に追記 --- */

/* --- モバイル対応（スマホ向け） --- */
@media (max-width: 640px) {

  /* 全体の余白と行間の微調整 */
  .prose {
    line-height: 1.6;
  }

  /* 見出しサイズを一段階ずつ小さく */
  .prose h1 {
    font-size: 1.5rem;
    /* 3xl -> 2xl */
    margin-bottom: 1rem;
  }

  .prose h2 {
    font-size: 1.25rem;
    /* 2xl -> xl */
    margin-top: 2rem;
    align-items: flex-start;
    /* 長いタイトルが折り返した時にアイコンを上揃えにする */
  }

  /* H2アイコンの微調整（テキストの1行目と高さを合わせる） */
  .prose h2::before {
    margin-top: 0.25rem;
    flex-shrink: 0;
    /* アイコンが潰れないように固定 */
  }

  .prose h3 {
    font-size: 1.125rem;
    /* xl -> lg */
    margin-top: 1.5rem;
  }

  .prose h4 {
    font-size: 1rem;
    /* lg -> base */
  }

  
  
  .prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* iOSでのスクロールを滑らかにする */
    white-space: nowrap;
    /* 表内の改行を抑えて見やすくする（必要に応じて削除可） */
    border-radius: 0.5rem;
  }

  /* リストの左余白を少し詰める */
  .prose ul,
  .prose ol {
    padding-left: 1.25rem;
  }
}