/* ===========================
  画像スタイル設定
  =========================== */

/* 画像デフォルト表示：左そろえ（最高優先度） */
.md-typeset img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 1.5rem 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  text-align: left !important;
  clear: both !important;
  float: none !important;
  padding-left: 0 !important;
  border: 2px solid #666666 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* article内のすべての画像 */
.md-content img,
.md-typeset img,
article img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 1.5rem 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  clear: both !important;
  float: none !important;
  border: 2px solid #666666 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* 段落内の画像も左そろえ */
.md-typeset p img,
p img {
  display: block !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  margin: 1.5rem 0 !important;
  border: 2px solid #666666 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* ===========================
  テーブルスタイル設定
  =========================== */

/* テーブル全体の左揃え */
.md-typeset table,
table {
  margin-left: 0 !important;
  margin-right: auto !important;
  margin: 1.5rem 0 !important;
  width: 100%;
  border-collapse: collapse;
}

/* テーブル行の左揃え */
.md-typeset table tr,
table tr {
  text-align: left !important;
}

/* テーブルヘッダー（th）の左揃え */
.md-typeset table th,
table th {
  text-align: left !important;
  padding: 0.5rem !important;
  padding-left: 0.5rem !important;
  vertical-align: top !important;
}

/* テーブルセル（td）の左揃え */
.md-typeset table td,
table td {
  text-align: left !important;
  padding: 0.5rem !important;
  padding-left: 0.5rem !important;
  vertical-align: top !important;
}

/* テーブル内の画像 */
.md-typeset table img,
table img {
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  border: 2px solid #666666 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* リスト内の画像 */
.md-typeset li img,
li img {
  display: block !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  border: 2px solid #666666 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* .image-center クラスが付与されている場合も左そろえに強制 */
.image-center {
  display: block !important;
  text-align: left !important;
  margin: 1.5rem 0 !important;
  clear: both !important;
}

.image-center img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  margin: 0 !important;
  border: 2px solid #666666 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* 左寄せ画像（新規追加） */
.image-left {
  display: block;
  margin: 1.5rem 0;
  clear: both;
}

.image-left img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: 0;
  border: 2px solid #666666 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* 右寄せ画像（オプション） */
.image-right {
  display: block;
  text-align: right;
  margin: 1.5rem 0;
  clear: both;
}

.image-right img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border: 2px solid #666666 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* ===========================
   段落と画像の境界をリセット
   =========================== */
.md-typeset p + img,
.md-typeset p + .image-center,
.md-typeset p + .image-left,
.md-typeset p + .image-right {
  margin-top: 1.5rem;
}

img + p,
.image-center + p,
.image-left + p,
.image-right + p {
  clear: both;
  margin-top: 1.5rem;
}