.elementor-690 .elementor-element.elementor-element-53b0ae8{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:767px){.elementor-690 .elementor-element.elementor-element-b0c1f7c{width:100%;max-width:100%;}}/* Start custom CSS for html, class: .elementor-element-b0c1f7c *//* ===== Base Variables ===== */
:root{
  --cta-blue:#0088cc;          /* 青パネル */
  --cta-radius:4px;
  --cta-gap:24px;
  --cta-shadow:0 4px 16px rgba(0,0,0,.10);
  --cta-shadow-hover:0 10px 28px rgba(0,0,0,.18);
  --cta-duration:.24s;
  --cta-ease:cubic-bezier(.2,.8,.2,1);
}

/* ===== Layout ===== */
.cta-wrap{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--cta-gap);
  background:var(--cta-bg);
  padding:0px 0;
}

.cta-card{
  display:grid;
  grid-template-columns:1.0fr .8fr;     /* 画像：パネル = 3:2 くらい */
  align-items:stretch;
  border-radius:var(--cta-radius);
  overflow:hidden;
  box-shadow:var(--cta-shadow);
  background:#fff;
  text-decoration:none;
  color:#fff;
  transform:translateZ(0);              /* GPUヒント */
  transition:box-shadow var(--cta-duration) var(--cta-ease),
             transform var(--cta-duration) var(--cta-ease);
}

.cta-card:focus-visible{
  outline:3px solid #66c6ff;
  outline-offset:2px;
}

.cta-card:hover,
.cta-card:focus-visible{
  box-shadow:var(--cta-shadow-hover);
  transform:translateY(-2px);
}

/* 画像エリア */
.cta-card__media{
  min-height:140px;
  background-size:cover;
  background-position:center;
}

/* 青パネル */
.cta-card__panel{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  background:var(--cta-blue);
  padding:0 28px;
  position:relative;
}

.cta-card__label{
  font-weight:700;
  letter-spacing:.04em;
  font-size: clamp(16px, 1.5vw + 8px, 22px);
  line-height:1.35;
  text-align:center;
  color:#fff;
  /* 和文のにじみ軽減 */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 矢印（SVG） */
.cta-card__arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform var(--cta-duration) var(--cta-ease);
}

.cta-card:hover .cta-card__arrow,
.cta-card:focus-visible .cta-card__arrow{
  transform:translateX(6px);           /* ← ホバーで矢印が動く */
}

.icon-arrow{
  display:block;
}

/* ===== Responsive ===== */
@media (max-width: 860px){
  .cta-wrap{
    grid-template-columns:1fr;
  }
  .cta-card{
    grid-template-columns: 1fr 1fr;    /* スマホでも横並びを維持（画像とパネル） */
  }
  .cta-card__panel{
    padding: 0 20px;
  }
}

/* ===== Optional: 角丸の一体感を強める ===== */
.cta-card__media,
.cta-card__panel{
  /* 角に白い継ぎ目が出ないよう、親の角丸を継承 */
  border-radius:0;
}

/* 矢印の色を固定（currentColorに依存させない） */
.cta-card__arrow,
.cta-card__arrow .icon-arrow{
  color:#fff !important;   /* ホバー時も白のまま */
}

/* 念のため、ホバー・フォーカス時も固定を明示 */
.cta-card:hover .cta-card__arrow,
.cta-card:focus-visible .cta-card__arrow{
  color:#fff !important;
}

/* SVGパスのストローク色も固定したい場合（より強固） */
.cta-card__arrow .icon-arrow path{
  stroke:#fff !important;
}
/* 追加すると便利なBG変数（未定義だったので） */


/* 既存のままでOK
.cta-wrap{ grid-template-columns:repeat(2,1fr); }
*/

/* ====== Tablet：2列のまま（既存） ====== */
/* 既にあなたのCSSで 860px 未満は1列になっているのでそのまま */

@media (max-width: 860px){
  .cta-wrap{
    grid-template-columns:1fr; /* 1列 */
  }
  /* この帯域は横並び維持（画像とパネルが左右） */
  .cta-card{
    grid-template-columns: 1fr 1fr;
  }
  .cta-card__panel{ padding: 0 20px; }
}

/* ====== Phone：縦積み（画像→青パネル） ====== */
@media (max-width: 480px){
  .cta-card{
    grid-template-columns: 1fr;   /* 縦積み */
  }
  .cta-card__media{
    min-height: 0;
    aspect-ratio: 16 / 9;         /* 画像の縦横比を固定して崩れ防止 */
    background-position: center;
    background-size: cover;
  }
  .cta-card__panel{
    padding: 14px 16px;
    justify-content: center;
  }
  .cta-card__label{
    font-size: clamp(15px, 3.6vw + 6px, 18px);
    line-height: 1.4;
  }
  .cta-wrap{ gap: 16px; }         /* スマホは隙間を少し詰める */
}

/* ====== Motion reduce（好みで） ====== */
@media (prefers-reduced-motion: reduce){
  .cta-card{
    transition: none;
    transform: none;
  }
  .cta-card:hover .cta-card__arrow,
  .cta-card:focus-visible .cta-card__arrow{
    transform: none;
  }
}/* End custom CSS */