@charset "UTF-8";
/* ==========================================================================
   教育ローン（Figma: PC 87:506 / SP 87:1058）
   ========================================================================== */
.page-education{
  --accent:var(--orange);
  --accent-bg:#fffae9;
  --step:var(--red);
  --flow:var(--text);
  --merit-r:10px;
  --point-cols:3;
}

/* ---- MV ---- */
.p-mv{height:595px;background-image:none}
.p-mv__title{top:60px;left:50%;width:933px;height:auto;margin-left:-466.5px}
.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 40px}
.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__h--special{--h-bg:var(--orange)}
.p-mrate__special{background:var(--accent-bg)}
.p-mrate__note{margin-top:40px;text-align:center;text-indent:.1em}

/* ---- メリット: 見出しは 22px・リードから画像まで 50px ---- */
.p-merit__list{margin-top:50px}
.p-merit__heading{font-size:22px;line-height:1.591}

/* ---- ちくぎんの教育ローンとは（1100px 幅の比較表） ---- */
.p-about{width:1100px;margin:0 auto;text-align:center}
.p-about__illust{display:block;width:231px;height:186px;margin:0 auto}
.p-about__eyebrow{margin-top:20px;color:var(--orange);font-size:22px;font-weight:700;line-height:1.591;text-indent:.1em}
.p-about__title{margin-top:20px}
.p-about__table{margin-top:50px;text-align:left}
.p-about__head{display:grid;grid-template-columns:1fr 1fr}
.p-about__type{position:relative;height:120px;padding-top:19px;color:#fff;text-align:center}
.p-about__type--lump{border-radius:10px 0 0 0;background:var(--orange)}
.p-about__type--card{border-radius:0 10px 0 0;background:var(--blue)}
/* 見出し下の三角（Figma: 41×24px、見出しの下端から 17px はみ出す） */
.p-about__type::after{
  content:"";position:absolute;left:50%;top:113px;margin-left:-20.5px;
  border-style:solid;border-width:24px 20.5px 0;border-color:currentColor transparent transparent;
  color:inherit;
}
.p-about__type--lump::after{border-top-color:var(--orange)}
.p-about__type--card::after{border-top-color:var(--blue)}
.p-about__name{font-size:30px;font-weight:700;line-height:1.3;text-indent:.1em}
.p-about__catch{margin-top:4px;font-size:22px;font-weight:700;line-height:1.591;text-indent:.1em}
.p-about__body{padding:0 30px 50px;border-radius:0 0 10px 10px;background:linear-gradient(to right,#fffae9 50%,#e7f7f7 50%)}
.p-about__row{display:grid;grid-template-columns:1fr 1fr;column-gap:60px}
.p-about__row--intro{padding-top:42px}
.p-about__cat{
  grid-column:1 / -1;height:40px;margin-top:20px;
  background:#e4e4e4;
  font-size:20px;font-weight:700;line-height:40px;text-align:center;text-indent:.1em;
}
/* 帯を左右の列に分け、それぞれの列の金額の真上に見出しを置く（帯の灰色は連続） */
.p-about__cat--split{display:grid;grid-template-columns:1fr 1fr;column-gap:60px}
.p-about__cell{min-width:0}
.p-about__cell--center{text-align:center}
.p-about__label{margin-top:20px;font-size:20px;font-weight:700;line-height:1.6;text-indent:.1em}
.p-about__small{margin-top:7px;text-indent:.1em}
.p-about__big{height:65px;margin-top:-1px;font-size:20px;font-weight:700;line-height:65px;letter-spacing:0;white-space:nowrap}
.p-about__big b{font-size:50px;line-height:1;letter-spacing:0}
.p-about__big *{letter-spacing:0}
.p-about__row:not(.p-about__row--intro) .p-about__cell--center > .p-about__big:first-child{margin-top:20px}
.p-about__cell--lump .p-about__big{color:var(--orange)}
.p-about__cell--lump .p-about__big--rate{color:var(--text)}   /* 金利のみ「年」「〜」は黒、数字と % はオレンジ */
.p-about__cell--lump .p-about__rate{color:var(--orange)}
.p-about__cell--card .p-about__big{color:var(--blue)}
.p-about__cell--card .p-about__nen{color:var(--text)}   /* 「年」のみ黒 */
.p-about__unit{margin-top:-1px;text-indent:.1em}
.p-about__note{margin-top:21px;text-align:left}
.p-about__lead{margin-top:20px;font-size:22px;font-weight:700;line-height:1.591;text-align:center;text-indent:.1em}
/* 返済イメージ図: PC は各列の中央、SP は図だけ横スクロール */
.p-about__chart-box{display:flex;justify-content:center;margin-top:20px}
.p-about__chart{display:block;height:268px}
/* PC は図をそのまま表示（拡大ボタンとしては働かせない） */
.p-about__zoom{display:block;padding:0;border:0;background:none;cursor:default;pointer-events:none}
.p-about__zoom-badge{display:none}
.p-about__chart--lump{width:480px}
.p-about__chart--card{width:490px}
.p-about__desc{margin-top:20px}
.p-about__btn{margin-top:30px}

/* ---- お申込みについて: ご融資までの流れ（マイカーローンと同じ構成）・申込みボタン ---- */
.p-step-scroll{width:1100px;margin-left:auto;margin-right:auto}
.p-tabbox__btns{display:flex;justify-content:center;gap:20px;margin-top:50px}
.p-tabbox__btn .c-btn__main{letter-spacing:0;text-indent:0}

/* ---- FAQ: 回答枠の下余白 ---- */
.p-faq__a-inner{padding-bottom:27px}

/* ---- 下部固定CTA: 文言の字間は 0 ---- */
.p-cta__btn .c-btn__main{letter-spacing:0;text-indent:0}

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

  .p-mv{height:60rem;background-image:none}
  /* 写真の上端をカード下端（約 437px）の少し上に置き、女の子の顔をカードの下に出す。上端基準で表示 */
  .p-mv::after{height:18.8rem;background-image:none}
  .p-mv__title{top:2rem;left:50%;width:36rem;height:auto;margin-left:-18rem}

  .p-mrate{width:auto;padding:5.4rem 0 2rem}
  .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__heading{font-size:1.8rem;line-height:1.611}
  .p-merit__list{margin-top:3rem}
  .p-point__visual img{height:25.7rem}

  /* ちくぎんの教育ローンとは: 175px × 2 列 */
  .p-about{width:35rem}
  .p-about__illust{width:18rem;height:14.5rem}
  .p-about__eyebrow{font-size:1.6rem;line-height:1.625}
  .p-about__title{margin-top:1rem}
  .p-about__table{margin-top:4rem}
  .p-about__type{height:12rem;padding:1.7rem .5rem 0}
  .p-about__type::after{display:none}
  .p-about__name{font-size:1.8rem;line-height:1.611}
  .p-about__catch{margin-top:1rem;font-size:1.4rem;line-height:1.571}
  .p-about__body{padding:0 1rem 6.3rem;background:linear-gradient(to right,#fffae9 50%,#e7f7f7 50%)}
  .p-about__row{column-gap:2rem}
  .p-about__cat--split{column-gap:2rem}
  .p-about__row--intro{padding-top:2rem}
  .p-about__row--intro .p-about__cell,.p-about__desc,.p-about__note{font-size:1.4rem;line-height:1.571}
  .p-about__cat{height:4.1rem;margin-top:2rem;font-size:1.8rem;line-height:4.1rem}
  .p-about__row:nth-child(3) .p-about__cat{margin-top:5.3rem}   /* Figma SP: 金利の下のみ 53px */
  .p-about__label{margin-top:2rem;font-size:1.8rem;line-height:1.611}
  .p-about__small{margin-top:1rem}
  .p-about__big{height:6.5rem;font-size:2rem;line-height:6.5rem;white-space:normal}
  .p-about__big b{font-size:5rem}
  .p-about__row:nth-child(3) .p-about__big{height:13rem}   /* 2 行（65px × 2） */
  .p-about__row:nth-child(2) .p-about__big{height:9rem}   /* 金利行: 一括借入型は「年1.50%〜／年3.00%」の 2 行（行間を詰める） */
  .p-about__row:nth-child(2) .p-about__cell--card .p-about__big{line-height:9rem}   /* 1 行のカードローン型は行の中央に置く */
  /* 一括借入型の金利は列幅（約 15rem）に収めるため、数字を小さくして「年」が単独で折り返さないよう nowrap */
  /* 2 行は左揃え。ブロック自体は列の中央に置く（display:table で内容幅に縮める） */
  .p-about__row:nth-child(2) .p-about__big--rate{display:table;height:auto;margin:1rem auto 0;font-size:1.8rem;line-height:1.25;text-align:left;white-space:nowrap}
  .p-about__big--rate b{font-size:3.6rem}
  .p-about__note{margin-top:2.3rem}
  .p-about__lead{margin-top:2rem;font-size:1.6rem;line-height:1.625;text-align:left;text-indent:0}
  /* 図は列幅に縮小し、タップでモーダルに拡大（「タップで拡大」バッジで案内） */
  .p-about__chart-box{margin-top:2rem;padding-bottom:1.5rem}
  .p-about__zoom{--zoom:var(--orange);position:relative;width:100%;padding-bottom:4rem;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
  .p-about__zoom--card{--zoom:var(--blue)}
  .p-about__chart{width:100%;height:auto}
  .p-about__zoom-badge{
    position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    display:flex;align-items:center;justify-content:center;gap:.4rem;
    width:13rem;height:3.2rem;border-radius:1.6rem;
    background:var(--zoom);box-shadow:0 .2rem .6rem rgba(0,0,0,.2);
    color:#fff;font-size:1.3rem;font-weight:700;line-height:1;letter-spacing:.05em;white-space:nowrap;
  }
  .p-about__zoom-icon{flex-shrink:0;width:1.6rem;height:1.6rem}
  .p-about__zoom:active .p-about__zoom-badge{transform:translateX(-50%) scale(.95)}
  .p-about__desc{margin-top:0}
  .p-about__btn{margin-top:4.3rem}

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

  /* お申込みについて: タブ 170×75px・パネル 350px */
  .p-step-scroll{width:auto}
  .p-step{padding:0 2rem 0 0}
  .p-step__card{height:28rem}
  .p-step__note{margin-top:2rem;font-size:1.6rem;line-height:1.625}
  .p-tabbox__btns{flex-direction:column;align-items:center;gap:3rem;margin-top:3.8rem}
  .p-tabbox__btn{height:8rem;padding-bottom:.7rem}
  .p-tabbox__btn .c-btn__main{margin-top:-.4rem}   /* Figma: 補足は上 8px・文言は上 30px */
  .p-tabbox__btn .c-btn__main{letter-spacing:.1em}

  /* 下部固定CTA: 2 分割（Figma SP 一括=オレンジ / カードローン=青） */
  .p-cta__btn .c-btn__main{font-size:1.6rem}
}

/* ---- 商品概要「ご用意いただくもの」: 補足・内訳は 1 文字分字下げ ---- */
.p-acc__indent{margin-left:1em}