guide { position: relative; display: inline-block; width: auto; min-width: 14px; height: auto; min-height: 14px; cursor: pointer; background: url(guide_icon.svg); background-repeat: no-repeat; background-size: contain; margin: 0 6px; color: var(--link-color); } guide:hover .guide_contence { display: inline-block; } guide ul { list-style-type: disc; padding-left: 20px; } guide ol { list-style-type: decimal; padding-left: 20px; } .guide_contence { border-top: 7px; position: absolute; border: 1px solid var(--border-line-color); border-radius: 5px; top: 100%; width: max-content; min-width: 18em; max-width: max(25vw, 100%); min-height: 15em; padding: 10px; background-color: var(--drop-bg-color); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); font-size: 10pt; text-align: left; display: none; margin: 0.3em; margin: -1px 0px; box-shadow: 0px 3px 13px 0px var(--shadow-color); color: var(--main-color); z-index: 200; } .guide_contence:after { content: "\00a0"; width: 0; height: 0; display: block; border-style: solid; border-width: 10px; border-color: transparent transparent var(--drop-bg-color) transparent; position: absolute; top: -20px; } .guide_contence h1 { font-size: 1.5em; font-weight: 700; } .guide_contence h2 { font-size: 1.3em; font-weight: 700; } .guide_contence h3 { font-size: 1.1em; font-weight: 700; } .guide_contence h4 { font-size: 1em; font-weight: 700; } .guide_contence li { white-space: normal; word-break: normal; } .guide_contence pre { background-color: rgba(0, 0, 0, 0.1); } .guide_contence code { word-break: normal; font-family: arial; }