@charset "UTF-8";
/* ==========================================================================
   住まいるサポートローン（Figma: PC 158:694 / SP 158:877）
   ========================================================================== */

/* ---- SP 下部固定CTA: 白い帯の内側にボタンを置く（Safari 下部がボタン色に染まるのを防ぐ） ---- */
@media screen and (max-width:767px){
  .page-smile .p-cta{background:#fff;box-shadow:0 -.2rem 1rem rgba(0,0,0,.08)}
  .page-smile .p-cta__inner{padding:1.6rem 2rem}
  .page-smile .p-cta__btn{height:calc(var(--cta-h) - 3.2rem);border-radius:.8rem}
  .page-smile .p-cta__btn.c-btn--single .c-btn__arrow{right:2rem}
}
.page-smile{
  --pink:#e853a5;
  --sky:#15abea;
  --accent:var(--pink);
  --merit-r:10px;
  --point-cols:3;
}
/* Figma: ポイントのバッジのみ水色 */
.p-point__badge{background:var(--sky)}

/* ---- MV（文字・カードは画像。1440px デザインの座標を中央基準に換算） ---- */
/* 2026-10: 写真なし・ベージュ地に文字とカード 3 枚の画像を中央配置 */
.p-mv{height:680px}
.p-mv__title{top:52px;left:calc(50% - 497px);width:994px;height:575px}

/* ---- 並び（修正指示）: MV → おまとめ → 様々な用途 → おすすめのポイント → 商品概要。「メリット」の見出しは削除 ---- */
.p-merit{padding-top:0}
.p-merit__block:first-child{margin-top:0}
/* 様々な用途: 見出しは 22px・リードから画像まで 50px（説明文なし） */
.p-merit__list{margin-top:50px}
.p-merit__heading{font-size:22px;line-height:1.591}

/* ---- おまとめ（比較図）
   寸法は --u 単位（PC: 1px）。Figma SP は PC の 0.48 倍の縮小版のため、SP は --u だけ変える。
   各要素の位置は Figma の Card 左上（PC x=170, y=2435）からの座標 ---- */
.p-matome{width:1100px;margin:0 auto;padding:60px 0 100px}
.p-matome__scroll{margin-top:50px}
.p-matome__card{--u:1px;position:relative;width:calc(var(--u)*1100);height:calc(var(--u)*497);line-height:1}
.p-matome__card *{letter-spacing:0}
.p-matome__card::before{   /* 水色の地 */
  content:"";position:absolute;left:0;top:0;width:calc(var(--u)*1056);height:calc(var(--u)*471);
  border-radius:0 0 calc(var(--u)*10) calc(var(--u)*10);background:#eaf7ff;
}
.p-matome__head{
  position:absolute;left:0;top:0;width:calc(var(--u)*1056);height:calc(var(--u)*74);
  display:flex;align-items:center;justify-content:center;
  border-radius:calc(var(--u)*10) calc(var(--u)*10) 0 0;background:var(--sky);
  color:#fff;font-size:calc(var(--u)*26.63);font-weight:700;line-height:calc(var(--u)*32);letter-spacing:.04em;white-space:nowrap;
}
.p-matome__head b{font-size:calc(var(--u)*33.73);letter-spacing:.04em}

/* 変更前（カードローン＋フリーローン）。子要素の位置は枠線の内側から */
.p-matome__before{
  position:absolute;left:calc(var(--u)*28);top:calc(var(--u)*95);width:calc(var(--u)*444);height:calc(var(--u)*261);
  border:calc(var(--u)*3) solid #bfbfbf;border-radius:calc(var(--u)*7.1);background:#fff;
}
.p-matome__before::before,
.p-matome__before::after{content:"";position:absolute;top:calc(var(--u)*125);height:calc(var(--u)*2);background:#bfbfbf}   /* ＋の左右の線 */
.p-matome__before::before{left:calc(var(--u)*-3);width:calc(var(--u)*198)}
.p-matome__before::after{left:calc(var(--u)*244);width:calc(var(--u)*197)}
.p-matome__loan{position:absolute;left:calc(var(--u)*20);font-size:calc(var(--u)*23.08);font-weight:700;line-height:calc(var(--u)*28.4);text-align:center;white-space:nowrap}
.p-matome__loan b{font-size:calc(var(--u)*32);line-height:calc(var(--u)*39.4)}
.p-matome__loan--card{top:calc(var(--u)*18);width:calc(var(--u)*135)}
.p-matome__loan--card b{margin-left:calc(var(--u)*2.3);letter-spacing:.04em}
.p-matome__loan--free{top:calc(var(--u)*163);width:calc(var(--u)*144);line-height:calc(var(--u)*27.7)}
.p-matome__notes{position:absolute;left:calc(var(--u)*207);font-size:calc(var(--u)*19.53);font-weight:500;line-height:calc(var(--u)*24.4);white-space:nowrap}
.p-matome__notes li + li{margin-top:calc(var(--u)*4)}
.p-matome__notes--card{top:calc(var(--u)*27)}
.p-matome__notes--free{top:calc(var(--u)*157)}
.p-matome__plus{position:absolute;left:calc(var(--u)*20);top:calc(var(--u)*95);width:calc(var(--u)*398);font-size:calc(var(--u)*53.27);font-weight:500;line-height:calc(var(--u)*53.3);text-align:center}

/* お借換え・変更前後をつなぐ点線（Figma: 3px・6px 間隔） */
.p-matome__switch{position:absolute;left:calc(var(--u)*481);top:calc(var(--u)*208);font-size:calc(var(--u)*24);font-weight:700;line-height:calc(var(--u)*34.75);letter-spacing:.06em;white-space:nowrap}
.p-matome__dash::before,
.p-matome__dash::after{
  content:"";position:absolute;left:calc(var(--u)*469);width:calc(var(--u)*122);height:calc(var(--u)*3);
  background:repeating-linear-gradient(to right,#e3cbb8 0 calc(var(--u)*6),transparent calc(var(--u)*6) calc(var(--u)*12));
}
.p-matome__dash::before{top:calc(var(--u)*97.5)}
.p-matome__dash::after{top:calc(var(--u)*353.5)}

/* 変更後（住まいるサポートローン） */
.p-matome__after{
  position:absolute;left:calc(var(--u)*591);top:calc(var(--u)*95);width:calc(var(--u)*376);height:calc(var(--u)*261);
  border:calc(var(--u)*3) solid var(--pink);border-radius:calc(var(--u)*7.1);background:#fff;
}
.p-matome__name{
  height:calc(var(--u)*48);padding-top:calc(var(--u)*10);background:var(--pink);
  color:#fff;font-size:calc(var(--u)*23.08);font-weight:700;line-height:calc(var(--u)*27.7);letter-spacing:.04em;text-align:center;text-indent:.04em;
}
.p-matome__spec{position:absolute;left:calc(var(--u)*29);top:calc(var(--u)*69);width:calc(var(--u)*314)}
.p-matome__spec div{position:relative;display:flex;align-items:center;height:calc(var(--u)*44)}
.p-matome__spec div + div{margin-top:calc(var(--u)*18)}
.p-matome__spec div + div::before{content:"";position:absolute;left:0;top:calc(var(--u)*-10);width:calc(var(--u)*313);height:calc(var(--u)*2);background:#fde3cb}
.p-matome__spec dt{
  flex:0 0 calc(var(--u)*115);height:calc(var(--u)*37);padding-top:calc(var(--u)*8);border-radius:calc(var(--u)*5.33);background:#fde3cb;
  color:var(--pink);font-size:calc(var(--u)*17.76);font-weight:700;line-height:calc(var(--u)*21.3);letter-spacing:.06em;text-indent:.06em;text-align:center;
}
.p-matome__spec dd{margin-left:calc(var(--u)*77);font-size:calc(var(--u)*30.33);font-weight:900;line-height:calc(var(--u)*43.9);white-space:nowrap}
.p-matome__spec dd small{margin-left:calc(var(--u)*3.64);font-size:calc(var(--u)*26.2)}   /* Figma: 単位の前に 3.64px の字間 */

/* 毎月の支払額 */
.p-matome__pay{position:absolute;top:calc(var(--u)*389);display:flex;align-items:center;height:calc(var(--u)*62);white-space:nowrap}
.p-matome__pay--before{left:calc(var(--u)*28)}
.p-matome__pay--after{left:calc(var(--u)*592)}
.p-matome__pay-label{
  display:flex;align-items:center;width:calc(var(--u)*200);height:calc(var(--u)*45);padding:0 0 calc(var(--u)*1) calc(var(--u)*16);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 45' preserveAspectRatio='none'%3E%3Cpath d='M188.727 2.577A5 5 0 0 0 184.353 0H5a5 5 0 0 0-5 5v35a5 5 0 0 0 5 5h179.407a5 5 0 0 0 4.334-2.507l9.851-17.126a5 5 0 0 0 .04-4.916z' fill='%23333'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  color:#fff;font-size:calc(var(--u)*18);font-weight:700;line-height:calc(var(--u)*28.8);letter-spacing:.05em;
}
.p-matome__pay-label small{font-size:calc(var(--u)*16);letter-spacing:.05em}
.p-matome__pay--after .p-matome__pay-label{
  padding-left:calc(var(--u)*17);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 45' preserveAspectRatio='none'%3E%3Cpath d='M188.727 2.577A5 5 0 0 0 184.353 0H5a5 5 0 0 0-5 5v35a5 5 0 0 0 5 5h179.407a5 5 0 0 0 4.334-2.507l9.851-17.126a5 5 0 0 0 .04-4.916z' fill='%23e853a5'/%3E%3C/svg%3E");
}
.p-matome__pay-num{margin-left:calc(var(--u)*23);font-family:"Roboto","Noto Sans JP",sans-serif;font-size:calc(var(--u)*53.27);font-weight:900;line-height:calc(var(--u)*62);letter-spacing:-.04em}
.p-matome__pay-num small{font-family:"Noto Sans JP",sans-serif;font-size:calc(var(--u)*28.41);letter-spacing:0}
.p-matome__pay--after .p-matome__pay-num{margin-left:calc(var(--u)*13);color:var(--pink)}
.p-matome__arrow{position:absolute;left:calc(var(--u)*500);top:calc(var(--u)*402);width:calc(var(--u)*64);height:calc(var(--u)*36)}

/* 年額約10万円減額（吹き出し: しっぽは円の下に重ねる） */
.p-matome__badge{
  position:absolute;left:calc(var(--u)*939);top:calc(var(--u)*241);width:calc(var(--u)*160);height:calc(var(--u)*160);
  display:flex;flex-direction:column;align-items:center;
  color:var(--pink);font-weight:900;text-align:center;white-space:nowrap;
}
.p-matome__badge::before{   /* しっぽ（Figma Badge Tail 38×33） */
  content:"";position:absolute;left:0;top:calc(var(--u)*128);width:calc(var(--u)*38);height:calc(var(--u)*33);
  background:var(--pink);clip-path:polygon(4.2% 88%,45% 0,100% 0,100% 51%);
}
.p-matome__badge::after{content:"";position:absolute;inset:0;border:calc(var(--u)*4.8) solid var(--pink);border-radius:50%;background:#fff}
.p-matome__badge span,
.p-matome__badge strong{position:relative;z-index:1}
.p-matome__badge span{margin-top:calc(var(--u)*22);font-size:calc(var(--u)*25.63);line-height:calc(var(--u)*23)}
.p-matome__badge small{font-size:calc(var(--u)*17.62);letter-spacing:-.09em}
.p-matome__badge b{font-family:"Roboto",sans-serif;font-size:calc(var(--u)*49.18);line-height:calc(var(--u)*44.3);letter-spacing:-.1em}
.p-matome__badge strong{margin:calc(var(--u)*5) 0 0 calc(var(--u)*2);font-size:calc(var(--u)*36.44);line-height:calc(var(--u)*39.4);letter-spacing:.07em;text-indent:.07em}
.p-matome__date{position:absolute;right:calc(var(--u)*47);top:calc(var(--u)*477);font-size:calc(var(--u)*14);font-weight:500;line-height:calc(var(--u)*20.3);white-space:nowrap}

/* ---- 商品概要: おまとめの下 100px（おまとめ側の余白で取る） ---- */
.p-detail{padding-top:0}

/* ==========================================================================
   SP
   ========================================================================== */
@media screen and (max-width:767px){
  .page-smile{--cta-h:8rem}
  .p-mv{height:75rem}
  .p-mv::after{content:none}
  .p-mv__title{top:3.3rem;left:50%;width:36rem;height:68.5rem;margin-left:-18rem}

  .p-merit{padding-top:0}
  .p-merit__heading{font-size:1.8rem;line-height:1.611}
  .p-merit__list{margin-top:3rem}
  .p-point__visual img{height:25.7rem}

  /* おまとめ: Figma SP は PC の 0.48 倍（528px）で画面幅からはみ出すため横スクロール */
  .p-matome{width:auto;padding:4rem 0 6rem}
  .p-matome .c-subtitle{width:35rem;margin:0 auto}
  .p-matome__scroll{margin-top:3rem;padding:0 1.5rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .p-matome__card{--u:.048rem}
  /* Figma SP は 0.48 倍を基本に、帯・注記・日付だけ大きめ（以下は SP の座標を --u に換算） */
  .p-matome__card{height:calc(var(--u)*531)}
  .p-matome__card::before{height:calc(var(--u)*489.6)}
  .p-matome__head{height:calc(var(--u)*81.3);line-height:calc(var(--u)*38.5)}
  .p-matome__before,
  .p-matome__after{top:calc(var(--u)*104.2);height:calc(var(--u)*272.9)}
  .p-matome__notes{left:calc(var(--u)*205);font-size:calc(var(--u)*20.83);line-height:calc(var(--u)*26)}
  .p-matome__notes--card{top:calc(var(--u)*24)}
  .p-matome__notes li + li{margin-top:calc(var(--u)*4)}
  .p-matome__loan--free{top:calc(var(--u)*170)}
  .p-matome__notes--free{top:calc(var(--u)*161.5)}
  .p-matome__switch{top:calc(var(--u)*220.8)}
  .p-matome__dash::before{top:calc(var(--u)*96.4)}
  .p-matome__dash::after{top:calc(var(--u)*354.7)}
  .p-matome__name{height:calc(var(--u)*54.2);line-height:calc(var(--u)*33.3)}
  .p-matome__spec{top:calc(var(--u)*74)}
  .p-matome__spec dt{line-height:calc(var(--u)*25.6)}
  .p-matome__pay{top:calc(var(--u)*408)}
  .p-matome__arrow{top:calc(var(--u)*421)}
  .p-matome__date{top:calc(var(--u)*502);font-size:calc(var(--u)*20.8);line-height:calc(var(--u)*30.2)}

  .p-detail{padding-top:0}
}