/*
    EXAMPLE VIEW

*/



main { width: 100%; }
main article { opacity: 0; }
main article.show { animation: show-up 0.5s ease 1 forwards; }
main button.to-list { margin: 5rem auto 0; display: block; width: var(--width); height: 3rem; font-size: 1rem; font-variation-settings: 'wght' 500; color: var(--color-black); border: 1px solid var(--color-black); }

@keyframes show-up {
    0%      { opacity: 0; transform: translateY(5rem); }
    100%    { opacity: 1; transform: translateY(0); }
}



article.title { margin: 3rem auto; width: var(--width); }
article.title * { width: 100%; text-align: center; }
article.title h2 { justify-content: center; padding: 0; font-size: 1.2rem; font-variation-settings: 'wght' 600; color: var(--clolor-black); }
article.title h3 { margin: 0 auto 0.5rem; font-size: 0.8rem; font-variation-settings: 'wght' 500; color: rgba(255, 83, 22, 1); }


article.inner { margin: 0 auto; width: var(--width); }
article.inner h1 { padding: 0 !important; width: 100%; font-size: 1.2rem; font-variation-settings: 'wght' 700; color: var(--clolor-black); }
article.inner img { display: block; margin: 0 auto 3rem; width: 60vw; height: 60vw; object-fit: cover; border-radius: 1rem; }

article.inner section { padding: 0 0 1rem 1.5rem; width: 100%; font-size: 1rem; font-variation-settings: 'wght' 400; color: var(--clolor-black); line-height: 1.6rem; }
article.inner section::before { position: absolute; left: 0; top: 0; font-variation-settings: 'wght' 500; }
article.inner section.q::before { content: 'Q'; color: var(--color-gray); }
article.inner section.a::before { content: 'A'; color: rgba(255, 83, 22, 1); }
article.inner section strong { color: var(--color-visit); }




/*  PC VERSION  */
@media (min-width: 800px) {
    article.title { width: var(--width); }
    article.inner { width: var(--width); }
    article.inner img { width: 25rem; height: 25vw; }

}