@font-face {
    font-family: "gerolin"; /*
    src: url("/static/css/fonts/gerolin-regular-webfont.eot");
    src: url("/static/css/fonts/gerolin-regular-webfont.otf");
    src: url("/static/css/fonts/gerolin-regular-webfont.woff"); */
    src: url("/static/css/fonts/gerolin-regular-webfont.woff2");
    format("woff2"); font-display: swap;
}

body {
    font-family: sans, helvetica; margin: 0 1ex 0 1ex;
    background-color: #fff; }

.fomfont {
    font-family: gerolin; font-weight: 400; font-style: normal;
    letter-spacing: 0; }
span.fomfont>sup { padding: 0 0.2ex; }
#fomlogo { font-weight: bold; display: flex; align-items: center; }
#fomlogo a { text-decoration: none; }
#saibotlogo { padding: 0 0.5ex; margin: 0; }
.FOM_Bn { color: rgb(154,  46,  41);  /* brown   #0 */ }
.FOM_Rd { color: rgb(237,  56,  35);  /* red     #1 */ }
.FOM_Or { color: rgb(241,  93,  33);  /* orange  #2 */ }
.FOM_Yl { color: rgb(229, 199,   5);  /* yellow  #3 */ }
.FOM_Gn { color: rgb(  3, 154, 117);  /* green   #4 */ }
.FOM_Bl { color: rgb( 37, 131, 205);  /* blue    #5 */ }
.FOM_Mg { color: rgb(217,  21, 141);  /* magenta #6 */ }
.FOM_Bk { color: rgb( 31,  31,  31);  /* black   #7 */ }
.color_grey { color: rgb(143, 143, 143); }
.saibot_purple { color: rgb(191,141,238);  }

.hbox { }
ul.hbox { list-style-type: none;  float: left; margin: 0; padding: 0; }
ul.hbox li { float: left; }

.vbox { }
ul.vbox { list-style-type: none;  float: none; margin: 0; padding: 0; }
ul.vbox li { float: none; }

.center {
   display: flex;
   width: fit-content; height: 100%;
   margin: 0 auto; align-items: center;
}

.tip { position: relative; display: inline-block; }
.tip .tiptext {
    visibility: hidden; /* width: 12ex; */
    text-align: center; padding: 1ex 0; border-radius: 1ex;
    position: absolute; z-index: 1; }
.tip:hover .tiptext { visibility: visible }