/* =====================================================================
   lp-polish.css : frontend-design 仕上げ層（部分強化）
   現路線（青 + オレンジ / ゴシック / 角丸ソフト影）は維持し、質感・奥行き・
   モーション・タイポ精度を引き上げる。lp-theme.css の後に読み込む。
   reduced-motion は jda.css のグローバルリセットで自動的に無効化される。
   ===================================================================== */

/* ===== 1. 選ばれる理由タイルを表情のある概念ビジュアルに ===== */
body.lp .reason .r-media{
  border:1px solid rgba(37,99,235,0.10);
  background-image:
    radial-gradient(circle at 85% 26%, rgba(226,112,10,0.85) 0 4px, transparent 5px),
    radial-gradient(circle at 16% 78%, rgba(37,99,235,0.22) 0 5px, transparent 6px),
    radial-gradient(55% 62% at 76% 24%, rgba(226,112,10,0.10), transparent 70%),
    radial-gradient(82% 82% at 24% 82%, rgba(37,99,235,0.16), transparent 72%),
    linear-gradient(150deg,#eff6ff 0%,#d6e5ff 100%);
}
/* 中央の白ディスク（明示的に中央化 + 奥行き）*/
body.lp .reason .r-media::before{
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:56%;
  background:radial-gradient(120% 120% at 30% 22%,#ffffff,#eef4ff);
  box-shadow:0 20px 44px -20px rgba(23,54,140,0.40), inset 0 0 0 1px rgba(255,255,255,0.9);
  transition:transform .55s var(--ease);
}
/* アイコン: ハロー + ドロップシャドウ + 拡大 */
body.lp .reason .r-ico-lg{width:33%;transition:transform .55s var(--ease)}
body.lp .reason .r-ico-lg::before{content:"";position:absolute;inset:-42%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,0.18),transparent 70%)}
body.lp .reason .r-ico-lg svg{stroke-width:1.7;filter:drop-shadow(0 5px 10px rgba(37,99,235,0.28))}
/* 大きな番号ウォーターマーク（::after を流用。HTML 側 data-n が必須）*/
body.lp .reason .r-media::after{
  content:attr(data-n);
  position:absolute;right:0.6rem;bottom:-1.6rem;top:auto;
  width:auto;height:auto;background:none;border-radius:0;
  font-family:var(--ff-num);font-weight:800;font-size:clamp(5rem,3rem + 7vw,9rem);
  line-height:1;letter-spacing:-0.03em;color:rgba(23,54,140,0.07);pointer-events:none;
}
/* hover の表情（行ホバーでタイルが反応）*/
body.lp .reason:hover .r-ico-lg{transform:scale(1.09) rotate(-3deg)}
body.lp .reason:hover .r-media::before{transform:translate(-50%,-50%) scale(1.05)}

/* 写真差し替えタイル（例: Point 01）: CSS装飾を消して画像をクリーンに見せる */
body.lp .reason .r-media--photo{background:none;border:1px solid var(--line)}
body.lp .reason .r-media--photo::before,
body.lp .reason .r-media--photo::after{display:none}
body.lp .reason .r-media--photo .r-badge{display:none}
body.lp .reason .r-media--photo img{transition:transform .6s var(--ease)}
body.lp .reason:hover .r-media--photo img{transform:scale(1.04)}

/* ===== 2. fact-band「1兆円超」を劇的に ===== */
body.lp .fact-band{
  background:
    radial-gradient(60% 90% at 50% 36%, rgba(226,112,10,0.22), transparent 60%),
    radial-gradient(circle at 50% 40%, rgba(37,99,235,0.18), transparent 55%),
    linear-gradient(150deg,#0b1640 0%,#0e2156 60%,#0b1640 100%);
}
/* 微細グリッド texture（中央を残してフェード）*/
body.lp .fact-band::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:0.55;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.045) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(72% 72% at 50% 42%, #000, transparent);
  mask-image:radial-gradient(72% 72% at 50% 42%, #000, transparent);
}
body.lp .fact-band > *{position:relative;z-index:1}
body.lp .fact-band .f-tag{box-shadow:0 8px 22px -8px rgba(226,112,10,0.6)}
body.lp .fact-band .f-big{
  color:var(--seal);
  font-size:clamp(3.4rem,2.4rem + 6vw,6.5rem);letter-spacing:-0.01em;
  filter:drop-shadow(0 6px 30px rgba(226,112,10,0.45));
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  body.lp .fact-band .f-big{
    background:linear-gradient(180deg,#ffe0b8 0%,#f08a2a 55%,#d2570b 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
}
/* 数字の登場（reveal の .in で発火）*/
body.lp .fact-band.in .f-big{animation:factpop .9s var(--ease-out) both}
@keyframes factpop{0%{opacity:0;transform:scale(0.82) translateY(10px)}60%{opacity:1}100%{opacity:1;transform:none}}

/* ===== 3. 申込フォームを高品質なカードに ===== */
body.lp .lp-apply .contact-grid{align-items:start}
body.lp #lp-form{
  background:#ffffff;border-radius:22px;border:1px solid var(--line);
  box-shadow:0 34px 74px -34px rgba(23,54,140,0.32), inset 0 1px 0 rgba(255,255,255,0.7);
  padding:clamp(1.6rem,1.1rem + 2vw,2.8rem);
}
body.lp #lp-form label{letter-spacing:0.01em}
body.lp #lp-form input,body.lp #lp-form select,body.lp #lp-form textarea{transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s}
body.lp #lp-form input:focus,body.lp #lp-form select:focus,body.lp #lp-form textarea:focus{
  border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 4px var(--accent-soft), 0 10px 22px -14px rgba(37,99,235,0.45);
}
/* チェックの選択感を強める */
body.lp #lp-form .field-check input:checked,body.lp #lp-form .field-radio input:checked{box-shadow:0 4px 10px -4px rgba(37,99,235,0.5)}

/* ===== 4. カード / CTA帯の質感・モーション ===== */
/* 全オレンジCTAに光沢スイープ */
body.lp .btn-cta{position:relative;overflow:hidden}
body.lp .btn-cta::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,0.5),transparent);transform:skewX(-18deg);transition:left .65s var(--ease);pointer-events:none}
body.lp .btn-cta:hover::after{left:130%}
/* 限定特典カード: アイコンチップの反応 + 上罫グロー */
body.lp .lp-benefits .pillar .lp-ben-ic{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
body.lp .lp-benefits .pillar:hover .lp-ben-ic{transform:translateY(-3px) rotate(-4deg);box-shadow:0 12px 24px -12px rgba(226,112,10,0.5)}
body.lp .lp-benefits .pillar:hover{border-top-color:#f3a35a}
/* 反復CTA帯: ドットtexture + 角のグロー */
body.lp .lp-cta-band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0.6;background-image:radial-gradient(circle at 10% 18%, rgba(255,255,255,0.12) 0 2px, transparent 3px);background-size:26px 26px}
body.lp .lp-cta-band::after{content:"";position:absolute;right:-8%;top:-50%;width:46%;height:200%;z-index:0;pointer-events:none;background:radial-gradient(closest-side, rgba(255,211,106,0.20), transparent)}
body.lp .lp-cta-band .wrap{position:relative;z-index:1}

/* ===== #issue（誤解→反証）は明るい白セクション（背景画像なし）=====
   見出しはベースの濃色、エビーブロー「- 誤解 -」は青罫（jda.css の --accent）。
   myth カードは白＋影、濃紺の fact-band がセクション内のアクセントになる。
   ※ 以前の暗いグレイン背景（issue-bg.jpg）は撤去。assets/img/issue-bg.jpg は未使用。 */