@charset "UTF-8";
/* -------------------------------------------------------------------------------- */
/* タグリストブロック                                              .mgsblk-tag-list */
/* -------------------------------------------------------------------------------- */

.editor-styles-wrapper .mgsblk-tag-list { border: 1px dashed #ccc; min-height: 40px; }

.mgsblk-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
}

.mgsblk-tag-list--align-center {
  justify-content: center;
}

.mgsblk-tag-list__tag {
  display: inline-block;
  white-space: nowrap; /* タグ内では改行させない（折り返しはタグ単位） */
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  line-height: 1.5;
}

/* ------------------------------ 色パターン ------------------------------ */

/* 自動（背景に合わせる）: 既定はグレー。濃い背景セクション内では半透明白＋白文字に切替 */
.mgsblk-tag-list--auto .mgsblk-tag-list__tag {
  background-color: #dbdbdb;
  color: #444;
}
.mgsblk-section--green .mgsblk-tag-list--auto .mgsblk-tag-list__tag,
.mgsblk-section--orange .mgsblk-tag-list--auto .mgsblk-tag-list__tag {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* 濃い色地（白文字・単色。明るい背景の上に置く想定） */
.mgsblk-tag-list--dark-solid .mgsblk-tag-list__tag {
  background-color: #2f4a35;
  color: #fff;
}

/* 薄いグリーン */
.mgsblk-tag-list--green-light .mgsblk-tag-list__tag {
  background-color: #eaf5e6;
  color: #2f4a35;
}

/* メインカラー（淡） */
.mgsblk-tag-list--orange-light .mgsblk-tag-list__tag {
  background-color: var(--main-color-pale);
  color: var(--main-color-dark);
}

/* メインカラー（背景緑＋白文字） */
.mgsblk-tag-list--orange .mgsblk-tag-list__tag {
  background-color: var(--main-color);
  color: #fff;
}

/* グレー */
.mgsblk-tag-list--gray .mgsblk-tag-list__tag {
  background-color: #dbdbdb;
  color: #444;
}

/* 白（枠線あり・白地セクション用） */
.mgsblk-tag-list--white .mgsblk-tag-list__tag {
  background-color: #fff;
  border: 1px solid #e3e3e3;
  color: #333;
}

/* -------------------------------------------------------------------------------- */
/*         MOBILE                                                                   */
/* -------------------------------------------------------------------------------- */
@media only screen and (max-width: 739px) {
  .mgsblk-tag-list {
    gap: 8px 6px;
  }
  .mgsblk-tag-list__tag {
    font-size: 13px;
    padding: 7px 14px;
  }
}