:root{
  --cta-brand:#ff6a3d;        /* 目立たせ色 */
  --cta-text:#222;
  --cta-muted:#666;
  --cta-surface:#fff;
  --cta-ring:#ffd9cc;
  --cta-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* ?? カード全体をクリック可能に ?? */
.cta-card150{
  display:block;
  max-width:150px;            /* 幅300px（可変にしたければ数字変更） */
  border-radius:16px;
  background:var(--cta-surface);
  text-decoration:none;
  color:var(--cta-text);
  box-shadow: var(--cta-shadow);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border:1px solid rgba(0,0,0,.06);
margin: auto;
}

/* ホバー/フォーカスで“ちょい浮き” */
.cta-card150:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
}
.cta-card150:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--cta-ring), var(--cta-shadow);
}

/* ?? 正方形のサムネ ?? */
.cta-card__media150{
  position:relative;
  margin:0;
  overflow:hidden;
}
.cta-card__media150 img{
  width:100%;
  height:100%;
  object-fit:cover;           /* 余白なく切り抜き */
  display:block;
  transition: transform .35s ease;
}
.cta-card:hover .cta-card__media img{
  transform: scale(1.04);
}

/* 角リボン（任意） */
.cta-card__badge150{
  position:absolute;
  left:12px;
  top:12px;
  background: var(--cta-brand);
  color:#fff;
  font:600 12px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  padding:6px 10px;
  border-radius:10px;
  box-shadow: 0 4px 14px rgba(255,106,61,.35);
}

/* ?? 本文エリア ?? */
.cta-card__body150{
  padding:14px 14px 16px;
}
.cta-card__title150{
  margin:0 0 6px;
  font:700 16px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}
.cta-card__desc150{
  margin:0 0 12px;
  color:var(--cta-muted);
  font:400 13px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

/* ?? CTA行 ?? */
.cta-card__cta150{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  font:700 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color:var(--cta-brand);
  padding-bottom:2px;
  border-bottom:2px solid transparent;
  transition: gap .18s ease, border-color .18s ease;
}
.cta-card150:hover .cta-card__cta150{
  gap:.5em;                    /* 矢印がスッと動く感じ */
  border-color: var(--cta-brand);
}

/* ?? ダーク背景のサイト向け（必要なら） ?? */
/*
body.dark .cta-card150{ background:#1f1f1f; color:#f2f2f2; border-color:#2a2a2a; }
body.dark .cta-card__desc150{ color:#c9c9c9; }
*/

.containerad {
  display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

/* ?? カード全体をクリック可能に ?? */
.cta-card300{
  display:block;
  max-width:300px;            /* 幅300px（可変にしたければ数字変更） */
  border-radius:16px;
  background:var(--cta-surface);
  text-decoration:none;
  color:var(--cta-text);
  box-shadow: var(--cta-shadow);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border:1px solid rgba(0,0,0,.06);
margin: auto;
}

/* ホバー/フォーカスで“ちょい浮き” */
.cta-card300:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
}
.cta-card300:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--cta-ring), var(--cta-shadow);
}

/* ?? 正方形のサムネ ?? */
.cta-card__media300{
  position:relative;
  margin:0;
  overflow:hidden;
}
.cta-card__media300 img{
  width:100%;
  height:100%;
  object-fit:cover;           /* 余白なく切り抜き */
  display:block;
  transition: transform .35s ease;
}
.cta-card:hover .cta-card__media img{
  transform: scale(1.04);
}

/* 角リボン（任意） */
.cta-card__badge300{
  position:absolute;
  left:12px;
  top:12px;
  background: var(--cta-brand);
  color:#fff;
  font:600 12px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  padding:6px 10px;
  border-radius:10px;
  box-shadow: 0 4px 14px rgba(255,106,61,.35);
}

/* ?? 本文エリア ?? */
.cta-card__body300{
  padding:14px 14px 16px;
}
.cta-card__title300{
  margin:0 0 6px;
  font:700 16px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}
.cta-card__desc300{
  margin:0 0 12px;
  color:var(--cta-muted);
  font:400 13px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

/* ?? CTA行 ?? */
.cta-card__cta300{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  font:700 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color:var(--cta-brand);
  padding-bottom:2px;
  border-bottom:2px solid transparent;
  transition: gap .18s ease, border-color .18s ease;
}
.cta-card300:hover .cta-card__cta300{
  gap:.5em;                    /* 矢印がスッと動く感じ */
  border-color: var(--cta-brand);
}

/* ?? ダーク背景のサイト向け（必要なら） ?? */
/*
body.dark .cta-card300{ background:#1f1f1f; color:#f2f2f2; border-color:#2a2a2a; }
body.dark .cta-card__desc300{ color:#c9c9c9; }
*/

.containerad {
  display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

 .adcontainerad{
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 10px;
    justify-content: space-around;
}