@charset "UTF-8";

/**
 * 追加CSS
*/
.card-rounded .smb-panels__item{
    border-radius: 16px;
}
@media (any-hover: hover) {
.card-rounded .smb-panels__item:hover{
      box-shadow: var(--smb-panels--item-box-shadow);
    }


}
span.number {
    font-size: 40px;
    width: 60px;
    height: 60px;
    display: inline-flex;
    background: #fff;
    border-radius: 50%;
    /* display: flex; */
    align-items: center;
    margin-right: 10px;
    justify-content: center;
    color: #000;             
    mix-blend-mode: screen;
}
.balloon .smb-section__subtitle {
  --balloon-color: #0050a0;    /* フキダシの色 */
  position: relative;
  isolation: isolate;          /* 背景（::before）としっぽ（::after）を文字の後ろに置くため */
  display: table;              /* 幅を文字に合わせつつ中央寄せ */
  margin: 0 auto;
  padding: 10px 32px;
  font-size: 20px;             /* 大きさはここで調整 */
  font-weight: 700;
  color: #fff;
  border-radius: 999px;
  transform: rotate(-4deg);    /* 傾き。マイナスで左上がり */
}

.balloon_w .smb-section__subtitle {
  --balloon-color-dark: rgba(255, 255, 255, 1);
  position: relative;
  isolation: isolate;          /* 背景（::before）としっぽ（::after）を文字の後ろに置くため */
  display: table;              /* 幅を文字に合わせつつ中央寄せ */
  margin: 0 auto;
  padding: 10px 32px;
  font-size: 20px;             /* 大きさはここで調整 */
  font-weight: 700;
  color: var(--accent-color);
  border-radius: 999px;
  transform: rotate(-4deg);    /* 傾き。マイナスで左上がり */
}

/*
 * インクがにじんだような輪郭：背景を ::before に分け、しっぽ（::after）と一緒に
 * SVG フィルター（#ink-bleed-soft、functions/block-styles.php。にじみボタンより弱め）をかける。文字はくっきりのまま
 * にじみの強さは block-styles.php の #ink-bleed-soft の scale（いま 1.2。ボタンは 2）
 */
.balloon .smb-section__subtitle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--balloon-color);
  filter: url(#ink-bleed-soft);
}

.balloon_w .smb-section__subtitle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--balloon-color-dark);
  filter: url(#ink-bleed-soft);
}


.balloon .smb-section__subtitle::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -9px;                /* 本体に少し重ねて、つなぎ目を目立たせない */
  transform: translateX(-50%);
  border-style: solid;
  border-width: 12px 8px 0 8px;
  border-color: var(--balloon-color) transparent transparent transparent;
  filter: url(#ink-bleed-soft);
}

.balloon_w .smb-section__subtitle::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -9px;                /* 本体に少し重ねて、つなぎ目を目立たせない */
  transform: translateX(-50%);
  border-style: solid;
  border-width: 12px 8px 0 8px;
  border-color: var(--balloon-color-dark) transparent transparent transparent;
  filter: url(#ink-bleed-soft);
}

/* スマホ：同じ強さだとにじみが細かく弱く見えるため、ボタンと同じ強さ（#ink-bleed-filter、scale 2）にする */
@media (max-width: 767px) {
  .balloon .smb-section__subtitle::before,
  .balloon .smb-section__subtitle::after {
    filter: url(#ink-bleed-filter);
  }
}

td.num1 img,
td.num2 img,
td.num3 img {
    margin: 0 auto;
}