/* ============================================================
   04-buttons.css
   .btn 系（ヒーロー以外でも使う共通パーツ）
   読み込み順は index.html の <link> の並びが正。順番を変えると見た目が変わる。
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:.94rem;letter-spacing:.05em;text-decoration:none;
  padding:14px 26px;border-radius:999px;transition:transform .2s,box-shadow .2s,background .25s;
}
.btn-y{background:var(--yellow);color:var(--navy-deep);box-shadow:0 10px 24px rgba(245,197,24,.3)}
.btn-y:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(245,197,24,.4)}
.btn-o{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.6)}
.btn-o:hover{transform:translateY(-2px);background:rgba(255,255,255,.1)}
.btn-navy{background:var(--navy);color:var(--white);box-shadow:0 10px 24px rgba(22,38,92,.26)}
.btn-navy:hover{transform:translateY(-2px);background:var(--navy-deep)}
.btn-ghost{background:var(--white);color:var(--navy);border:1.5px solid var(--navy)}
.btn-ghost:hover{transform:translateY(-2px);background:#eef1fb}
.btn:active{transform:translateY(0) scale(.98)}