@charset "UTF-8";
/* ==========================================================================
   マイカーローン（Figma: PC 27:1065 / SP 63:1187）
   ========================================================================== */

/* ---- SP 下部固定CTA: 白い帯の内側にボタンを置く（Safari 下部がボタン色に染まるのを防ぐ） ---- */
@media screen and (max-width:767px){
  .page-mycar .p-cta{background:#fff;box-shadow:0 -.2rem 1rem rgba(0,0,0,.08)}
  .page-mycar .p-cta__inner{padding:1.6rem 2rem}
  .page-mycar .p-cta__btn{height:calc(var(--cta-h) - 3.2rem);border-radius:.8rem}
  .page-mycar .p-cta__btn.c-btn--single .c-btn__arrow{right:2rem}
}
.page-mycar{
  --accent:var(--blue);
  --accent-bg:#eef9fb;
  --step:var(--blue);
  --flow:var(--red);        /* Figma では「ご融資までの流れ」のみ朱 */
  --merit-r:10px;
}

/* ---- MV ---- */
.p-mv{height:574px;background-image:none}
.p-mv__title{top:60px;left:50%;width:1076px;height:auto;margin-left:-538px}
.p-mv__title img{height:auto}

/* ---- お借入れ金利（CTA の直後。Figma 192:713: 180 / 180 / 320 / 180px の 4 列） ---- */
.p-mrate{width:1100px;margin:0 auto;padding:60px 0 100px}
.p-mrate__scroll{margin-top:50px}
.p-mrate__table{width:860px;margin:0 auto;table-layout:fixed;text-align:center}
.p-mrate__table *{letter-spacing:.1em}
/* 見出し行: 4 列とも高さ 80px、文字は天地中央 */
.p-mrate__h{height:80px;padding:0;vertical-align:middle;font-size:18px;font-weight:700;line-height:1.6;background:linear-gradient(var(--h-bg),var(--h-bg)) 0 0 / 100% 100% no-repeat}
.p-mrate__h--cat{--h-bg:var(--bg-beige);width:180px;border-right:1px solid #868686}   /* 本文の縦線（th の border-right）と同じ罫線で揃える */
.p-mrate__h--cond{--h-bg:var(--bg-beige);width:180px}
.p-mrate__h--special{--h-bg:var(--blue);width:320px;color:#fff;font-size:20px;line-height:1.6}
.p-mrate__h--normal{--h-bg:#868686;width:180px;color:#fff}
/* 本文: 行 50px・罫線 #868686（金利区分の列は右に縦線） */
.p-mrate__table tbody tr{border-bottom:1px solid #868686}
.p-mrate__table tbody tr.p-mrate__row--sub{border-bottom:0}
.p-mrate__table tbody tr.p-mrate__row--sub > td{border-bottom:1px solid #868686}
.p-mrate__table tbody th,.p-mrate__table tbody td{height:70px;vertical-align:middle;font-size:16px;font-weight:400;line-height:1}
.p-mrate__table tbody th{border-right:1px solid #868686}
.p-mrate__special{background:#eef9fb;color:var(--red);font-size:22px!important;font-weight:700!important}
.p-mrate__special b{font-size:36px;line-height:1}
.p-mrate__normal{font-size:22px!important}
.p-mrate__normal b{font-size:30px;font-weight:400;line-height:1}
/* Figma: 数字の大きさに関わらず字間は 2.2px 固定・「%」は 20px（通常金利は細字）。見出しセルの height は padding を含まない */
.p-mrate__special,.p-mrate__special *,.p-mrate__normal,.p-mrate__normal *{letter-spacing:2.2px}
.p-mrate__special,.p-mrate__normal{white-space:nowrap}
.p-mrate__pct{font-size:20px}
.p-mrate__note{margin-top:40px;text-align:center;text-indent:.1em}

/* ---- メリット: 選ばれる理由（下余白 100px）の直後のため上余白なし。リードから画像まで 50px ---- */
.p-merit{padding-top:0}
.p-merit__list{margin-top:50px}

/* ---- ご返済のイメージ（他社との比較表） ---- */
.p-compare{width:1100px;margin:0 auto}
.p-compare__scroll{margin-top:50px}
.p-compare__table{width:710px;margin:0 auto;text-align:center}
.p-compare__table thead th{height:80px;vertical-align:top;color:#fff;font-weight:700}
.p-compare__table thead b{display:block;font-weight:700}
.p-compare__table thead small{display:block;font-weight:400}
.p-compare__h-amount{width:180px;padding-top:23px;background:var(--bg-beige);color:var(--text)!important;font-size:18px;line-height:1.611}
.p-compare__h-other{width:180px;padding-top:10px;background:#868686}
.p-compare__h-other b{font-size:18px;line-height:1.611}
.p-compare__h-other small{margin-top:6px;font-size:16px;line-height:1.625}
.p-compare__h-ours{width:350px;padding:10px 10px 0 0;background:var(--blue)}   /* Figma: 文字は列中央より 5px 左 */
.p-compare__h-ours b{font-size:22px;line-height:1.591}
.p-compare__h-ours small{margin-top:0;font-size:16px;line-height:1.625}
/* 行の高さは Figma の罫線位置（67 / 66 / 69px） */
.p-compare__table tbody tr{border-bottom:1px solid #868686}
.p-compare__table tbody tr:nth-child(1) > *{height:67px}
.p-compare__table tbody tr:nth-child(2) > *{height:66px}
.p-compare__table tbody tr:nth-child(3) > *{height:69px}
.p-compare__table tbody th,.p-compare__other{font-size:22px;line-height:1.591;vertical-align:middle}
.p-compare__table tbody th{background:#fff;font-weight:400}
.p-compare__other{background:var(--bg-row)}
.p-compare__ours{padding:8px 0 0 18px;background:#fff;font-weight:700;text-align:left;vertical-align:top}   /* Figma: 金額は行の上から 7〜10px */
.p-compare__pay{display:inline-block;width:105px;color:var(--blue);font-size:22px;line-height:1.591;text-align:center}
.p-compare__pay b{font-size:28px}
.p-compare__save{display:inline-block;margin-left:18px;color:var(--red);font-size:22px;line-height:1.591}
.p-compare__save b{font-size:34px}
/* Figma: 数字の大きさに関わらず字間は 2.2px 固定 */
.p-compare__pay,.p-compare__pay b,.p-compare__save,.p-compare__save b{letter-spacing:2.2px;white-space:nowrap}
.p-compare__note{margin-top:40px;text-align:center;text-indent:.1em}
.p-compare__btn{margin-top:30px}

/* ---- ちくぎんマイカーローンが選ばれる理由（910px 幅の比較表） ---- */
.p-reason{width:1100px;margin:0 auto;padding:100px 0;text-align:center}
.p-reason__illust{display:block;width:231px;height:186px;margin:0 auto}
.p-reason__eyebrow{margin-top:20px;color:var(--blue);font-size:22px;font-weight:700;line-height:1.591;text-indent:.1em}
.p-reason__title{margin-top:20px}
.p-reason__table{width:910px;margin:50px auto 0;text-align:left}
.p-reason__head{display:grid;grid-template-columns:1fr 1fr;height:62px}
.p-reason__head p{padding-top:11px;color:#fff;font-size:30px;font-weight:700;line-height:1.3;text-align:center;text-indent:.1em}
.p-reason__head-ours{border-radius:10px 0 0 0;background:var(--blue)}
.p-reason__head-other{border-radius:0 10px 0 0;background:#959595}
.p-reason__rows{padding-bottom:50px;border-radius:0 0 10px 10px;background:linear-gradient(to right,#eef9fb 50%,#fff 50%)}
.p-reason__row{display:grid;grid-template-columns:1fr 1fr;padding:30px 30px 0}
.p-reason__cat{
  grid-column:1 / -1;height:41px;
  background:#48b8cf;color:#fff;
  font-size:22px;font-weight:700;line-height:41px;text-align:center;text-indent:.1em;
}
.p-reason__cell{margin:0}
.p-reason__cell--ours{padding-right:30px}
.p-reason__cell--other{padding-left:30px}
.p-reason__mark{display:block;width:40px;height:40px;margin:20px auto 0}
.p-reason__label{margin-top:7px;font-size:22px;font-weight:700;line-height:1.591;text-align:center;text-indent:.1em}
.p-reason__text{margin-top:20px}

/* ---- 商品概要: 選ばれる理由の直後のため上余白なし ---- */
.p-detail{padding-top:0}

/* ---- ご融資までの流れ: 270px × 5 枚を本文幅（1100px）の中で横スクロール + scroll-hint ---- */
.p-step-scroll{width:1100px;margin-left:auto;margin-right:auto}
.p-apply__btn{padding-bottom:5px}   /* Figma: 文言は中央より 3px 上 */
.p-faq__a-inner{padding-bottom:27px}

/* ==========================================================================
   SP
   ========================================================================== */
@media screen and (max-width:767px){
  .page-mycar{--cta-h:8rem;--step-w:27rem;--step-label-top:19.5rem}

  .p-mv{height:70rem;background-image:none}
  .p-mv::after{height:19.8rem;background-image:none}
  .p-mv__title{top:3rem;left:50%;width:36rem;height:auto;margin-left:-18rem}

  .p-merit{padding-top:0}

  /* お借入れ金利: 4 列 485px を横スクロール（Figma SP なし） */
  .p-mrate{width:auto;padding:5.4rem 0 6rem}
  .p-mrate .c-title{width:35rem;margin:0 auto}
  .p-mrate__scroll{margin-top:3rem;padding:0 2rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .p-mrate__table{width:48.5rem}
  .p-mrate__h{height:6.2rem;padding:0;font-size:1.4rem;line-height:1.5;background-size:100% 100%}
  .p-mrate__h--cat{width:11.5rem}
  .p-mrate__h--cond{width:11rem}
  .p-mrate__h--special{width:15rem;font-size:1.4rem;line-height:1.5}
  .p-mrate__h--normal{width:11rem}
  .p-mrate__table tbody th,.p-mrate__table tbody td{height:6rem;font-size:1.3rem}
  .p-mrate__special,.p-mrate__normal{font-size:1.6rem!important}
  .p-mrate__special b{font-size:2.6rem}
  .p-mrate__normal b{font-size:2.2rem}
  .p-mrate__special,.p-mrate__special *,.p-mrate__normal,.p-mrate__normal *{letter-spacing:.1em}
  .p-mrate__pct{font-size:1.4rem}
  .p-mrate__note{width:35rem;margin:2rem auto 0;text-align:left;text-indent:0}
  .p-merit > .c-title{margin:0 -2rem}   /* Figma の文字ボックスは 366px（本文幅 350px より広い） */
  .p-merit .c-lead{margin-top:2rem}
  .p-merit__list{margin-top:3rem}
  .p-merit__block--point{margin-top:5.5rem}

  /* ご返済のイメージ: 80 / 120 / 150px の 3 列 */
  .p-compare{width:35rem}
  .p-compare__scroll{margin-top:4rem}
  .p-compare__table{width:35rem;table-layout:fixed}
  .p-compare__table thead th{height:9rem}
  .p-compare__h-amount{width:8rem;padding-top:2.4rem;font-size:1.6rem;line-height:1.3;letter-spacing:0}
  .p-compare__h-other{width:12rem;padding-top:1.2rem}
  .p-compare__h-ours{width:15rem;padding-top:1rem}
  .p-compare__h-other b,.p-compare__h-ours b{font-size:1.6rem;line-height:1.3;letter-spacing:0}
  .p-compare__h-other small,.p-compare__h-ours small{margin-top:.4rem;font-size:1.2rem;line-height:1.583}
  .p-compare__h-ours{padding:1rem 0 0}
  .p-compare__h-ours small{margin-top:.6rem}
  .p-compare__table tbody tr > *{height:6.3rem!important}
  .p-compare__table tbody th,.p-compare__other{font-size:1.5rem;line-height:1.6}
  .p-compare__other{background:#ededed}
  .p-compare__ours{padding:0;text-align:center;vertical-align:middle}
  .p-compare__pay,.p-compare__save{display:block;width:auto;margin:0;font-size:1.6rem;line-height:2rem}
  .p-compare__pay b,.p-compare__save b{font-size:2rem}
  .p-compare__pay,.p-compare__pay b,.p-compare__save,.p-compare__save b{letter-spacing:.1em}
  .p-compare__save{margin-top:.5rem}
  .p-compare__note{margin-top:2.8rem;text-align:left;text-indent:0}
  .p-compare__btn{margin-top:3rem}

  /* 選ばれる理由: 175px × 2 列 */
  .p-reason{width:35rem;padding:6rem 0}
  .p-reason__illust{width:18rem;height:14.5rem}
  .p-reason__eyebrow{font-size:1.6rem;line-height:1.625}
  .p-reason__title{margin-top:1rem}
  .p-reason__table{width:35rem;margin-top:4rem}
  .p-reason__head{height:5rem}
  .p-reason__head p{padding-top:1.2rem;font-size:1.6rem;line-height:1.625;letter-spacing:.1em}
  .p-reason__rows{background:linear-gradient(to right,#fff 50%,#f3f3f3 50%)}
  .p-reason__rows{padding-bottom:5rem}
  .p-reason__row{grid-template-columns:15.5rem 15.7rem;column-gap:1.8rem;padding:2rem 1rem 0}   /* Figma: 155px + 18px + 157px */
  .p-reason__row + .p-reason__row{padding-top:2rem}
  .p-reason__cat{height:3rem;font-size:1.6rem;line-height:3rem}
  .p-reason__cell--ours{padding-right:0}
  .p-reason__cell--other{padding-left:0}
  .p-reason__mark{width:4rem;height:4rem;margin-top:1.8rem}
  .p-reason__label{margin-top:1rem;font-size:1.6rem;line-height:1.625}
  .p-reason__text{margin-top:1rem;font-size:1.5rem;line-height:1.6}

  .p-detail{padding-top:0}
  /* 商品概要の帯のみ（FAQ の見出しは文字の高さに合わせる） */
  .p-detail .p-acc__toggle{height:9.4rem}
  .p-detail .p-acc__title{line-height:1.3}

  .p-step-scroll{width:auto}
  .p-step{padding:0 2rem 0 0}
  .p-apply__btn{padding-bottom:0}
  .p-step__card{height:28rem}
  .p-step__note{margin-top:2rem;font-size:1.6rem;line-height:1.625}
}