/* ===== ベース ===== */
.isa-ctah { position: relative; padding: 24px 0; }

/* 左の人物（固定画像）を ::before で描画 */
.isa-ctah::before{
    content:"";
    position:absolute;
    left: calc(0px + var(--ctah-hero-ox, 0px));
    top:  calc(50% + var(--ctah-hero-oy, 0px));
    transform: translateY(-50%);
    width: var(--ctah-hero-w, 300px);
    height: calc(var(--ctah-hero-w, 300px) * 1.3333); /* 3:4想定の高さを明示 */
    background-image: var(--ctah-hero);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    pointer-events:none;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.08));
    z-index: 1; /* 人物を前面に */
}

/* 画像ぶん左に余白を確保 */

/* ===== 3連CTA（デザイン踏襲、クラスだけ別） ===== */
.isa-ctah-heading{
  font-size: 18px;
  font-weight:700; text-align:center; letter-spacing:.04em; margin:0 auto 20px;
}
.isa-ctah-row{
  display:flex; gap:16px; margin:0; padding:0 16px; max-width:720px;
    margin-left: 62px;
  position:relative; z-index:2; /* コンテンツ最前 */
}
.isa-ctah-btn{
  display:flex; align-items:center; gap:8px; justify-content:center;
  padding:23px 14px; border-radius:10px; color:#fff; text-decoration:none;
  font-weight:700; font-size:18px; line-height:1;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  min-width:218px; white-space:nowrap;
}
.isa-ctah-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.18); filter:saturate(1.05); }
.isa-ctah-icon{ display:inline-flex; flex-shrink:0; }

.isa-ctah-lesson  { background:#e86f68; }
.isa-ctah-request { background:#e58e3a; }
.isa-ctah-counsel { background:#e34c4c; }

.isa-ctah-icon img{ display:inline-block; width:28px; height:28px; }
.isa-ctah-icon-fallback{ display:inline-block; width:28px; height:28px; border:2px solid rgba(255,255,255,.9); border-radius:4px; }

/* 見出しデコ */
.isa-ctah-heading-wrap{
  --slash-color:#1f2937; --slash-thickness:1px; --slash-length:44px; --slash-angle:58deg;
  position:relative; max-width:748px; margin: 0 20px 4px 62px; padding:8px 50px;
}
.isa-ctah-heading-wrap::before,
.isa-ctah-heading-wrap::after{
  content:""; position:absolute; top:50%; width:var(--slash-length); height:var(--slash-thickness);
  background:var(--slash-color); transform-origin:center;
}
.isa-ctah-heading-wrap::before{ left:12px;  transform:translateY(-50%) rotate(var(--slash-angle)); border-radius:var(--slash-thickness); }
.isa-ctah-heading-wrap::after { right:12px; transform:translateY(-50%) rotate(calc(var(--slash-angle) * -1)); border-radius:var(--slash-thickness); }

/* ===== 1024px以下：青背景＋白パネル＋縦積み ===== */
@media (max-width:1024px){
  .isa-ctah{
    --panel-inset-top:31px; --panel-inset-side:25px; --panel-radius:26px;
    margin:0; padding:43px clamp(20px, 5vw + 10px, 65px) 62px; background:#d9eaf6;
  }
  .isa-ctah::after{
    content:""; position:absolute; inset:var(--panel-inset-top) var(--panel-inset-side);
    background:#fff; border-radius:var(--panel-radius); box-shadow:0 6px 18px rgba(0,0,0,.06);
    z-index:0; /* 白パネルは一番下 */
  }
  .isa-ctah > *{ position:relative; z-index:2; }

  .isa-ctah::before{
    left: max(-40px, calc(0px + var(--ctah-hero-ox, 0px)));
    width: min(200px, var(--ctah-hero-w, 300px));
    height: calc(min(200px, var(--ctah-hero-w, 300px)) * 1.3333);
    opacity:.95;
  }

  .isa-ctah-heading{ font-size:clamp(16px,1.4vw + 8px,28px); }
  .isa-ctah-heading-wrap{ padding:22px 50px 8px; margin:0 auto 10px; }
  .isa-ctah-heading-wrap::before, .isa-ctah-heading-wrap::after{ display:none; }

  .isa-ctah-row{ flex-direction:column; gap:18px; max-width:720px; margin:0 auto; padding:0 24px; }
  .isa-ctah-btn{ min-height:84px; border-radius:16px; padding:22px; font-size:clamp(14px,1.6vw + 10px,20px); box-shadow:0 10px 24px rgba(0,0,0,.12); }
}

/* テキストは常に白 */
.isa-ctah .isa-ctah-btn .isa-ctah-text{ color:#fff !important; }
