/* ============================================================
   13-footer.css
   フッター
   読み込み順は index.html の <link> の並びが正。順番を変えると見た目が変わる。
   ============================================================ */
footer{background:var(--navy-deep);color:#a4b0e0;padding:48px 24px 110px;text-align:center}
footer .fsocial{display:flex;justify-content:center;align-items:center;gap:14px;margin:0 0 24px}
footer .fsocial a{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--navy-deep);background:var(--yellow);
  transition:transform .25s,box-shadow .25s;
}
footer .fsocial a svg{width:19px;height:19px;display:block}
footer .fsocial a:hover,footer .fsocial a:focus-visible{
  transform:translateY(-3px);box-shadow:0 10px 20px rgba(245,197,24,.28);
}
footer .fname{font-weight:900;color:var(--white);letter-spacing:.08em;margin-bottom:6px;font-size:1rem}
footer .flinks{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin:20px 0 24px}
footer .flinks a{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;color:#c5cdf0;text-decoration:none;border-bottom:1px solid transparent}
footer .flinks a:hover{border-bottom-color:var(--yellow);color:var(--yellow)}
footer small{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;display:block;line-height:2}