/* ════════════════════════════════════════════════════════════════════════
   共通のフッター（全サイト）
   ★正本はここです。_kit/base.css からは切り出してあります。
     _src から書き出す 3 サイト … build.mjs が kit.css の末尾に足します
     site-build（手で作った例外） … sync-legal.mjs が assets/footer.css へ写します
   ★色の変数（--c-*）が無いサイトでも読めるよう、使っているのは
     --f-body だけです（無ければブラウザの既定の書体になります）。
   ════════════════════════════════════════════════════════════════════ */
.site-footer{background:#0F1B33;color:rgba(255,255,255,.72);padding:80px 0 36px;font-size:14px}
.site-footer a{color:rgba(255,255,255,.86);text-decoration:none}
.site-footer a:hover{color:#fff}
/* ★4 列。製品どうしの行き来（PRODUCTS）を足したぶん 1 列増えています。 */
.site-footer .top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
/* ★サイトによっては footer .wrap に別の指定がある（site-build の site.css は
   footer .wrap{display:flex}）。共通のフッターでは必ず縦に積む。 */
.site-footer .wrap{display:block}
/* ★名前とよみは必ず別の行に。製品名が長いサイトで重なっていた。 */
.site-footer .logo{display:block}
.site-footer .logo b{display:block;color:#fff;font-size:28px;line-height:1.3}
.site-footer .logo small{display:block;color:rgba(255,255,255,.55)}
.site-footer .powered{display:flex;align-items:center;gap:12px;margin-top:22px}
.site-footer .powered img{width:108px;height:auto;background:#fff;border-radius:10px;padding:6px 10px}
.site-footer h3{margin:0 0 14px;color:#fff;font-size:13px;letter-spacing:.16em;font-family:var(--f-body);font-weight:700}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.site-footer li{min-width:0;overflow-wrap:anywhere}
.site-footer .bottom{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.5)}
@media (max-width:1100px){.site-footer .top{grid-template-columns:1.4fr 1fr 1fr;gap:40px}}
@media (max-width:960px){.site-footer{padding:56px 0 32px}.site-footer .top{grid-template-columns:1fr;gap:36px}}