/* =========================================
   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;
}

/* =========================================
   Block UI: アイコン（カード順で固定）
   - マーカー差し込みでも必ず出る
========================================= */
.sh-block__icon{
  position: relative;
}

/* アイコン本体（Font Awesome を使わずCSSだけで） */
.sh-block__icon::after{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;

  /* ここは「マスク」でアイコン形状を作る方式 */
  background: var(--sh-accent, #53BBD3);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
}

/* 1枚目：チェック */
.sh-block__card:nth-child(1) .sh-block__icon::after{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12 3.4 13.4 9 19l12-12-1.4-1.4z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12 3.4 13.4 9 19l12-12-1.4-1.4z'/%3E%3C/svg%3E");
}

/* 2枚目：稲妻（迅速） */
.sh-block__card:nth-child(2) .sh-block__icon::after{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h7l-1 8 10-12h-7z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h7l-1 8 10-12h-7z'/%3E%3C/svg%3E");
}

/* 3枚目：¥（料金） */
.sh-block__card:nth-child(3) .sh-block__icon::after{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h3l2 4 2-4h3l-4 8h3v2h-4v2h4v2h-4v6h-2v-6H8v-2h4v-2H8V10h3z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h3l2 4 2-4h3l-4 8h3v2h-4v2h4v2h-4v6h-2v-6H8v-2h4v-2H8V10h3z'/%3E%3C/svg%3E");
}

/* =========================================
   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;
}

/* -----------------------------------------
   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);
  }
}