/* loan_capacity_cta.css */
/* 借入可能額シュミレーション 専用CTA（他CTAとクラス・スタイルを共有しない） */

.loan-capacity-cta{ margin:1.6rem 0; }

.loan-capacity-cta__frame{
  border:3px solid #16a34a;
  background:#eefbf2;
  border-radius:16px;
  overflow:hidden;
}

.loan-capacity-cta__inner{ padding:1rem 1.1rem; }

/* タイトルSVG */
.loan-capacity-cta .lcc-title-svg{
  width:100%;
  max-width:700px;
  margin:0 auto .5rem;
  display:block;
}
.loan-capacity-cta .lcc-title-text{
  font-size:clamp(2.1rem, 5vw, 3rem);
  font-weight:700;
}

/* 説明文 */
.loan-capacity-cta__text{
  margin:0;
  font-size:1.25rem;
  line-height:1.75;
  text-align:center;
}
.loan-capacity-cta__text b{
  font-weight:700;
  color:#0e7a37;
  background:linear-gradient(to bottom, transparent 65%, #ffe985 50%);
  padding:0 .15em;
}

/* ボタン */
.loan-capacity-cta__actions{
  display:flex;
  justify-content:center;
  gap:.7rem;
  flex-wrap:wrap;
  margin-top:1rem;
}
.loan-capacity-cta__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4em;
  text-decoration:none;
  font-weight:800;
  border-radius:999px;
  padding:.85rem 1.6rem;
  font-size:1.05rem;
  border:2px solid transparent;
  box-shadow:0 6px 16px -6px rgba(22,163,74,.55);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.loan-capacity-cta__btn--primary{ background:#16a34a; color:#fff; }
.loan-capacity-cta__btn--primary:hover{
  filter:brightness(1.05);
  transform:translateY(-2px);
  box-shadow:0 10px 20px -6px rgba(22,163,74,.6);
}
.loan-capacity-cta__btn-icon{ width:1.1em; height:1.1em; flex:0 0 auto; }

/* 電卓・コインのスクロール帯 */
.loan-capacity-cta .lcc-scroll-row{
  overflow:hidden;
  width:100%;
  padding:8px 10px;
  background:#fff;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
  line-height:0;
}
.loan-capacity-cta .lcc-scroll-track{
  display:flex;
  gap:14px;
  width:max-content;
  animation:lcc-scroll-left 5s linear infinite;
  will-change:transform;
}
.loan-capacity-cta .lcc-scroll-track.reverse{
  animation:lcc-scroll-right 5s linear infinite;
}
.loan-capacity-cta .lcc-icon{
  width:2.6rem;
  height:2.6rem;
  flex:0 0 auto;
  opacity:.85;
}

/* メインビジュアル：法人／個人 2枚カード */
.loan-capacity-cta .lcc-main{
  width:100%;
  margin:0;
  padding:.6rem 0;
  line-height:0;
}
.loan-capacity-cta .lcc-main__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:clamp(1.2rem, 4vw, 2.4rem);
  max-width:900px;
  margin:0 auto;
  padding:.4rem 1.2rem;
}
.loan-capacity-cta .lcc-card{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 22px -10px rgba(22,163,74,.35), 0 2px 6px rgba(0,0,0,.06);
  animation:lcc-float 5s ease-in-out infinite;
  transition:transform .3s ease, box-shadow .3s ease;
  isolation:isolate;
}
.loan-capacity-cta .lcc-card--corp{ animation-delay:0s; }
.loan-capacity-cta .lcc-card--personal{ animation-delay:-2.5s; }
.loan-capacity-cta .lcc-card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 18px 30px -10px rgba(22,163,74,.4), 0 4px 10px rgba(0,0,0,.08);
}
.loan-capacity-cta .lcc-card svg.lcc-scene{
  width:100%;
  height:auto;
  display:block;
  margin:0;
}
.loan-capacity-cta .lcc-card__label{
  position:absolute;
  top:12px;
  left:12px;
  z-index:3;
  background:#16a34a;
  color:#fff;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:.95rem;
  line-height:1.4;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
  padding:.35rem 1rem;
  border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}

/* 光のスイープ */
.loan-capacity-cta .lcc-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.4) 48%, transparent 60%);
  transform:translateX(-120%);
  animation:lcc-sweep 6s ease-in-out infinite;
  pointer-events:none;
  z-index:2;
}
.loan-capacity-cta .lcc-card--corp::after{ animation-delay:.6s; }
.loan-capacity-cta .lcc-card--personal::after{ animation-delay:2.6s; }

/* --- シーン内部アニメーション --- */
.loan-capacity-cta .lcc-scene .lcc-bar{
  transform-box:fill-box;
  transform-origin:bottom;
  animation:lcc-bar-grow 2.4s ease-in-out infinite alternate;
}
.loan-capacity-cta .lcc-scene .lcc-bar--1{ animation-delay:0s; }
.loan-capacity-cta .lcc-scene .lcc-bar--2{ animation-delay:.3s; }
.loan-capacity-cta .lcc-scene .lcc-bar--3{ animation-delay:.6s; }
.loan-capacity-cta .lcc-scene .lcc-bar--4{ animation-delay:.9s; }

.loan-capacity-cta .lcc-scene .lcc-coin{
  transform-box:fill-box;
  transform-origin:center;
  animation:lcc-coin-bounce 2.6s ease-in-out infinite;
}
.loan-capacity-cta .lcc-scene .lcc-coin--2{ animation-delay:-.6s; }
.loan-capacity-cta .lcc-scene .lcc-coin--3{ animation-delay:-1.2s; }

.loan-capacity-cta .lcc-scene .lcc-calc-btn{
  animation:lcc-key-pulse 3.2s ease-in-out infinite;
  transform-box:fill-box;
  transform-origin:center;
}
.loan-capacity-cta .lcc-scene .lcc-calc-btn--b{ animation-delay:-.9s; }
.loan-capacity-cta .lcc-scene .lcc-calc-btn--c{ animation-delay:-1.8s; }

.loan-capacity-cta .lcc-scene .lcc-cloud{
  animation:lcc-cloud-drift 13s ease-in-out infinite alternate;
  transform-box:fill-box;
  transform-origin:center;
}

/* Animations */
@keyframes lcc-scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes lcc-scroll-right{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@keyframes lcc-float{
  0%, 100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-10px) rotate(-.6deg); }
}
@keyframes lcc-sweep{
  0%, 40%{ transform:translateX(-120%); }
  60%, 100%{ transform:translateX(120%); }
}
@keyframes lcc-bar-grow{
  from{ transform:scaleY(.55); }
  to{ transform:scaleY(1); }
}
@keyframes lcc-coin-bounce{
  0%, 100%{ transform:translateY(0) scale(1); }
  30%{ transform:translateY(-7px) scale(1.06); }
  50%{ transform:translateY(0) scale(1); }
}
@keyframes lcc-key-pulse{
  0%, 100%{ opacity:.6; }
  50%{ opacity:1; }
}
@keyframes lcc-cloud-drift{
  from{ transform:translateX(0); }
  to{ transform:translateX(12px); }
}

/* Responsive */
@media (max-width:768px){
  .loan-capacity-cta__inner{ padding:.9rem; }
  .loan-capacity-cta__btn{ width:100%; }
}