{% scope_css %}
.hs-custom-frame-wrapper {
  padding: 40px 20px;
  clear: both;
}

.hs-custom-frame {
  position: relative;
  border: 2px solid; /* 色はHTML側で指定 */
  border-radius: 15px; /* 角丸 */
  padding: 30px 20px 20px;
  box-sizing: border-box;
}

/* 見出し：枠線の左上に浮かせる */
/* 見出し：サイズと太さを強調 */
.hs-custom-frame__title {
  position: absolute;
  top: -18px; /* サイズを大きくしたので、上にずらす位置も微調整 */
  left: 20px;
  padding: 0 15px; /* 文字の左右の余白も少し広げると綺麗です */
  font-weight: 800; /* より太く（数値はフォントによりますが 700〜900 がおすすめ） */
  font-size: 24px; /* remではなくpxで直接指定すると確実です。お好みで 20px〜28px 程度に調整してください */
  line-height: 1;
  z-index: 1;
}

/* コンテンツエリア：画像とテキストを横並び */
.hs-custom-frame__content {
  display: flex;
  align-items: center; /* 垂直方向中央 */
  gap: 20px; /* 画像とテキストの間隔 */
}

/* 画像エリア */
.hs-custom-frame__image {
  flex: 0 0 30%; /* 幅を30%に固定 */
  max-width: 200px;
}

.hs-custom-frame__image img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* テキストエリア */
.hs-custom-frame__text {
  flex: 1;
  font-size: 1rem;
  line-height: 1.6;
}

/* モバイル対応：縦並びにする */
@media screen and (max-width: 767px) {
  .hs-custom-frame__content {
    flex-direction: column;
    text-align: center;
  }
  .hs-custom-frame__image {
    flex: 0 0 100%;
    margin-bottom: 15px;
  }
  .hs-custom-frame__title {
    font-size: 1rem;
    left: 10px;
  }
}
{% endscope_css %}