/* =========================================================
   TOP：人気サービス（広告運用代行 /ad-lp/）への導線
   ① OUR ANSWER 直後のピックアップ枠（.t-adpick）
   ③ 実績カード内の広告事例リンク（.v3-case__more）
   ④ FAQ 回答内のリンク（.t-faq__link）
   色・角丸・影は site-v4.css の --v4-* トークンを使う
   ========================================================= */

/* ---------- ① 広告運用代行バナー（全体が /ad-lp/ へのリンク） ---------- */
/* 見出し（POPULAR SERVICE／人気のサービス）＋バナーのまとまり */
body.top-v4 .t-adpop{max-width:1040px;margin:clamp(72px,9vw,128px) auto 0}
body.top-v4 .t-adpop .section__head{margin-bottom:clamp(24px,3vw,40px)}
body.top-v4 .t-adpop .t-adban{margin-top:0!important}
body.top-v4 .t-adban{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:stretch;
  gap:0;
  max-width:1040px;margin:clamp(56px,7vw,96px) auto 0;
  padding:0 0 0 clamp(20px,3vw,44px);
  text-align:center;color:var(--v4-ink)!important;text-decoration:none;
  background:
    radial-gradient(520px 220px at 0% 100%,rgba(53,192,242,.14),transparent 70%),
    linear-gradient(180deg,#F6FAFF,#EAF3FF);
  border:1px solid rgba(30,107,255,.18);
  border-radius:var(--v4-r-s);
  box-shadow:0 14px 34px rgba(10,37,69,.10);
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease;
}
body.top-v4 .t-adban:hover{transform:translateY(-3px);box-shadow:0 22px 48px rgba(10,37,69,.16)}
body.top-v4 .t-adban:focus-visible{outline:3px solid var(--v4-brand);outline-offset:3px}

/* ガーランド */
body.top-v4 .t-adban__flag{position:absolute;top:0;width:clamp(120px,16vw,220px);pointer-events:none}
body.top-v4 .t-adban__flag svg{display:block;width:100%;height:auto}
body.top-v4 .t-adban__flag--l{left:clamp(8px,1.6vw,20px)}
body.top-v4 .t-adban__flag--r{right:clamp(8px,1.6vw,20px);transform:scaleX(-1)}

/* 文言はフレーズ単位で折り返す */
body.top-v4 .t-adban__lead > span,
body.top-v4 .t-adban__sub > span,
body.top-v4 .t-adban__name > span{display:inline-block}

/* 上段コピー */
body.top-v4 .t-adban__lead{
  display:block;font-weight:900;letter-spacing:-.02em;line-height:1.5;
  font-size:clamp(17px,2.4vw,30px);
}
body.top-v4 .t-adban__lead b{
  font-family:var(--v4-num);font-size:1.35em;color:var(--v4-brand-d);margin:0 .06em;
}
body.top-v4 .t-adban__lead mark{
  color:inherit;padding:0 .08em;
  background:linear-gradient(transparent 58%,#FFE45C 58%,#FFE45C 92%,transparent 92%);
}

/* 中段：バッジ＋サービス名 */
body.top-v4 .t-adban__row{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,2.4vw,32px);margin-top:clamp(12px,1.6vw,20px);
}
body.top-v4 .t-adban__badge{
  position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:clamp(84px,10vw,124px);aspect-ratio:1;border-radius:50%;
  background:#fff;border:3px solid var(--v4-brand-d);
  font-size:clamp(14px,1.7vw,20px);font-weight:900;line-height:1.25;color:var(--v4-brand-d);
}
body.top-v4 .t-adban__badge small{
  display:block;margin-bottom:4px;font-size:clamp(9px,.9vw,11px);font-weight:800;color:var(--v4-ink-2);
}
/* 吹き出しのしっぽ */
body.top-v4 .t-adban__badge::after{
  content:"";position:absolute;right:-4px;bottom:8%;width:16px;height:16px;
  background:#fff;border-right:3px solid var(--v4-brand-d);border-bottom:3px solid var(--v4-brand-d);
  transform:rotate(-20deg) skewX(10deg);border-radius:0 0 4px 0;
}
body.top-v4 .t-adban__body{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
body.top-v4 .t-adban__sub{font-size:clamp(14px,1.8vw,22px);font-weight:800;color:var(--v4-brand-d)}
body.top-v4 .t-adban__name{
  font-size:clamp(28px,4.6vw,56px);font-weight:900;letter-spacing:-.04em;line-height:1.2;
  background-image:linear-gradient(120deg,var(--v4-brand-d),var(--v4-brand) 60%,var(--v4-cyan));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* テキスト列 */
body.top-v4 .t-adban__text{
  position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(30px,3.4vw,44px) 0 clamp(26px,3.2vw,44px);
}
/* 画像列：LPのFVイラスト。列の上下いっぱいに敷き、
   左端・上端はバナーの地色へフェードさせて「貼った画像」感を消す */
body.top-v4 .t-adban__img{
  position:relative;display:block;min-height:100%;overflow:hidden;
}
body.top-v4 .t-adban__img img{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;object-position:35% 50%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 26%),linear-gradient(to bottom,transparent 0,#000 14%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right,transparent 0,#000 26%),linear-gradient(to bottom,transparent 0,#000 14%);
          mask-composite:intersect;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
body.top-v4 .t-adban:hover .t-adban__img img{transform:scale(1.03)}

/* 右下の矢印コーナー */
body.top-v4 .t-adban__go{
  position:absolute;right:0;bottom:0;z-index:2;
  width:clamp(84px,11vw,150px);height:clamp(70px,8.6vw,116px);
  background:linear-gradient(135deg,var(--v4-brand),var(--v4-brand-d));
  clip-path:polygon(100% 0,100% 100%,0 100%);
}
body.top-v4 .t-adban__go::after{
  content:"›";position:absolute;right:clamp(10px,1.6vw,22px);bottom:clamp(10px,1.4vw,18px);
  width:clamp(30px,3.6vw,46px);aspect-ratio:1;border:2px solid #fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:clamp(22px,2.6vw,34px);line-height:1;font-weight:500;padding-bottom:.08em;
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
body.top-v4 .t-adban:hover .t-adban__go::after{transform:translateX(3px)}

@media (max-width:820px){
  body.top-v4 .t-adban{grid-template-columns:1fr;gap:0;padding:0;margin-top:48px}
  body.top-v4 .t-adban__img{order:-1;margin:0;min-height:0}
  body.top-v4 .t-adban__img img{
    position:static;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 40%;
    -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);
  }
  body.top-v4 .t-adban__text{padding:18px 16px 22px}
  body.top-v4 .t-adban__flag{display:none}
}
@media (max-width:640px){
  body.top-v4 .t-adban__lead{padding:0 4px}
  body.top-v4 .t-adban__text{padding-bottom:40px}
  body.top-v4 .t-adban__row{justify-content:flex-start;gap:12px}
  body.top-v4 .t-adban__badge{width:82px;font-size:14px}
  body.top-v4 .t-adban__badge small{font-size:8.5px;letter-spacing:-.02em;margin-bottom:3px}
  body.top-v4 .t-adban__badge::after{width:12px;height:12px}
  body.top-v4 .t-adban__name{font-size:clamp(20px,6vw,26px)}
  body.top-v4 .t-adban__sub{font-size:13px}
}

/* ---------- ③ 実績カード内のリンク ---------- */
body.top-v4 .v3-case__body .v3-case__more{margin-top:10px}
body.top-v4 .v3-case__more a{
  font-size:13.5px;font-weight:800;color:var(--v4-brand)!important;
  border-bottom:1px solid rgba(30,107,255,.35);padding-bottom:1px;
  transition:border-color .2s ease;
}
body.top-v4 .v3-case__more a::after{content:" →";font-family:var(--v4-mono)}
body.top-v4 .v3-case__more a:hover{border-color:var(--v4-brand)}

/* ---------- ④ FAQ 回答内のリンク ---------- */
body.top-v4 .t-faq__link{
  font-weight:800;color:var(--v4-brand)!important;
  border-bottom:1px solid rgba(30,107,255,.35);
}
body.top-v4 .t-faq__link:hover{border-color:var(--v4-brand)}