/* ============================================================
   症例・コラムページ専用の補助CSS
   ------------------------------------------------------------
   このサイトの tailwind.css は「事前ビルド済み」で、元のLPで
   使われていないユーティリティクラスは含まれていない。
   症例ページで新たに使ったクラスだけをここで定義する。
   ⚠️ 既存21ページに影響を出さないため、共有CSSには手を入れない。
   作成 2026-08-08
   ============================================================ */

.symptom-article { }                    /* スコープ用（スタイルなし） */

.underline            { text-decoration-line: underline; }
.hover\:no-underline:hover { text-decoration-line: none; }

.border-b-2           { border-bottom-width: 2px; }
.border-l-4           { border-left-width: 4px; }
.rounded-r-xl         { border-top-right-radius: .75rem; border-bottom-right-radius: .75rem; }

.max-w-xl             { max-width: 36rem; }

.mb-1\.5              { margin-bottom: .375rem; }
.mt-7                 { margin-top: 1.75rem; }
.mt-10                { margin-top: 2.5rem; }
.mt-12                { margin-top: 3rem; }
.my-5                 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.pb-2                 { padding-bottom: .5rem; }
.pt-4                 { padding-top: 1rem; }
.py-8                 { padding-top: 2rem; padding-bottom: 2rem; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:inline { display: inline; }
}

/* 記事本文の読みやすさ（元記事の <br> 連打を吸収する） */
.symptom-article p    { text-wrap: pretty; }
.symptom-article img  { max-width: 100%; }