:root {
    color-scheme: light only;
    --color-primary: #36318f;
    --color-secondary: #ffce00;
}
html { font-size: 1vw; -webkit-text-size-adjust: 100%; }
@media all and (min-width: 500px) {
    html { font-size: 5px; }
}
body { overflow-y: scroll; }
body, input { font-family: 'Cafe24Ssurround', sans-serif; font-size: 3.5rem; color: var(--color-primary); }
img { display: block; width: 100%; height: auto; }

.inner-wrap { position: relative; width: 100%; max-width: 100rem; margin: 0 auto; }

.header { display: flex; justify-content: center; align-items: center; position: sticky; top: 0; width: 100%; height: 10rem; z-index: 100; background-color: var(--color-primary); }
.header .site-title { font-size: 6rem; line-height: 1; color: white; text-align: center; }

.header .search-wrap { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 6rem; background-color: var(--color-primary); }
.header .search-wrap input { width: 100%; height: 100%; border: 0 none; outline: none; text-align: center; color: white; }
.header .search-wrap input::placeholder { color: #fff6; }
.header .search-wrap.on { display: block; }
.header a.btn-search { position: absolute; top: 0; right: 2rem; width: 6rem; height: 6rem; }
.header a.btn-search svg { fill: white; }
.header a.btn-search svg.close { display: none; padding: .5rem; }
.header a.btn-search.close svg { display: none; }
.header a.btn-search.close svg.close { display: block; }


.section .inner-wrap { padding: 2rem; }