/*
    BBS

*/



main::before { content: ''; display: block; width: 100%; height: 8rem; background-color: transparent; }
/*main::after { display: none; }*/





article.lists { margin: 0 auto; width: var(--width); opacity: 0; animation: start 0.5s ease-out 1 forwards; }
@keyframes start {
    0%      { opacity: 0; transform: translateY(5rem); }
    100%    { opacity: 1; transform: translateY(0); }
}


article.lists a { display: flex; flex-wrap: wrap; align-content: center; width: 100%; height: 4rem; border-bottom: 1px solid var(--color-divide); }
article.lists a h3 { width: 100%; font-size: 1rem; font-variation-settings: 'wght' 600; color: var(--color-black); line-height: 1.5rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
article.lists a h4 { width: 100%; font-size: 0.9rem; font-variation-settings: 'wght' 400; color: var(--color-gray); }




article.inner { margin: 0 auto; width: var(--width); opacity: 0; animation: start 0.5s ease-out 1 forwards; }
@keyframes start {
    0%      { opacity: 0; transform: translateY(5rem); }
    100%    { opacity: 1; transform: translateY(0); }
}


article.inner h3 { width: 100%; height: 2.5rem; font-size: 0.9rem; font-variation-settings: 'wght' 400; color: var(--color-gray); line-height: 2.5rem; border-bottom: 1px solid var(--color-divide); }
article.inner section { padding: 0 0 1rem 0; width: 100%; font-size: 1rem; font-variation-settings: 'wght' 500; color: var(--color-black); line-height: 1.8rem; white-space: pre-line; border-bottom: 1px solid var(--color-divide); }
article.inner button { margin: 2.5rem 0 0 0; padding: 0 2rem; width: max-content; height: 3rem; font-size: 0.9rem; font-variation-settings: 'wght' 400; color: var(--color-gray); border: 1px solid var(--color-gray); }