/* ==============================
   FOOTER
============================== */
.footer {
    position: fixed; left: 0; bottom: 0; width: 100%; min-width: 350px;
    height: 46px; background: rgba(61, 88, 175, 0.98); color: #fff;
    border-radius: 0; z-index: 20; display: flex; align-items: center;
    justify-content: flex-start; gap: 40px; font-size: 1.3em; margin-left: 0%;
    box-shadow: 0 -1px 7px #b2d2f18c;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 16px;
}
.footer::-webkit-scrollbar { display: none; }
.footer .footer-icon {
    cursor: pointer; font-size: 1.22em; margin: 0 18px;
    transition: color .18s; position: relative;
    flex-shrink: 0;
}
.footer .footer-icon:hover { color: #fbc02d; }
.footer .icon-tooltip {bottom:115%;}

/* アイコンツールチップ */
.icon-tooltip, .more-tooltip {
    position: absolute; bottom: 110%; left: 50%;
    transform: translateX(-50%);
    background: #232f68; color: #fff; font-size: 0.97em;
    padding: 4px 10px; border-radius: 7px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity .18s;
    z-index: 10;
}
.icon:hover .icon-tooltip, .show-more:hover .more-tooltip { opacity: 1; }


@media (max-width: 800px) {
    .main, .footer  { width: 100%!important; margin-left: 0!important; }
    .footer {
        left: 0%;
        gap: 8px;
        min-width: none;
        justify-content: flex-start;
        padding: 0 12px;
    }
    .footer .footer-icon { margin: 0 8px; }
}