body {
    background-color: #2ef5e4;
    color: #e07116;
}

.contents {
    padding-bottom: 21vh !important;
}

.image-box ul {
    list-style: none;
	display: flex;
	flex-wrap:wrap;
}
.image-box li {
    width: calc(100%/5);
    padding:0 5px;
    box-sizing:border-box;
}
.image-box li img {
    max-width:100%;
    border:solid 1px #ccc; /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}

.image-box li .image-info {
    display: none;
    margin-top: 2px;
    overflow-wrap:anywhere;
    border: solid transparent;
    background-color: #33cc99;
    border-width: 5px;
    font-weight: bold;
}

.image-box li .image-info:after {
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    top: -25px;
    margin-left: 5px;
    border: solid transparent;
    border-bottom-color: #33cc99;
    border-width: 10px;
    pointer-events: none;
    content: " ";
}

.image-box li img:hover+.image-info {
    position:absolute;
    display: block;
}

@media only screen and (max-width: 750px) {
.fileButton { font-size: 2vh; }
}

.image {
    width:200px!important;
    height:200px !important;
}

.imagePopUp {
    display: none !important;
}

#back {
    display: none;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0px;
    top: 0px;
}

.page-moved {
    font-style: oblique;
    color: rgb(185, 125, 125);
    font-family: Times New Roman,
        "ＭＳ Ｐゴシック";
}

.success {
    font-size: small;
    font-style: italic;
    color:green;
}

.notice,.warning,.fail {
    font-size: small;
    color:red;
}