/**!
 * Cascading Style Sheet
 */
@charset "utf-8";

/* header */
header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-basis: 5.5rem;
    -ms-flex-preferred-size: 5.5rem;
    flex-basis: 5.5rem;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    width: 100%;
    height: 5.5rem;
    padding: 0 20px 0 16px;
    background-color: var(--hli-color-background-0, #FFFFFF);
    border-bottom: 1px solid #eceef0;
}
header.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
}


/* main */
main { padding: 1.5rem 1.25rem 8rem; }
main > wrap { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: flex-start }
main .contents { word-break: break-all }
main .contents:not(:first-child) { margin-top: 4.5rem; }
/*
main .contents > div { display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px 8px }
*/


/* footer */
footer { margin-top: 4rem; margin-bottom: 2rem; }
footer .l-footer { color: #989da3; }
footer .l-footer { text-align: center; }
footer .l-footer { width: calc(100% - 10%); margin: 0 auto; }
footer .l-footer h1 { font-size: 1rem; text-align: center; }
footer .l-footer > p { font-size: 0.8rem; }