.prohibited-box {
  border: 2px solid #d9eceb;
  padding: 24px;
  margin: 32px 0;
  background-color: #fafafa;
  border-radius: 8px;
}

.marker{
  background: linear-gradient(transparent 60%, #cdecc3 60%);
  padding: 0 .2em;
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* =========================
  基本：全体の読みやすさ
========================= */
.font-l{
  font-size: 18px;
  line-height: 1.9;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.blog-section{
  margin: 28px 0;
}

/* 見出しの詰まりを防ぐ */
.blog-section h2,
.blog-section h3,
.blog-section h4{
  line-height: 1.4;
  margin: 28px 0 14px;
}

/* 段落の余白（詰まりすぎ防止） */
.blog-section p{
  margin: 0 0 14px;
}

/* =========================
  画像：スマホで横はみ出し防止
========================= */
.blog-section img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 16px 0;
}

/* =========================
  囲み：border-box / prohibited-box
========================= */
.prohibited-box{
  border: 2px solid #333;
  padding: 22px;
  margin: 24px 0;
  background: #fafafa;
  border-radius: 10px;
}

/* 囲み内のp余白を整える */
.prohibited-box p{
  margin: 0 0 12px;
  line-height: 1.8;
}

/* =========================
  テーブル：スマホで横スクロール対応（崩れ防止の決定版）
========================= */
.border-table{
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
}

.border-table th,
.border-table td{
  border: 1px solid #ddd;
  padding: 10px 12px;
  vertical-align: top;
}

/* 表を“横に逃がす”コンテナ化（スマホで最重要） */
.border-table{
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

/* テーブル内だけは折り返したい場合（長文セル対策） */
.border-table td{
  white-space: normal;
}

/* =========================
  スマホ最適化：幅768px以下
========================= */
@media (max-width: 768px){

  /* 全体文字を少しだけ小さくして読みやすく */
  .font-l{
    font-size: 16px;
    line-height: 1.85;
  }

  .blog-section{
    margin: 22px 0;
  }

  .blog-section h2{
    font-size: 1.35em;
    margin: 22px 0 12px;
  }

  .blog-section h3{
    font-size: 1.15em;
    margin: 20px 0 10px;
  }

  .blog-section h4{
    font-size: 1.05em;
    margin: 18px 0 10px;
  }

  /* 囲みはスマホで余白を詰める */
  .border-box,
  .prohibited-box{
    padding: 16px;
    margin: 18px 0;
    border-radius: 10px;
  }

  /* 目次の操作部をタップしやすく */
  #blog-menu-area{
    padding: 14px;
  }

  #blog-menu-area header label{
    display: inline-block;
    padding: 10px 12px;
  }

  /* リストの左余白を抑える（スマホは詰まりやすい） */
  .blog-section ul,
  .blog-section ol{
    padding-left: 1.2em;
  }

  /* テーブル：スマホは見出しの文字も少し小さく */
  .border-table th,
  .border-table td{
    font-size: 14px;
    padding: 10px;
  }
}

/* =========================
  さらに小さい端末：幅480px以下
========================= */
@media (max-width: 480px){
  .font-l{
    font-size: 15px;
  }

  .border-box,
  .prohibited-box{
    padding: 14px;
  }

  .blog-section p{
    margin-bottom: 12px;
  }
}
/* 各項目タイトル（strongだけのp）を少し目立たせる */
.prohibited-box p strong:first-child {
  display: inline-block;
  font-size: 1.05em;
  margin-bottom: 4px;
}

/* 項目間の余白を整える */
.prohibited-box p {
  margin: 0 0 12px 0;
  line-height: 1.7;
}

/* 各番号タイトルの上に少し余白を追加 */
.prohibited-box p strong {
  margin-top: 16px;
}