/* ================================================
   関連ページバナー（画像付きリンク・横長／縦積み）
   ================================================ */
.mgsblk-link-banner {
  /* フォントはエディタ側に css/common.css が読まれないため明示指定
     （フロントとプレビューの見た目を揃える） */
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro', 'YuGothic', 'Yu Gothic', '游ゴシック', 'Meiryo', 'メイリオ', Helvetica, sans-serif;
  margin: 0 0 32px;
}
.mgsblk-link-banner__heading {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  margin: 0 0 12px;
}

.mgsblk-link-banner__item {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 16px;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.mgsblk-link-banner__item + .mgsblk-link-banner__item {
  margin-top: 12px;
}
.mgsblk-link-banner__item:hover {
  border-color: var(--main-color);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
}

.mgsblk-link-banner__image {
  display: block;
  flex: 0 0 auto;
  width: 160px;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: #f2f2f2;
}
.mgsblk-link-banner__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mgsblk-link-banner__body {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}
.mgsblk-link-banner__title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: #333;
  line-height: 1.5;
}
.mgsblk-link-banner__text {
  display: block;
  font-size: 13px;
  color: #666;
  line-height: 1.7;
  margin-top: 6px;
}

.mgsblk-link-banner__arrow {
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--main-color);
  padding-left: 4px;
  transition: transform 0.2s;
}
.mgsblk-link-banner__item:hover .mgsblk-link-banner__arrow {
  transform: translateX(3px);
}

@media only screen and (max-width: 739px) {
  .mgsblk-link-banner__item {
    gap: 14px;
    padding: 12px;
  }
  .mgsblk-link-banner__image {
    width: 96px;
  }
  .mgsblk-link-banner__title {
    font-size: 15px;
  }
  .mgsblk-link-banner__text {
    font-size: 12px;
    margin-top: 4px;
  }
  .mgsblk-link-banner__arrow {
    display: none;
  }
}

/* 管理画面のみ：ブロック範囲がわかるよう破線枠＋エディタ既定のリンク装飾を打ち消す */
.editor-styles-wrapper .mgsblk-link-banner {
  border: 1px dashed #ccc;
  min-height: 60px;
}
.editor-styles-wrapper .mgsblk-link-banner__item,
.editor-styles-wrapper .mgsblk-link-banner__item:hover {
  text-decoration: none;
  box-shadow: none;
}
.editor-styles-wrapper .mgsblk-link-banner__title {
  color: #333;
}
.editor-styles-wrapper .mgsblk-link-banner__text {
  color: #666;
}