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

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

.loan-simulator-cta__frame{
  border:3px solid #e8793c;
  background:#fff6ee;
  border-radius:16px;
  overflow:hidden;
}

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

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

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

/* ボタン */
.loan-simulator-cta__actions{
  display:flex;
  justify-content:center;
  gap:.7rem;
  flex-wrap:wrap;
  margin-top:1rem;
}
.loan-simulator-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(232,121,60,.55);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.loan-simulator-cta__btn--primary{ background:#e8793c; color:#fff; }
.loan-simulator-cta__btn--primary:hover{
  filter:brightness(1.05);
  transform:translateY(-2px);
  box-shadow:0 10px 20px -6px rgba(232,121,60,.6);
}
.loan-simulator-cta__btn-icon{ width:1.1em; height:1.1em; flex:0 0 auto; }

/* 表計算セル・電卓のスクロール帯 */
.loan-simulator-cta .lsc-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-simulator-cta .lsc-scroll-track{
  display:flex;
  gap:14px;
  width:max-content;
  animation:lsc-scroll-left 5s linear infinite;
  will-change:transform;
}
.loan-simulator-cta .lsc-scroll-track.reverse{
  animation:lsc-scroll-right 5s linear infinite;
}
.loan-simulator-cta .lsc-icon{
  width:2.6rem;
  height:2.6rem;
  flex:0 0 auto;
  opacity:.85;
}

/* メインビジュアル：実画面キャプチャ＋返済スケジュール演出 */
.loan-simulator-cta .lsc-main{
  width:100%;
  margin:0;
  padding:.8rem 1.2rem 1rem;
}
.loan-simulator-cta .lsc-main__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(240px, 1fr));
  gap:clamp(1rem, 3vw, 1.8rem);
  max-width:900px;
  margin:0 auto;
  align-items:stretch;
}
@media (max-width:768px){
  .loan-simulator-cta .lsc-main__grid{ grid-template-columns:1fr; }
}

/* 実ツールの結果画面と同じ構成を再現したチャートカード */
.loan-simulator-cta .lsc-chart-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#fff;
  border-radius:12px;
  padding:.9rem 1rem 1rem;
  text-align:center;
  box-shadow:0 10px 22px -10px rgba(232,121,60,.35), 0 2px 6px rgba(0,0,0,.06);
  animation:lsc-float 5s ease-in-out infinite;
}
.loan-simulator-cta .lsc-chart-card:nth-child(2){ animation-delay:-2.5s; }
.loan-simulator-cta .lsc-chart-card__label{
  display:inline-block;
  margin:0 0 .6rem;
  background:#e8793c;
  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-simulator-cta .lsc-chart-card__note{
  margin:.4rem 0 0;
  font-size:.8rem;
  line-height:1.5;
  color:#8a715c;
  text-align:center;
}
.loan-simulator-cta .lsc-scene{
  width:100%;
  height:auto;
  display:block;
}

/* 積み上げ棒グラフ：入力するたびに伸縮するイメージ */
.loan-simulator-cta .lsc-bar-group{
  transform-box:fill-box;
  transform-origin:bottom;
  animation:lsc-bar-grow 2.8s ease-in-out infinite alternate;
}
.loan-simulator-cta .lsc-bar-group--1{ animation-delay:0s; }
.loan-simulator-cta .lsc-bar-group--2{ animation-delay:.15s; }
.loan-simulator-cta .lsc-bar-group--3{ animation-delay:.3s; }
.loan-simulator-cta .lsc-bar-group--4{ animation-delay:.45s; }
.loan-simulator-cta .lsc-bar-group--5{ animation-delay:.6s; }
.loan-simulator-cta .lsc-bar-group--6{ animation-delay:.75s; }

/* 元金残高が減っていく折れ線グラフ */
.loan-simulator-cta .lsc-line-path{
  stroke-dasharray:400;
  stroke-dashoffset:400;
  animation:lsc-line-draw 2.6s ease-out infinite;
}
.loan-simulator-cta .lsc-coin{
  transform-box:fill-box;
  transform-origin:center;
  animation:lsc-coin-bounce 2.6s ease-in-out infinite;
}
.loan-simulator-cta .lsc-coin--2{ animation-delay:-1.3s; }

/* 表計算セル・電卓のスクロール帯（凡例） */
.loan-simulator-cta .lsc-legend{
  display:flex;
  justify-content:center;
  gap:1.2rem;
  margin-top:.5rem;
  font-size:.8rem;
  color:#5a4a3c;
}
.loan-simulator-cta .lsc-legend__item{ display:inline-flex; align-items:center; gap:.35rem; }
.loan-simulator-cta .lsc-legend__item i{
  width:.7rem; height:.7rem; border-radius:2px; display:inline-block;
}

/* Animations */
@keyframes lsc-scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes lsc-scroll-right{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@keyframes lsc-float{
  0%, 100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-6px) rotate(-.3deg); }
}
@keyframes lsc-bar-grow{
  from{ transform:scaleY(.7); }
  to{ transform:scaleY(1); }
}
@keyframes lsc-line-draw{
  0%{ stroke-dashoffset:400; }
  60%, 100%{ stroke-dashoffset:0; }
}
@keyframes lsc-coin-bounce{
  0%, 100%{ transform:translateY(0) scale(1); }
  30%{ transform:translateY(-4px) scale(1.15); }
  50%{ transform:translateY(0) scale(1); }
}

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