.spi-mfoot {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    pointer-events: none;
}
.spi-mfoot-tip {
    position: relative; z-index: 1; display: flex;
    box-sizing: border-box; max-width: 512px; margin: 0 auto; padding: 0 16px;
    text-align: left;
}
.spi-mfoot-tip[hidden] { display: none; }
.spi-mfoot .spi-mfoot-bubble {
    position: relative; display: inline-block; max-width: 100%; box-sizing: border-box;
    padding: 4px 12px; border-radius: 14px;
    background: #fff; color: #00796b;
    font-size: 14px; font-weight: 700; line-height: 1.35;
    font-feature-settings: "palt";
    box-shadow: 0 2px 6px rgba(0, 45, 42, .18);
}
.spi-mfoot .spi-mfoot-bubble > i { margin-right: 5px; font-size: 13px; color: #00796b; }
.spi-mfoot .spi-mfoot-bubble:after {
    content: ""; position: absolute; top: 100%; left: 22%; margin-left: -5px;
    width: 0; height: 0;
    border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff;
}
.spi-mfoot-band {
    position: relative; isolation: isolate;
    pointer-events: auto;
    box-sizing: border-box; padding: 12px 16px 15px;
    padding-top: calc(12px + env(safe-area-inset-bottom, 0px) / 4);
    padding-bottom: max(15px, env(safe-area-inset-bottom, 0px));
    background: transparent; border-top: 0;
}
.spi-mfoot-band::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: #fff;
    border-top: 1px solid #e3e8e7;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
}
.spi-mfoot .spi-mfoot-btn,
.spi-mfoot .spi-mfoot-btn:visited {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-sizing: border-box; width: 100%; max-width: 480px; min-height: 48px; margin: 0 auto; padding: 0 12px;
    border-radius: 999px; background: #FF9900; color: #fff;
    font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap;
    font-feature-settings: "palt";
    text-decoration: none; cursor: pointer;
    box-shadow: 0 3px 0 #d97f00;
}
.spi-mfoot .spi-mfoot-btn:hover,
.spi-mfoot .spi-mfoot-btn:focus { background: #f08c00; color: #fff; text-decoration: none; }
.spi-mfoot .spi-mfoot-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #d97f00; }
.spi-mfoot .spi-mfoot-btn i { color: #fff; font-size: 17px; transform: translateY(-2.75px); }
body.spi-has-mfoot { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px) * 1.25); }
body.spi-has-mfoot.spi-has-mfoot-tip { padding-bottom: calc(103px + env(safe-area-inset-bottom, 0px) * 1.25); }
body.spi-has-mfoot-tip .totop { bottom: calc(117px + env(safe-area-inset-bottom, 0px) * 1.25); }
@media (min-width: 900px) {
    .spi-mfoot { display: none; }
    body.spi-has-mfoot, body.spi-has-mfoot.spi-has-mfoot-tip { padding-bottom: 0; }
}

/* 2026-10-05 27卒だけ＝ボタン下の補足1行（嶋村さん案①）。無い区分は hidden＝従来の高さのまま。 */
.spi-mfoot .spi-mfoot-sub { margin: 6px 0 0; font-size: 11.5px; line-height: 1.3; color: #555; text-align: center; font-feature-settings: "palt"; }
.spi-mfoot .spi-mfoot-sub[hidden] { display: none; }
.spi-mfoot-band:has(.spi-mfoot-sub:not([hidden])) { padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
body.spi-has-mfoot.spi-has-mfoot-sub { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px) * 1.25); }
body.spi-has-mfoot.spi-has-mfoot-tip.spi-has-mfoot-sub { padding-bottom: calc(119px + env(safe-area-inset-bottom, 0px) * 1.25); }
body.spi-has-mfoot-tip.spi-has-mfoot-sub .totop { bottom: calc(133px + env(safe-area-inset-bottom, 0px) * 1.25); }
@media (min-width: 900px) {
    body.spi-has-mfoot.spi-has-mfoot-sub, body.spi-has-mfoot.spi-has-mfoot-tip.spi-has-mfoot-sub { padding-bottom: 0; }
}

/* 🔁 2026-10-06 27卒の吹き出し（22字）が幅375pxの端末で「ご案内／内」と2行に割れていた＝帯に補足がある27卒だけ字を画面幅に合わせて詰める（下限12px）。 */
body.spi-has-mfoot-sub .spi-mfoot .spi-mfoot-bubble { font-size: max(12px, min(14px, calc((100vw - 80px) / 22))); }
@media (min-width: 900px) {
    body.spi-mfoot-pc .spi-mfoot { display: block; }
    body.spi-mfoot-pc .spi-mfoot-band { max-width: 688px; margin: 0 auto; }
    body.spi-mfoot-pc .spi-mfoot-band::before { border: 1px solid #e3e8e7; border-bottom: 0; border-radius: 12px 12px 0 0; }
}