.Work{display:grid;gap:3%;grid-template-columns:1fr 1fr;height:100%;margin:0 3%;position:relative}.Work>div{width:fit-content}.Work>div:first-child>section{position:sticky;top:105px}.Work iframe{aspect-ratio:7/5;height:auto;margin-bottom:var(--space-4);width:85%}@media screen and (max-width:550px){.Work{grid-template-columns:1fr}}.Outline{display:grid;grid-template-rows:auto auto 1fr auto;row-gap:var(--space-2)}.Outline p{line-height:1;margin:0}.Outline h2{line-height:1;margin:0}.Outline img{margin:0 auto;max-width:80%}.Outline .Button{border:solid 2px var(--color-enji);background-color:var(--color-kinari);border-radius:2rem;color:var(--color-enji);display:block;padding:.5rem 1rem;text-decoration:none;width:max-content;transition-duration:.5s}.Outline .Button:hover{color:var(--color-kinari);background-color:var(--color-enji)}.Detail{max-width:30em}.Detail h3{font-size:1.1em;margin:0 0 var(--space-2)}.Detail h4{font-size:1em;margin:0 0 var(--space-2)}.Detail p,li,ul{margin:0 0 var(--space-2)}.Detail li:has(+ h3),.Detail p:has(+ h3),.Detail ul:has(+ h3){margin:0 0 var(--space-4)}.Detail li:has(+ h4),.Detail p:has(+ h4),.Detail ul:has(+ h4){margin:0 0 var(--space-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}