@charset "UTF-8";
/* ==========================================================================
   個人向けローン TOP（Figma: PC 7:432 / SP 58:2921 / MENU 62:463）
   ========================================================================== */
.page-top{background:var(--bg-beige)}

/* ---- MV（Figma の MV は y=124 から。グロナビ下線 3px の分を差し引いた座標） ---- */
.p-top-mv{position:relative;height:497px;overflow:hidden}
/* 写真: 左端（背景になじませる側）は常に Figma と同じ中央基準（x=651）。
   1440px より広い画面では右端まで伸ばして拡大（最大 1029px = 1920px 幅相当）、
   それ以上は右端を背景色にぼかして境目を見せない */
.p-top-mv::before{
  content:"";position:absolute;top:-3px;left:calc(50% - 69px);
  width:min(calc(50% + 69px),1029px);height:449px;
  background:url(/page/kojin-loan/images/mv-bg.jpg) 0 30% / cover no-repeat;
}
@media screen and (min-width:1921px){
  .p-top-mv::before{
    -webkit-mask-image:linear-gradient(to left,transparent 0,#000 160px);
    mask-image:linear-gradient(to left,transparent 0,#000 160px);
  }
}
.p-top-mv__title{position:absolute;z-index:1;top:47px;left:calc(50% - 550px);width:713px;height:314px}
.p-top-mv__title picture{display:contents}
.p-top-mv__title img{width:100%;height:100%}

/* ---- ローン一覧（260×290px カードを 4 列 × 2 段。MV に 70px 重ねる） ---- */
.p-loans{position:relative;z-index:1;margin-top:-80px}   /* カードは MV に 70px 重なる（スクロール枠の上余白 10px を含めて -80px） */
.p-loans__scroll{width:1100px;margin:0 auto;padding:10px 0;overflow-x:auto}   /* 影が切れないよう上下に 10px の余白 */
.p-loans__list{display:grid;grid-template-columns:repeat(4,260px);grid-auto-rows:290px;gap:20px;width:max-content}
.p-loan{
  position:relative;display:block;height:100%;
  border-radius:5px;background:#f9f9f9;box-shadow:0 0 10px rgba(0,0,0,.1);
  overflow:hidden;text-decoration:none;
  transition:box-shadow .2s,transform .2s;
}
.p-loan:hover{box-shadow:0 4px 16px rgba(0,0,0,.16);transform:translateY(-2px)}
.p-loan::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--loan)}
/* Figma: 白の内側シャドウ（広がり 2px）。帯・写真の端を白い縁で覆う */
.p-loan::after{content:"";position:absolute;inset:0;z-index:2;border-radius:5px;box-shadow:inset 0 0 0 2px #fff;pointer-events:none}
.p-loan__name{position:absolute;left:0;right:0;top:15px;font-size:18px;font-weight:700;line-height:1.611;letter-spacing:0;text-align:center;color:var(--loan)}
.p-loan__desc{position:absolute;left:15px;right:14px;top:54px;font-size:15px;line-height:1.6;margin-right:-.1em}   /* 行末の字間は幅に含めない */
.p-loan__img{position:absolute;left:0;top:117px;width:260px;height:120px;object-fit:cover}
.p-loan__foot{position:absolute;left:15px;top:253px;font-size:13px;line-height:1.615}
.p-loan__arrow{
  position:absolute;right:10px;top:251px;
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:3px;background:var(--loan);color:#fff;
}
.p-loan__arrow svg{width:13px;height:12px}

/* ---- 返済シミュレーション（1100×254px・右に写真） ---- */
.p-sim{width:1100px;margin:50px auto 0}   /* カード下の影の余白 10px と合わせて 60px */
.p-sim__inner{
  position:relative;height:254px;padding:40px 0 0 40px;
  border-radius:7px;background:#e3f1f6 url(/page/kojin-loan/images/sim-photo.jpg) right top / 761px 254px no-repeat;
  overflow:hidden;
}
.p-sim__eyebrow{font-size:18px;font-weight:700;line-height:1.611;color:var(--blue)}
.p-sim__title{font-size:24px;font-weight:700;line-height:1.583;color:var(--blue)}
.p-sim__text{margin-top:12px}
.p-sim__btn{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:330px;height:50px;margin-top:19px;padding-bottom:4px;
  border-radius:999px;background:var(--blue);color:#fff;
  font-weight:700;text-decoration:none;text-indent:.1em;
  transition:opacity .2s;
}
.p-sim__btn:hover{opacity:.85}
.p-sim__arrow{position:absolute;top:50%;right:20px;width:14px;height:13px;margin-top:-6.5px}

/* ---- お電話でのご相談（1100px 幅・横長） ---- */
.p-top-tel{
  width:1100px;margin:60px auto;padding:18px 0 18px;
  border:2px solid var(--red);border-radius:7px;background:#fff3f3;
  text-align:center;
}
.p-top-tel__title{font-size:20px;font-weight:700;line-height:1.6;text-indent:.1em}
.p-top-tel__text{margin-top:10px;text-indent:.1em}
.p-top-tel__num{
  display:block;margin-top:10px;
  color:var(--red);font-size:38px;font-weight:700;line-height:1.29;text-indent:.1em;text-decoration:none;
}
.p-top-tel__time{margin-top:5px;font-size:14px;line-height:1.571;text-indent:.1em}

/* ==========================================================================
   SP
   ========================================================================== */
@media screen and (max-width:767px){
  .p-top-mv{height:37.3rem;margin-top:.2rem}
  .p-top-mv::before{top:0;left:0;width:100%;height:23.8rem;background-image:url(/page/kojin-loan/images/sp-mv-bg.jpg)}
  .p-top-mv__title{top:17.3rem;left:50%;width:35.6rem;height:19.9rem;margin-left:-17.8rem}

  /* SP は 1 カラムの縦積み（Figma SP の 2 列横スクロールはデザイン誤りのため変更） */
  .p-loans{margin-top:2rem}
  .p-loans__scroll{width:auto;padding:1rem 2rem}
  .p-loans__list{grid-template-columns:1fr;grid-auto-rows:auto;gap:2rem;width:auto}
  .p-loan{display:flex;flex-direction:column;height:auto;padding:1.5rem 0 1.6rem}
  .p-loan__name,.p-loan__desc,.p-loan__img,.p-loan__foot,.p-loan__arrow{position:static}
  .p-loan__name{font-size:1.8rem}
  .p-loan__desc{margin:1rem 1.5rem 0;font-size:1.5rem;text-wrap:pretty}   /* 1 文字だけの改行を避ける */
  .p-loan__img{width:100%;height:auto;aspect-ratio:260 / 120;margin-top:1.5rem}
  .p-loan__foot{margin:1.6rem 5rem 0 1.5rem;font-size:1.3rem}
  .p-loan__arrow{position:absolute;right:1rem;bottom:1.4rem;top:auto;width:2.4rem;height:2.4rem}
  .p-loan__arrow svg{width:1.3rem;height:1.2rem}

  /* 返済シミュレーション: 画面幅いっぱい・写真なし・中央揃え */
  .p-sim{width:auto;margin-top:4rem}
  .p-sim__inner{height:34.4rem;padding:5rem 2rem 0;border-radius:0;background:#e3f1f6;text-align:center}
  .p-sim__eyebrow{font-size:1.6rem;line-height:1.625}
  .p-sim__title{margin-top:1rem;font-size:2.4rem;line-height:1.583;text-indent:.1em}
  .p-sim__text{margin-top:1rem;text-align:left}
  .p-sim__btn{width:33rem;height:5rem;margin:2rem auto 0;font-size:1.6rem}
  .p-sim__arrow{right:2rem;width:1.4rem;height:1.3rem;margin-top:-.65rem}

  /* お電話でのご相談（SP デザインなし。PC の内容を SP 用に組む） */
  .p-top-tel{width:35rem;margin:6rem auto;padding:2rem 1.8rem;border-width:.2rem}
  .p-top-tel__title{font-size:2rem}
  .p-top-tel__text{margin-top:1.5rem;font-size:1.5rem;line-height:1.6;text-align:left;text-indent:0}
  .p-top-tel__num{margin-top:1rem;font-size:3.4rem}
  .p-top-tel__time{font-size:1.3rem;line-height:1.6;letter-spacing:0}
}