@media screen and (max-width: 999px) {
    html {
        font-size: 15pt;
    }
}

body {
    background-color: rgb(71, 97, 133);
    background-image: url("../core/pictures/bg.png");
    padding: calc(2.8rem + 5rem) 0 5rem 0;
    margin: 0;
}
@media screen and (min-width: 1280px) {
    body {
        font-family: 'M PLUS Rounded 1c', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    }
}

.hidden {
    display: none !important;
}

.notice .buttons-area {
    width: 80%;
    height: auto;
    display: flex;
    box-sizing: border-box;
    flex-flow: column;
    align-items: center;
    margin: 3rem auto 0 auto;
}
.notice .buttons-area button {
    height: 4em;
    width: 10rem;
    margin: 0 0 1.5em 0;
}

.entities {
    display: block;
    width: 32em;
    padding: 0;
    margin: 0 auto;
    list-style-type: none;
}
@media screen and (max-width: 999px) {
    .entities {
        width: 90%;
    }
}
.entities > li {
    display: block;
    margin: 2rem 0;
    padding: 0;
    width: 100%;
}
.entities > li > a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(128, 128, 128, 0.5);
    padding: 2rem;
    border-radius: 2rem;
    font-weight: normal;
    color: black;
    --background-opacity: 0.35;
    background-color: rgba(240, 248, 255, var(--background-opacity));
    text-decoration-line: none;
}
@media screen and (max-width: 999px) {
    .entities > li > a {
        --background-opacity: 0.5;
    }
}
.entities > li > a[data-name=""]::before {
    content: "名前未設定";
    color: rgba(128, 128, 128, 0.5);
}
.entities > li > a::after {
    content: "";
    display: block;
    clear: both;
    width: 0;
    height: 0;
}
.entities > li > a[href]:hover {
    filter: brightness(92%);
    border-color: var(--neutral-theme-color-rgb);
    --background-opacity: 0.65;
}
.entities > li > a > * {
    float: left;
}
.entities > li > a > .name, .entities > li > a[data-name=""]::before {
    display: flex;
    width: 100%;
    height: auto;
    padding: calc(1em + 0.2em + 0.2em) 1em 1em 1em;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    --background-color: rgba(var(--neutral-theme-color-r), var(--neutral-theme-color-g), var(--neutral-theme-color-b), 0.15);
    background: linear-gradient(0, var(--background-color) 0%, var(--background-color) calc(100% - 0.2em), transparent 100%);
    font-size: 120%;
    font-weight: bolder;
    margin-bottom: 1em;
    border-bottom: 0.2em double rgba(128, 128, 128, 0.65);
}
.entities > li > a > .field {
    background-color: rgba(128, 128, 128, 0.17);
    font-size: 80%;
    margin: 0 0.7em 0.8em 0;
    padding: 0.5em 0.7em;
    border: 1px dashed rgba(128, 128, 128, 0.4);
    border-radius: 1em;
}
.entities > li > a > .field > .name {
    font-weight: bolder;
}
.entities > li > a > .field > .value {
    word-break: break-all;
}
.entities > li > a > .time {
    width: 100%;
    clear: left;
    font-size: 80%;
    text-align: right;
    margin-top: 0.5em;
    opacity: 0.8;
}