/**
 * WYSIWYG Editor Output Styles
 *
 * WordPress管理画面のエディターから出力されるコンテンツ用のスタイル
 * .bl_customData / .bl_customDataSub クラスに適用
 */

/* ================================================
   見出しスタイル
================================================ */

.bl_customData h4,
.bl_customDataSub h4 {
  background: #def2d4;
  font-size: clamp(1.125rem, 1.081rem + 0.1878vw, 1.25rem);
  padding-block: 4px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block: 16px;
}

.bl_customData h4::before,
.bl_customDataSub h4::before {
  content: '';
  width: 5px;
  border-radius: 4px;
  height: 46px;
  background-color: #3a7d44;
}

.bl_customData h5,
.bl_customDataSub h5 {
  margin-block: 20px;
  font-weight: 700;
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: clamp(1rem, 0.956rem + 0.1878vw, 1.125rem);
}

.bl_customData h5::before,
.bl_customDataSub h5::before {
  content: '';
  display: block;
  width: 5px;
  height: 20px;
  background: #3a7d44;
  border-radius: 4px;
}

.bl_customData h6,
.bl_customDataSub h6 {
  margin-block: 20px;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  font-size: clamp(1rem, 0.956rem + 0.1878vw, 1.125rem) !important;
}

/* ================================================
   リストスタイル
================================================ */

.bl_customData ul,
.bl_customData ol,
.bl_customDataSub ul,
.bl_customDataSub ol {
  margin-block: 12px;
  padding-left: 12px;
}

.bl_customData ul li,
.bl_customDataSub ul li {
  list-style: disc;
  margin-left: 20px;
}

.bl_customData ol li,
.bl_customDataSub ol li {
  list-style: decimal;
  margin-left: 20px;
}

/* ================================================
   画像・iframe
================================================ */

.bl_customData img,
.bl_customData iframe {
  margin-block: 20px;
}

/* ================================================
   画像配置（alignleft / alignright / aligncenter）
   !important で他のCSSより優先させる
================================================ */

/* 左寄せ - 画像に直接クラスがある場合 */
.bl_customData img.alignleft,
.bl_customDataSub img.alignleft {
  float: left !important;
  margin-right: 20px !important;
  margin-left: 0 !important;
  margin-bottom: 20px !important;
  max-width: 100%;
  height: auto;
  clear: both; /* 前のfloatをクリアして新しい行から開始 */
}

/* 左寄せ - <a>タグ内の画像 */
.bl_customData a:has(> img.alignleft),
.bl_customDataSub a:has(> img.alignleft) {
  float: left !important;
  margin-right: 20px !important;
  margin-left: 0 !important;
  margin-bottom: 20px !important;
  display: block;
  clear: both; /* 前のfloatをクリアして新しい行から開始 */
}

/* 右寄せ - 画像に直接クラスがある場合 */
.bl_customData img.alignright,
.bl_customDataSub img.alignright {
  float: right !important;
  margin-left: 20px !important;
  margin-right: 0 !important;
  margin-bottom: 20px !important;
  max-width: 100%;
  height: auto;
  clear: both; /* 前のfloatをクリアして新しい行から開始 */
}

/* 右寄せ - <a>タグ内の画像 */
.bl_customData a:has(> img.alignright),
.bl_customDataSub a:has(> img.alignright) {
  float: right !important;
  margin-left: 20px !important;
  margin-right: 0 !important;
  margin-bottom: 20px !important;
  display: block;
  clear: both; /* 前のfloatをクリアして新しい行から開始 */
}

/* 中央寄せ */
.bl_customData img.aligncenter,
.bl_customDataSub img.aligncenter,
.bl_customData .aligncenter,
.bl_customDataSub .aligncenter {
  display: block !important;
  margin-inline: auto !important;
  float: none !important;
}

/* なし */
.bl_customData img.alignnone,
.bl_customDataSub img.alignnone {
  margin-block: 20px;
  max-width: 100%;
  height: auto;
}

/* floatクリア用 */
.bl_customData.clearfix::after,
.bl_customDataSub.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* 見出しの前でfloatをクリア */
.bl_customData h1,
.bl_customData h2,
.bl_customData h3,
.bl_customData h4,
.bl_customData h5,
.bl_customData h6,
.bl_customDataSub h1,
.bl_customDataSub h2,
.bl_customDataSub h3,
.bl_customDataSub h4,
.bl_customDataSub h5,
.bl_customDataSub h6 {
  clear: both !important;
}

/* ================================================
   <p>タグ内の画像対応
   WordPressが自動的に<p>で囲む問題への対策
================================================ */

/* alignleft/alignright を含む<p>タグを透明化 */
.bl_customData p:has(img.alignleft),
.bl_customData p:has(img.alignright),
.bl_customData p:has(a:has(img.alignleft)),
.bl_customData p:has(a:has(img.alignright)),
.bl_customDataSub p:has(img.alignleft),
.bl_customDataSub p:has(img.alignright),
.bl_customDataSub p:has(a:has(img.alignleft)),
.bl_customDataSub p:has(a:has(img.alignright)) {
  display: contents !important;
}

/* インラインスタイルの text-align を上書き */
.bl_customData p[style*="text-align"],
.bl_customDataSub p[style*="text-align"] {
  text-align: left !important;
}

/* aligncenter を含む<p>は中央寄せを維持 */
.bl_customData p:has(img.aligncenter),
.bl_customDataSub p:has(img.aligncenter) {
  text-align: center !important;
  display: block !important;
}

/* ================================================
   レスポンシブ対応（スマホ: 767px以下）
   画像とテキストを縦並びにする
================================================ */

@media screen and (max-width: 767px) {
  /* スマホでは float を解除 */
  .bl_customData img.alignleft,
  .bl_customData img.alignright,
  .bl_customDataSub img.alignleft,
  .bl_customDataSub img.alignright {
    float: none !important;
    display: block !important;
    margin-inline: auto !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  /* <a>タグのfloatも解除 */
  .bl_customData a:has(> img.alignleft),
  .bl_customData a:has(> img.alignright),
  .bl_customDataSub a:has(> img.alignleft),
  .bl_customDataSub a:has(> img.alignright) {
    float: none !important;
    display: block !important;
    margin-inline: auto !important;
    width: fit-content;
  }

  /* スマホでは<p>タグの display: contents を解除 */
  .bl_customData p:has(img.alignleft),
  .bl_customData p:has(img.alignright),
  .bl_customData p:has(a:has(img.alignleft)),
  .bl_customData p:has(a:has(img.alignright)),
  .bl_customDataSub p:has(img.alignleft),
  .bl_customDataSub p:has(img.alignright),
  .bl_customDataSub p:has(a:has(img.alignleft)),
  .bl_customDataSub p:has(a:has(img.alignright)) {
    display: block !important;
    text-align: center !important;
  }
}