@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}

:root{
    --theme-color-1 : #0066cc;
    --theme-color-2 : #eff7ff;
    --theme-color-3 : #f9ffff;
    --alert : #ffd43b;
    --error : #ff007f;
    --footer-height : 64px;
}

body {
    position: relative;
    background-color: var(--theme-color-1);
}

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    width: 100vw;
    height: var(--footer-height);
}

.content {
    padding: 16px;
    height: calc(100vh - var(--footer-height));
}

.footer-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    background-color: var(--theme-color-2);
    text-decoration: none;
}

.footer-item.selected {
    background-color: var(--theme-color-3);
}