@charset "UTF-8";

footer {
    font-family: 'Hannari', serif;
    border-top: 3px solid #18295C;
    background-color: #EBEAE8;
    position: relative;
}

footer > #other_sites {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

footer  #sister_school, footer #reunion, footer #recruitment {
    position: relative;
    height: 50px;
    width: min(300px, calc(90vw * var(--zoom-level)));
    font-size: min(16px, calc(5vw * var(--zoom-level)));
    margin: 5px;
    box-shadow: 2px 2px 5px 1px #18295C;
}

footer  #sister_school {
    background-color: limegreen;
    color: black;
}

footer  #reunion {
    background-color: #565389;
    color: #EBEAE8;
}

footer #recruitment {
    background-color: aquamarine;
    color: black;
}

footer  div > span:first-child {
    display: inline-block;
    background-color: honeydew;
    color: black;
    margin: 5px 5px;
    line-height: 40px;
}

footer  div > span:last-child {
    display: inline-block;
    height: 40px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 3px;
}

footer > p:nth-child(2) {
    text-align: center;
    margin-bottom: 26px;
}

footer > p:nth-last-child(2) {
    position: absolute;
    right: 10px;
    transform: translateY(-32px);
}

footer > p:nth-last-child(2) > a {
    color: darkcyan;
}

footer > p:nth-last-child(2) > a.hover {
    opacity: 0.8;
}

footer > p:last-child {
    display: flex;
    justify-content: right;
}

footer > p:last-child > a {
    margin: 5px;
    color: darkcyan;
}

footer > p:last-child > a.hover {
    opacity: 0.8;
}