.BookShelf{align-items:end;display:grid;gap:6rem 3rem;grid-auto-flow:dense;grid-template-columns:repeat(auto-fit,150px);justify-content:center;margin:0 auto}.BookShelf>.SubShelf{display:flex;flex-direction:column;row-gap:1.5rem;grid-column:span 2;grid-row:span 2}.BookShelf .Card{align-items:center;background-color:var(--color-background);border-radius:10px;color:var(--color-character);display:flex;height:max-content;filter:drop-shadow(2px 2px 2px var(--color-navy-op));order:1;transform:translateZ(0);grid-column:span 1;grid-row:span 2;margin:0 auto;overflow:hidden;padding:1rem;text-decoration:none;width:fit-content}.BookShelf .Card:has(> img){align-items:center;aspect-ratio:1.414/1;display:flex;grid-column:span 2;grid-row:span 2;padding:0;width:300px}.BookShelf .Card.Card-Vertical:has(> img){aspect-ratio:1/1.414;height:300px;width:auto}.BookShelf .Card:has(> .twitter-timeline){aspect-ratio:1/1.414;grid-column:-3/span 2;grid-row:3/span 4;padding:0;width:272px}.BookShelf .Card:has(.Checked){order:0}.BookShelf .Card .Checked{background-color:var(--color-enji);color:var(--color-kinari);left:0;padding:.2rem .5rem;position:absolute;bottom:5%;font-weight:400}@media screen and (max-width:550px){.BookShelf{align-items:start;gap:4rem 0;grid-auto-rows:auto;grid-template-columns:1fr;row-gap:5rem}.BookShelf .Card{grid-row:span 1}.BookShelf .Card:has(> img){width:80%}.BookShelf .Card>img{width:100%}.BookShelf .Card:has(> .twitter-timeline){grid-column:span 2;grid-row:span 3}}
*{margin:0;padding:0;line-height:calc(.25rem + 1em + .25rem)}*,::after,::before{box-sizing:border-box}:where(:not(fieldset,progress,meter)){border-width:0;border-style:solid;background-origin:border-box;background-repeat:no-repeat}body,html{height:100%}html{block-size:100%;-webkit-text-size-adjust:none}@media (prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}body{-webkit-font-smoothing:antialiased;text-rendering:optimizeSpeed;min-block-size:100%}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,svg,video){block-size:auto;max-inline-size:100%}:where(svg){stroke:none;fill:currentColor}:where(svg):where(:not([fill])){stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}:where(svg):where(:not([width])){inline-size:5rem}:where(input,button,textarea,select),:where(input[type=file])::-webkit-file-upload-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit}:where(textarea){resize:vertical}@supports (resize:block){:where(textarea){resize:block}}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}h1{font-size:2em}:where(ul,ol){list-style:none}a:not([class]){text-decoration-skip-ink:auto}:where(a[href],area,button,input,label[for],select,summary,textarea,[tabindex]:not([tabindex*="-"])){cursor:pointer;touch-action:manipulation}:where(input[type=file]){cursor:auto}:where(input[type=file])::-webkit-file-upload-button,:where(input[type=file])::file-selector-button{cursor:pointer}@media (prefers-reduced-motion:no-preference){:focus-visible{transition:outline-offset 145ms cubic-bezier(.25, 0, .4, 1)}:where(:not(:active)):focus-visible{transition-duration:.25s}}:where(:not(:active)):focus-visible{outline-offset:5px}:where(button,button[type],input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::-webkit-file-upload-button,:where(input[type=file])::file-selector-button{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;text-align:center}:where(button,button[type],input[type=button],input[type=submit],input[type=reset])[disabled]{cursor:not-allowed}:root{--color-kinari:#fbfaf3;--color-kinari-dark:#eae8dc;--color-enji:#901212;--color-navy:#01052d;--color-navy-op:#01052d51;--color-gray:#292b3d;--color-background:var(--color-kinari);--color-character:var(--color-navy);--color-accent:var(--color-enji)}:root{--space-unit:.5rem;--space-1:calc(var(--space-unit) * 1);--space-2:calc(var(--space-unit) * 3);--space-3:calc(var(--space-unit) * 4);--space-4:calc(var(--space-unit) * 7);--space-5:calc(var(--space-unit) * 11);--space-6:calc(var(--space-unit) * 18)}:root{font-size:.625rem}body{background-color:var(--color-background);color:var(--color-character);font-family:'M PLUS Rounded 1c',sans-serif;font-size:1.6em;height:min-content;position:relative;display:grid;grid-template-columns:100%;grid-template-rows:min-content min-content 1fr}.Main{margin:0 2rem 6rem}.Main h2{text-align:center;margin:0 0 4rem}
@keyframes header-scroll{0%{opacity:1}40%{opacity:.6}100%{opacity:.6}}@keyframes header-scroll-link{0%{transform:scale(1)}40%{transform:scale(.8)}100%{transform:scale(.8)}}.Header{animation:header-scroll linear;animation-timeline:scroll();background-color:var(--color-background);color:var(--color-text);filter:drop-shadow(0 1rem .5rem var(--color-background));margin:0 0 var(--space-2);padding:var(--space-2) 0;position:sticky;text-align:center;top:0;width:100%;z-index:10}.Header>nav{width:100%}.Header>nav>a{display:block;margin:0 auto 0 var(--space-3);overflow:hidden;transition:.3s ease-in-out;width:160px}.Header>nav>a:hover{transform:scale(1.1)}.Header>nav>a>img{width:100%}
.Footer{background-color:var(--color-gray);color:var(--color-kinari-dark);bottom:0;height:min-content;margin:auto 0 0;padding:var(--space-2) var(--space-2) var(--space-2);position:relative;text-align:center}.Footer div:first-child{display:flex;gap:var(--space-2);justify-content:right;margin:0 0 var(--space-1)}.Footer a{color:var(--color-kinari-dark);line-height:0;margin-left:2rem}.Footer a:has(svg){display:block;margin:0;width:min-content}.Footer svg{height:18px;margin:0;max-width:none;width:min-content}.Footer svg path{fill:currentcolor;stroke:currentcolor}