a {
  display: inline-block;
  overflow: hidden;
}

a img {
  display: block;
  transition: transform 0.3s ease;
}

a:hover img {
  transform: scale(1.10);
}

h2 {
  letter-spacing: 0.05em;
}

/* よくある質問ブロックに背景とパディングを追加 */
[data-structure="e-premium-faq"] {
  background-color: #ffffff;
  padding: 24px;
  margin-bottom: 24px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.swiper-slide img {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.swiper-slide:hover img {
  transform: scale(1.10);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

/* 上画像（4列）ブロックのスマホ2列化 */
@media (max-width: 768px){
  /* ブロック全体 */
  .block-image-4col {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* すき間調整 */
  }

  /* 各アイテム */
  .block-image-4col .image-item {
    flex: 1 1 calc(50% - 8px);  /* 50%幅 - 隙間分 */
    width: calc(50% - 8px) !important; /* ペライチ既存の幅指定を上書き */
    margin: 0 auto !important;
    box-sizing: border-box;
  }

  /* 画像のリサイズ */
  .block-image-4col .image-item img {
    max-width: 100%;
    height: auto;
  }
}


/* ── スマホ幅だけ、上画像(2列)のすき間を詰める ── */
@media (max-width: 768px){

  /* 親を2列レイアウトに & 行間を小さく */
  .block-image-2col,
  .image-2col,
  .image-col2,
  .columns-2,
  .grid-2,
  .col-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;  /* 横のすき間 */
    row-gap: 10px !important;     /* 縦のすき間（←さらに詰めたい時は 6〜8px） */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 各アイテムの外側余白を消す（テーマ側のマージン上書き） */
  .block-image-2col > *,
  .image-2col > *,
  .image-col2 > *,
  .columns-2 > *,
  .grid-2 > *,
  .col-2 > * {
    margin: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
  }

  /* タイトルと本文の上下余白を詰める */
  .block-image-2col h3, .block-image-2col h4,
  .image-2col h3,      .image-2col h4,
  .image-col2 h3,      .image-col2 h4,
  .columns-2 h3,       .columns-2 h4,
  .grid-2 h3,          .grid-2 h4,
  .col-2 h3,           .col-2 h4 {
    margin: 8px 0 4px !important;  /* もっと詰めるなら 6px 0 4px */
    line-height: 1.4 !important;
  }
  .block-image-2col p,
  .image-2col p,
  .image-col2 p,
  .columns-2 p,
  .grid-2 p,
  .col-2 p {
    margin: 0 !important;          /* 段落の余白をゼロに */
    line-height: 1.6 !important;
  }

  /* 画像のはみ出し防止（念のため） */
  .block-image-2col img,
  .image-2col img,
  .image-col2 img,
  .columns-2 img,
  .grid-2 img,
  .col-2 img {
    max-width: 100% !important;
    height: auto !important;
  }
}


/* PC/SPどちらも吹き出しと次ブロックの間を詰める */
@media (min-width: 769px){           /* PC */
  .bubble-tight{ margin-bottom:-12px !important; }  /* しっぽに少し重ねる */
  .bubble-tight .bubble{ margin:0 0 18px !important; } /* しっぽ高(約10px)+α */
}

@media (max-width: 768px){           /* SP */
  .bubble-tight{ margin-bottom:-8px !important; }
  .bubble-tight .bubble{ margin:0 0 12px !important; }
}

/* まだ見出しとの間が広いテーマ向けの保険（任意） */
.bubble-wrap + h1,
.bubble-wrap + h2,
.bubble-wrap + .heading,
.bubble-wrap + .title{
  margin-top:8px !important;
}




/* PCだけ、吹き出し直下の余白をギュッと削る */
@media (min-width: 769px){
  /* 吹き出しラッパーの下をマイナスで食い込ませる */
  .bubble-tight{ 
    margin-bottom: -50px !important;   /* -12〜-22pxの範囲で好みに調整 */
  }
  /* 吹き出し本体の下マージンは控えめに（しっぽ分＋α） */
  .bubble-tight .bubble{
    margin: 0 0 14px !important;       /* しっぽ約10px + 4px */
  }
  /* 直後の見出しブロックの“上余白”を打ち消す（想定されるクラスを網羅） */
  .bubble-tight + h1,
  .bubble-tight + h2,
  .bubble-tight + .heading,
  .bubble-tight + .c-heading,
  .bubble-tight + .title,
  .bubble-tight + .block,
  .bubble-tight + *{
    margin-top: 6px !important;
    padding-top: 0 !important;
  }
}