/* ===== reason ===== */
body{
    font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
/* ===== Section ===== */
.reason{
    background:var(--sub);
    padding:80px 24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:32px;
  }
/* ===== Grid ===== */
.reason-grid{
    width:100%;
    max-width:1020px;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:32px 40px;
  }
.reason-card{
    position:relative;
    background:var(--white);
    border-radius:32px;
    padding:32px 60px;
    min-height:205px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
.reason-num{
    position:absolute;
    top:14px;
    left:14px;
    min-width:44px;
    padding:8px 12px;
    background:var(--sub);
    color:var(--blue);
    border-radius:30px;
    font-size:24px;
    font-weight:700;
    letter-spacing:-.06em;
    line-height:1;
    text-align:center;
  }
.reason-inner{
    display:flex;
    align-items:center;
    gap:20px;
  }
.reason-icon{
    width:100px;
    height:100px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
.reason-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
  }
.reason-body{
    display:flex;
    flex-direction:column;
    gap:16px;
    align-items:flex-start;
    min-height:100px;   /* 本文が1行/2行でもタイトル位置を全カードで揃える */
  }
.reason-body h3{
    font-size:24px;
    font-weight:700;
    line-height:1.3;
    color:var(--blue);
  }
.reason-body p{
    font-size:16px;
    font-weight:400;
    line-height:1.6;
    letter-spacing:.01em;
    color:var(--ink);
  }
/* ===== Scroll reveal（reveal.js が html に .reveal-enabled を付与） =====
   カードが画面に入ったら下から24pxフェードアップ。順番はJS側の transition-delay で制御 */
.reveal-enabled .reason-card{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .6s ease, transform .6s ease;
  }
.reveal-enabled .reason-card.is-inview{
    opacity:1;
    transform:none;
  }
@media (prefers-reduced-motion:reduce){
.reveal-enabled .reason-card{opacity:1;transform:none;transition:none}
}
/* ===== Responsive ===== */
@media (max-width:1040px){
.reason-grid{gap:24px}
.reason-card{padding:28px 32px}
.reason-inner{gap:16px}
.reason-body h3{font-size:22px}
}
@media (max-width:760px){
.reason-grid{
      grid-template-columns:1fr;
      gap:20px;
      max-width:420px;
    }
.reason-card{min-height:0;padding:36px 28px 28px}
}
@media (max-width:480px){
.reason{padding:56px 20px;gap:28px}
.reason-inner{gap:14px}
.reason-icon{width:84px;height:84px}
.reason-body h3{font-size:20px}
.reason-body p{font-size:15px}
}