/* =========================================
   SiteHub Block UI (CTA付き)
   - 角丸/角：.sh-block--rounded / .sh-block--sharp
   - 薄背景：--sitehub-main-color をRGBA化（alpha可変）
========================================= */

.sh-block {
  --sh-block-radius: 18px;              /* rounded時の角丸 */
  --sh-block-radius-sharp: 10px;        /* sharp時の角丸(ほぼ角) */
  --sh-block-border: rgba(0,0,0,.06);
  --sh-block-shadow: 0 10px 30px rgba(0,0,0,.06);
  --sh-block-card-alpha: .06;           /* PHPから上書き */
  padding: 64px 0;
  background: #fff;
}

.sh-block--rounded { --sh-card-r: var(--sh-block-radius); }
.sh-block--sharp   { --sh-card-r: var(--sh-block-radius-sharp); }

.sh-block .sh-container {
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
}

.sh-block__title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: .02em;
  margin: 0 0 28px;
}

.sh-block__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 960px) {
  .sh-block__grid { grid-template-columns: 1fr; }
}

.sh-block__card {
  position: relative;
  border-radius: var(--sh-card-r);
  border: 1px solid var(--sh-block-border);
  box-shadow: var(--sh-block-shadow);
  padding: 22px 22px 18px;
  background: rgba(0, 0, 0, 0.02);
  overflow: hidden;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* 薄いテーマカラー背景（対応ブラウザは多い） */
.sh-block__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--sh-accent, #53BBD3) calc(var(--sh-block-card-alpha) * 100%), transparent);
  pointer-events: none;
}

/* color-mix非対応の保険（見た目が崩れないように） */
@supports not (background: color-mix(in srgb, #000 10%, transparent)) {
  .sh-block__card::before { background: rgba(0,0,0,.02); }
}

.sh-block__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
}

.sh-block__icon {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.06);
  position: relative;
  z-index: 1;
}

.sh-block__icon img {
  width: 28px;
  height: 28px;
  display: block;
}

.sh-block__h {
  margin: 14px 0 8px;
  font-size: 18px;
  font-weight: 800;
  position: relative;
  z-index: 1;
}

.sh-block__p {
  margin: 0 0 16px;
  line-height: 1.8;
  color: rgba(0,0,0,.72);
  position: relative;
  z-index: 1;
}

.sh-block__cta {
  margin-top: auto;
  position: relative;
  z-index: 1;
}

.sh-block__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px; /* CTAは丸ボタンが見栄え良い（ここは固定） */
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.78);
  text-decoration: none;
  font-weight: 800;
  color: #111;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.sh-block__btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--sh-accent, #53BBD3) 55%, rgba(0,0,0,.25));
  background: color-mix(in srgb, var(--sh-accent, #53BBD3) 10%, rgba(255,255,255,.85));
}

@supports not (background: color-mix(in srgb, #000 10%, transparent)) {
  .sh-block__btn:hover { background: rgba(255,255,255,.92); }
}

.sh-block__btn-arrow {
  font-weight: 900;
}

.sh-block__icon img{
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}

/* =========================================
   Block UI：data-icon でカード別の見た目を変える
   追記場所：ui-block.css の一番下
========================================= */

/* 共通：アイコン枠を「テーマ色っぽく」 */
.sh-block__card{
  /* ここは共通のデフォルト */
  --sh-icon-bg: rgba(0,0,0,.05);
  --sh-icon-bd: rgba(0,0,0,.08);
}

/* テーマカラーがある環境はそっちを優先（対応ブラウザなら色が綺麗） */
@supports (background: color-mix(in srgb, #000 10%, transparent)) {
  .sh-block__card{
    --sh-icon-bg: color-mix(in srgb, var(--sh-accent, #53BBD3) 12%, transparent);
    --sh-icon-bd: color-mix(in srgb, var(--sh-accent, #53BBD3) 18%, transparent);
  }
}

/* アイコン枠（既存のHTML構造：.sh-block__icon > img を想定） */
.sh-block__icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--sh-icon-bg);
  border: 1px solid var(--sh-icon-bd);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  margin-bottom: 10px;
}

.sh-block__icon img{
  width: 22px;
  height: 22px;
  display: block;
}

.sh-block__icon img{
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 2 !important;
}
/* -----------------------------------------
   data-icon ごとの「少しだけ」差分
   ※色は theme の main-color をベースに、濃さだけ変える
----------------------------------------- */

/* check（例：初回相談） */
@supports (background: color-mix(in srgb, #000 10%, transparent)) {
    .sh-block__card[data-icon="check"]{
      --sh-icon-bg: color-mix(in srgb, var(--sh-accent, #53BBD3) 14%, transparent);
      --sh-icon-bd: color-mix(in srgb, var(--sh-accent, #53BBD3) 22%, transparent);
    }
  }

/* speed（例：迅速対応） */
@supports (background: color-mix(in srgb, #000 10%, transparent)) {
  .sh-block__card[data-icon="speed"]{
    --sh-icon-bg: color-mix(in srgb, var(--sitehub-main-color, #005fa3) 10%, transparent);
    --sh-icon-bd: color-mix(in srgb, var(--sitehub-main-color, #005fa3) 18%, transparent);
  }
}

/* price（例：料金） */
@supports (background: color-mix(in srgb, #000 10%, transparent)) {
  .sh-block__card[data-icon="price"]{
    --sh-icon-bg: color-mix(in srgb, var(--sitehub-main-color, #005fa3) 18%, transparent);
    --sh-icon-bd: color-mix(in srgb, var(--sitehub-main-color, #005fa3) 26%, transparent);
  }
}

/* support（例：サポート） */
@supports (background: color-mix(in srgb, #000 10%, transparent)) {
  .sh-block__card[data-icon="support"]{
    --sh-icon-bg: color-mix(in srgb, var(--sitehub-main-color, #005fa3) 12%, transparent);
    --sh-icon-bd: color-mix(in srgb, var(--sitehub-main-color, #005fa3) 20%, transparent);
  }
}