@font-face{font-family:local noto sans jp;src:local("Noto Sans JP")}html{font-family:inter,local noto sans jp,noto sans jp,sans-serif;letter-spacing:-.01em;scroll-behavior:smooth;scroll-padding:calc(var(--font-size-24) + 48px);--color-white:#fff;--color-black:#1E1F24;--color-milk:#F9F9FB;--color-lightgray:#EFF0F3;--color-gray:#8B8D98;--color-lightorange:#FFF5F0;--color-orange:#FF5722;--color-darkorange:#AB3309;--color-lightblue:#E8F3FF;--color-blue:#2196F3;--font-size-8:0.5rem;--font-size-12:0.75rem;--font-size-14:0.875rem;--font-size-16:1rem;--font-size-20:1.25rem;--font-size-24:1.5rem;--font-size-32:2rem;--font-size-40:2.5rem;--font-size-48:3rem;--font-size-64:4rem;--font-weight-light:300;--font-weight-normal:400;--font-weight-bold:500;--font-weight-heavy:700;body{display:flex;flex-direction:column;justify-content:space-between;margin:0;min-height:100dvh;main{padding:calc(32px + var(--font-size-24))16px 0}}}@keyframes arrow-go{from{transform:translate(0,0)}50%{transform:translate(2px,0)}to{transform:translate(0,0)}}@keyframes arrow-pop{from{transform:translate(0,0)rotate(-45deg)}50%{transform:translate(4px,-4px)rotate(-45deg)}to{transform:translate(0,0)rotate(-45deg)}}@keyframes arrow-pop-mini{from{transform:translate(0,0)rotate(-45deg)}50%{transform:translate(2px,-2px)rotate(-45deg)}to{transform:translate(0,0)rotate(-45deg)}}.header{align-items:center;background-color:var(--color-white);display:flex;justify-content:space-between;padding:8px;position:fixed;top:0;width:calc(100% - 16px);z-index:10;.header-logo{letter-spacing:-.01em;a{box-sizing:border-box;color:var(--color-black);display:block;font-size:var(--font-size-20);font-weight:var(--font-weight-bold);line-height:var(--font-size-24);margin:8px;text-decoration:none}}.header-menu{display:flex;font-size:var(--font-size-16);font-weight:var(--font-weight-normal);gap:8px;list-style:none;margin:0;padding:0;a{border-radius:8px;color:var(--color-black);padding:8px;text-decoration:none}a:hover{color:var(--color-orange)}} #header-humberger-btn { background-color: transparent; border : none; display : none; padding : 0; z-index : 4; svg { width: 32px; } } #header-humberger-menu-wrapper { display: none; } .header-humberger-bg { backdrop-filter : blur(0); background-color: rgba(0, 0, 0, 0); height : 100vh; left : 0; bottom : 0; transform : translateY(-100%); transition : backdrop-filter .5s, background-color .5s, transform 0s .5s; position : fixed; width : 100vw; z-index : 1; }}@media(width<500px){.header::before{background-color:var(--color-white);content:"";display:block;height:100%;left:0;position:absolute;width:100%;z-index:3}.header{.header-logo{z-index:4}.header-menu-wrapper{display:none} #header-humberger-btn { cursor : pointer; display : block; transition: .25s; } #header-humberger-menu-wrapper { background-color: var(--color-white); display : block; height : fit-content; left : 0; padding : 16px 0; position : absolute; top : 100%; transform : translateY(-100%); transition : .5s; width : 100%; z-index : 2; } .header-humberger-menu { display : flex; font-size : var(--font-size-24); font-weight : var(--font-weight-normal); gap : 16px; list-style : none; margin : 0; padding : 0; flex-direction: column; li { opacity : 0; transition: .25s; a { align-items : center; box-sizing : border-box; color : var(--color-black); cursor : pointer; display : flex; height : 100%; justify-content: space-between; text-decoration: none; transition : .1s; padding : 8px 16px; width : 100%; svg { margin-right: -4px; transition : .1s; width : 20px; } } } } #header-humberger-btn.on { transform : rotate(45deg); transition: .25s; } #header-humberger-menu-wrapper.on { bottom : 0; transform : translateY(0%); transition: .5s; li:nth-of-type(1) { opacity : 100; transition: opacity 1s .3s; } li:nth-of-type(2) { opacity : 100; transition: opacity 1s .38s; } li:nth-of-type(3) { opacity : 100; transition: opacity 1s .46s; } li:nth-of-type(4) { opacity : 100; transition: opacity 1s .54s; } } #header-humberger-menu-wrapper.on+.header-humberger-bg { backdrop-filter : blur(8px); background-color: rgba(0, 0, 0, 0.16); left : 0; top : 0; transform : translateY(0%); transition : background-color .5s .1s, backdrop-filter .5s .1s; }}}body.on{overflow:hidden}.footer{align-items:center;bottom:0;display:flex;gap:32px;justify-content:space-between;letter-spacing:-.01em;margin-top:128px;padding:16px;.footer-copyright{color:var(--color-black);font-weight:var(--font-weight-normal);font-size:var(--font-size-20)}.footer-back_to_top{aspect-ratio:1/1;align-items:center;border:solid 1px var(--color-black);border-radius:100%;display:flex;height:48px;justify-content:center;transition:.1s;width:48px;svg{fill:var(--color-black);height:24px;rotate:-90deg;transition:.1s;width:24px}}.footer-back_to_top:hover{background-color:var(--color-orange);border:solid 1px var(--color-orange);transition:.1s;svg{fill:var(--color-white);transition:.1s}}}.home-view_more{display:flex;justify-content:center;padding:32px 0 128px;a{border:solid 1px var(--color-gray);border-radius:100px;color:var(--color-black);font-size:var(--font-size-16);font-weight:var(--font-weight-normal);padding:16px 32px;text-decoration:none;transition:.1s}a:hover{background-color:var(--color-orange);border:solid 1px var(--color-orange);color:var(--color-white);transition:.1s}}.home-hero-wrapper{align-items:center;display:flex;padding:96px 0;.home-hero-container{margin-left:4px;width:calc(60% - 4px);h1{color:var(--color-black);font-size:var(--font-size-40);font-weight:var(--font-weight-bold);margin:0 0 32px}p{color:var(--color-gray);font-size:var(--font-size-16);font-weight:var(--font-weight-normal);margin:0 0 32px}a{align-items:center;color:var(--color-orange);display:flex;font-size:var(--font-size-16);font-weight:var(--font-weight-normal);gap:4px;text-decoration:none;width:fit-content;svg{grid-area:icon;transition:.1s;width:var(--font-size-16);path{fill:var(--color-orange)}}}a:hover{text-decoration:underline;svg{animation-duration:.25s;animation-name:arrow-go}}}}.home-works h2{color:var(--color-black);font-size:var(--font-size-32);font-weight:var(--font-weight-bold);margin:0 0 32px 4px}.home-news_and_blog-wrapper{display:flex;gap:16px;.home-list{width:calc(50% - 8px);h2{color:var(--color-black);font-size:var(--font-size-32);font-weight:var(--font-weight-bold);margin:0 0 32px 4px}.home-list-item{align-items:center;border-bottom:solid 1px var(--color-gray);display:grid;gap:8px 16px;grid-template-columns:auto 1fr auto;grid-template-areas:"title title title" "date _3 category" "summary summary summary";padding:16px 8px;position:relative;.home-list-item-a{inset:0;position:absolute;z-index:1}h3{color:var(--color-black);display:-webkit-box;font-size:var(--font-size-20);font-weight:var(--font-weight-normal);grid-area:title;line-height:var(--font-size-32);margin:0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:1}}.home-list-item-category{display:flex;gap:8px;grid-area:category;margin:4px 0;z-index:2;a{display:block}}time{color:var(--color-gray);font-size:var(--font-size-14);font-weight:var(--font-weight-light);grid-area:date;margin:0}.home-list-item-summary{color:var(--color-black);font-size:var(--font-size-14);font-weight:var(--font-weight-normal);grid-area:summary;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.home-list-item:first-of-type{border-top:solid 1px var(--color-gray)}}@media(width < 800px){.home-hero-wrapper{.home-hero-container{width:calc(80% - 4px)}}.home-news_and_blog-wrapper{flex-direction:column;.home-list{width:calc(100% - 8px)}}}.works{margin-top:48px;h1{color:var(--color-black);font-size:var(--font-size-40);font-weight:var(--font-weight-bold);margin:0 0 32px 4px}}.works-card-area{display:grid;gap:32px 16px;grid-template-columns:repeat(2,calc(50% - 8px));.works-card{border-bottom:solid .5px var(--color-gray);display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"thumbnail thumbnail thumbnail" "title _1 _2" "date _3 category";padding:0 0 16px;position:relative;z-index:1;.works-card-a{inset:0;position:absolute}picture{grid-area:thumbnail;width:100%;img{border-radius:8px;margin-bottom:16px;object-fit:cover;width:100%}}h3{color:var(--color-black);display:-webkit-box;font-size:var(--font-size-20);font-weight:var(--font-weight-normal);grid-area:title;margin:0 0 0 4px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}.works-card-category{display:flex;gap:8px;grid-area:category;margin:8px 4px 0 0;place-content:center;z-index:2}time{color:var(--color-gray);font-size:var(--font-size-14);font-weight:var(--font-weight-light);grid-area:date;margin:12px 0 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}}@media(width < 800px){.works-card-area{grid-template-columns:1fr}}.list{margin-top:48px;h1{color:var(--color-black);font-size:var(--font-size-40);font-weight:var(--font-weight-bold);margin:0 0 32px 4px;a{color:var(--color-black);text-decoration:none}}.tag-wrapper{list-style:none;margin:0 4px;padding:0;.tag, span{color:var(--color-black);font-size:var(--font-size-32);text-decoration:none}.tag:hover{text-decoration:underline}span{margin:0 8px}}.list-article{border-bottom:solid 1px var(--color-gray);display:grid;gap:8px 16px;grid-template-columns:128px 1fr auto;grid-template-areas:"date title category" "date summary category";padding:16px 8px;position:relative;.list-article-a{inset:0;position:absolute;z-index:1}time{color:var(--color-gray);font-size:var(--font-size-14);font-weight:var(--font-weight-light);grid-area:date;margin:0;place-content:center}h3{color:var(--color-black);display:-webkit-box;font-size:var(--font-size-20);font-weight:var(--font-weight-normal);grid-area:title;line-height:var(--font-size-32);margin:0;overflow:hidden;place-content:end;-webkit-box-orient:vertical;-webkit-line-clamp:2}.list-article-summary{color:var(--color-black);font-size:var(--font-size-14);font-weight:var(--font-weight-normal);grid-area:summary;line-height:21px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-article-category{align-items:center;display:flex;gap:8px;grid-area:category;margin:0;place-content:center;text-align:right;z-index:2}}.list-article:first-of-type{border-top:solid 1px var(--color-gray)}@media(width < 800px){.list-article{grid-template-columns:1fr auto;grid-template-areas:"title title" "date category" "summary summary"}}}.link{h2{color:var(--color-black);font-size:var(--font-size-32);font-weight:var(--font-weight-bold);margin:0 0 32px 4px}.link-card-wrapper{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}@media(500px<=width<900px){.link-card-wrapper{grid-template-columns:repeat(2,1fr)}}@media(width<500px){.link-card-wrapper{grid-template-columns:1fr}}.link-card{outline:solid 1px var(--color-gray);border-radius:8px;box-sizing:border-box;display:grid;grid-template-columns:auto;grid-template-rows:auto;grid-template-areas:"name _1" "info _2" "_3 icon";justify-content:space-between;padding:12px;text-decoration:none;transition:.1s;width:100%;h3{color:var(--color-black);font-size:var(--font-size-20);font-weight:var(--font-weight-normal);grid-area:name;margin:0}span{color:var(--color-gray);font-size:var(--font-size-14);font-weight:var(--font-weight-light);grid-area:info;margin:4px 0 24px}svg{text-align:right;grid-area:icon;transform:rotate(-45deg);transition:.1s;width:24px}}.link-card:hover{background-color:var(--color-lightorange);outline:solid 1.5px var(--color-orange);transition:.1s;svg{animation-duration:.25s;animation-name:arrow-pop;fill:var(--color-orange);transition:.1s}}}.article-category-item{border:solid 1px var(--color-gray);border-radius:100px;color:var(--color-black);display:block;font-size:var(--font-size-12);font-weight:var(--font-weight-normal);height:fit-content;padding:4px 8px;text-decoration:none;transition:.1s}.article-category-item:hover{background-color:var(--color-milk);border-color:var(--color-black);transition:.1s}.article-share{align-items:center;display:flex;gap:32px;line-height:var(--font-size-16);margin:64px 0 0;a{cursor:pointer;display:flex;gap:4px;text-decoration:none;span{color:var(--color-black);span:last-of-type{font-size:var(--font-size-20);text-decoration:none}}span:hover{text-decoration:underline}svg{transform:rotate(-45deg);width:var(--font-size-16)}}a:hover{svg{animation-duration:.25s;animation-name:arrow-pop-mini}}button{background-color:initial;border:none;cursor:pointer;font-size:var(--font-size-16);padding:0}button:hover{text-decoration:underline}}@keyframes arrow-pop-mini{from{transform:translate(0,0)rotate(-45deg)}50%{transform:translate(2px,-2px)rotate(-45deg)}to{transform:translate(0,0)rotate(-45deg)}}.filter-wrapper{display:flex;gap:16px;margin-bottom:48px;position:relative;flex-shrink:1;overflow:scroll;.filter{border:solid 1px var(--color-gray);border-radius:100px;color:var(--color-black);flex-shrink:0;font-size:var(--font-size-14);font-weight:var(--font-weight-normal);padding:8px 16px;text-decoration:none}@media(width<800px){.filter:not(:first-child){display:none}}.filter.select{background-color:var(--color-orange);border:solid 1px var(--color-orange);color:var(--color-white);transition:.1s}.filter:hover:not(.select){border:solid 1px var(--color-orange);background-color:var(--color-lightorange);color:var(--color-orange);transition:.1s}.separator{background-color:var(--color-gray);flex-shrink:0;width:1px}.select-container{display:none;position:relative;select{appearance:none;background-color:initial;border:solid 1px var(--color-gray);border-radius:100px;color:var(--color-black);flex-shrink:0;font-size:var(--font-size-14);font-weight:var(--font-weight-normal);padding:8px 32px 8px 16px;transition:.1s;width:fit-content;-webkit-appearance:none}select:hover{border:solid 1px var(--color-gray);transition:.1s}svg{position:absolute;right:8px;top:50%;transform:translateY(-50%);height:var(--font-size-16);pointer-events:none;path{fill:var(--color-black);transition:.1s}}}.select-container:hover{select{border:solid 1px var(--color-orange);background-color:var(--color-lightorange);color:var(--color-orange);transition:.1s}path{fill:var(--color-orange);transition:.1s}}@media(width < 800px){.filter:first-child:not(.select)~.select-container{select{border:solid 1px var(--color-orange);background-color:var(--color-lightorange);color:var(--color-orange);transition:.1s}path{fill:var(--color-orange)}}.select-container{display:block}}}.works-article-wrapper{box-sizing:border-box;display:grid;gap:16px;grid-template-columns:max(25%,240px)calc(100% - max(25%,240px) - 16px);width:100%}.works-article-info-wrapper{box-sizing:border-box;display:flex;flex-direction:column;height:calc(100vh - calc(var(--font-size-24) + 32px));padding:0 4px calc(64px + var(--font-size-16));position:sticky;top:calc(var(--font-size-24) + 32px);width:100%;h1{color:var(--color-black);font-size:var(--font-size-24);font-weight:var(--font-weight-bold);margin:32px 0 0}h1+div{align-items:center;display:flex;justify-content:space-between;margin:32px 0 0;width:100%}time{color:var(--color-gray);font-size:var(--font-size-16);font-weight:var(--font-weight-light)}.works-article-info-category{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-left:16px}.works-article-info-list{margin:32px 0;width:100%;div{border-bottom:solid 1px var(--color-gray);box-sizing:border-box;display:flex;justify-content:space-between;padding:16px 4px;width:100%;span{font-size:var(--font-size-16);font-weight:var(--font-weight-normal);a{color:var(--color-orange);line-height:16px}a:visited{color:var(--color-darkorange)}}span:first-of-type{color:var(--color-gray);margin-right:8px}span:last-of-type{text-align:right}}div:first-of-type{border-top:solid 1px var(--color-gray)}}.works-article-info-note{height:100%;overflow:scroll;overscroll-behavior:none;position:relative;p{font-size:var(--font-size-14);font-weight:var(--font-weight-normal);line-height:2;margin:0;text-align:justify}}.article-share{bottom:32px;position:absolute}}.works-article-gallery-wrapper{display:flex;flex-direction:column;gap:16px;picture{margin:0;img{border-radius:8px;width:100%}}object{aspect-ratio:4/3;display:block;margin:0}}@media(width < 800px){.works-article-wrapper{grid-template-columns:1fr;padding:0 4px}.works-article-info-wrapper{height:fit-content;padding-bottom:32px;position:static;.article-share{position:static}}.works-article-info-note{margin-bottom:32px;height:fit-content}}.article-wrapper{display:flex;gap:64px;justify-content:center;width:100%}.article-main_text-wrapper{margin:0 0 0 16px;max-width:800px;min-width:0;text-align:justify;width:100%;.article-info{align-items:center;display:flex;justify-content:space-between;margin:32px 0;time{color:var(--color-gray);font-weight:var(--font-weight-light)}a, a:visited{color:var(--color-black)}}.article-category-area{display:flex;gap:8px}.article-tag-area{display:flex;gap:16px;margin:32px 0 32px 2px;padding:0;li{list-style:none;a{color:var(--color-black);font-size:var(--font-size-14);text-decoration:none}a:hover{text-decoration:underline}}}h1{color:var(--color-black);font-size:var(--font-size-32);font-weight:var(--font-weight-bold);margin:48px 0 32px}h2{color:var(--color-black);font-size:var(--font-size-24);font-weight:var(--font-weight-bold);margin:48px 0 24px}h3{color:var(--color-black);font-size:var(--font-size-20);font-weight:var(--font-weight-normal);margin:24px 0 0}p{font-size:var(--font-size-16);line-height:var(--font-size-32);margin:16px 0}a{color:var(--color-orange)}a:visited{color:var(--color-darkorange)}ul{margin:16px 0;padding:0 32px;ul{margin:0}li{line-height:var(--font-size-32)}}ol{margin:16px 0;padding:0 32px}code:not(:has(span)){background-color:var(--color-lightgray);border-radius:4px;padding:2px 4px}.highlight{margin:24px 0;pre{border-radius:8px;box-sizing:border-box;overflow:hidden;padding:24px;width:100%;code{display:block;overflow:scroll}}}.bloglink{align-items:center;background-color:var(--color-white);border-radius:8px;border:solid 1px var(--color-gray);container-type:inline-size;display:flex;gap:0;height:calc(4.5rem + 56px);justify-content:space-between;margin:24px 0;position:relative;transition:.1s;z-index:1;.bloglink-a{inset:0;position:absolute;z-index:2}.bloglink-group{margin:16px;overflow:hidden;.bloglink-title{color:var(--color-black);display:-webkit-box;font-size:var(--font-size-18);font-weight:var(--font-weight-bold);grid-area:title;line-height:var(--font-size-20);margin-bottom:16px;overflow:hidden;text-align:left;-webkit-box-orient:vertical;-webkit-line-clamp:2}.bloglink-description{color:var(--color-gray);font-size:var(--font-size-14);font-weight:var(--font-weight-normal);grid-area:description;line-height:var(--font-size-16);margin-bottom:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bloglink-url{align-items:center;display:flex;font-size:var(--font-size-14);gap:8px;grid-area:url;line-height:var(--font-size-16);overflow:hidden;img{aspect-ratio:1/1;height:16px;width:16px}span{color:var(--color-black);font-size:var(--font-size-14);font-weight:var(--font-weight-normal);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}}.bloglink-img{border-radius:0 7px 7px 0;display:flex;flex-shrink:0;justify-content:center;overflow:hidden;img{display:block;height:calc(4.5rem + 56px)}}@container(width < 600px){.bloglink-img {
        flex-shrink: 0.75;
        min-width  : calc(4.5rem + 56px);
      }
    }}.bloglink:hover{background-color:var(--color-milk);transition:.1s}blockquote{border-left:solid 4px var(--color-gray);margin:16px 0 16px 2px;padding:0 0 0 16px;p{color:var(--color-black);margin:16px 0}}.callout-attention{align-items:center;background-color:var(--color-lightorange);border-radius:8px;margin:24px 0;padding:16px;div{align-items:center;color:var(--color-orange);display:flex;font-weight:var(--font-weight-bold);gap:8px;margin-bottom:8px;svg{fill:var(--color-orange)}}p{margin:0}}.callout-info{align-items:center;background-color:var(--color-lightblue);border-radius:8px;margin:24px 0;padding:16px;div{align-items:center;color:var(--color-blue);display:flex;font-weight:var(--font-weight-bold);gap:8px;margin-bottom:8px;svg{fill:var(--color-blue)}}p{margin:0}}picture{display:block;margin:24px 0;img{border-radius:8px;width:100%}}object{aspect-ratio:4/3;display:block;margin:24px 0}table{border:solid 1px var(--color-gray);border-collapse:separate;border-radius:8px;border-spacing:0;margin:24px 0;thead{background-color:var(--color-lightgray);font-weight:var(--font-weight-bold);text-align:center}td, th{padding:8px 16px;border-bottom:solid 1px var(--color-gray);border-right:solid 1px var(--color-gray)}th:last-child, td:last-child{border-right:none}tr:last-child td{border-bottom:none}}div:has(>iframe){margin:24px 0}}_::-webkit-full-page-media,_:future,:root .highlight pre code *{height:16px}.article-outline{flex-shrink:0;height:fit-content;margin:0 16px 0 0;position:sticky;top:calc(var(--font-size-24) + 80px);width:200px;h2{color:var(--color-black);font-weight:var(--font-weight-bold);margin:0 0 16px}ul{padding:0;li{list-style:none;padding:4px 16px;a{color:var(--color-gray);font-size:var(--font-size-16);line-height:var(--font-size-16);text-decoration:none;transition:.1s}a:hover{color:var(--color-black);transition:.1s}}li.on{background-color:var(--color-lightgray)}li.top{border-radius:4px 4px 0 0;a{color:var(--color-black);font-weight:var(--font-weight-bold)}}li.bottom{border-radius:0 0 4px 4px}li.top.bottom{border-radius:4px}}}.article-outline-details{display:none;margin:0 0 16px;summary{font-size:var(--font-size-20);font-weight:var(--font-weight-bold)}ul{padding:0 24px;li{list-style:none;a{color:var(--color-black);text-decoration:none}a:hover{text-decoration:underline}a:visited{color:var(--color-black)}}}}@media(width < 1000px){.article-main_text-wrapper{margin:0 16px}.article-outline{display:none}.article-outline-details{display:inline}}@media(width < 500px){.article-main_text-wrapper{margin:0 4px}}.about{margin-top:48px;h1{color:var(--color-black);font-size:var(--font-size-40);font-weight:var(--font-weight-bold);margin:0 0 32px 4px}h2{color:var(--color-black);font-size:var(--font-size-32);font-weight:var(--font-weight-bold);margin:0 0 32px 4px}p{color:var(--color-black);font-size:var(--font-size-16);font-weight:var(--font-weight-normal);line-height:2;margin:0 0 0 4px;width:100%}.about-hero{align-items:center;background-color:var(--color-lightgray);border-radius:8px;display:flex;height:calc((100vw - 32px)*4/3);justify-content:center;margin-bottom:64px;max-height:75vh;width:100%;img{height:55%;max-width:80%}}@media(width<500px){.about-hero{border-radius:0;height:(100vw * 4/3);margin:0 0 64px -16px;width:100vw}}.my-data{margin-bottom:64px;div{display:flex;gap:32px}}@media(width<900px){div{flex-direction:column}}.studying{margin-bottom:64px}.studying-kanban-wrapper{display:grid;gap:16px;grid-template-columns:repeat(4,1fr);margin-bottom:32px}@media(500px<=width<900px){.studying-kanban-wrapper{grid-template-columns:repeat(2,1fr)}}@media(width<500px){.studying-kanban-wrapper{grid-template-columns:1fr}}.studying-kanban-container{display:flex;flex-direction:column;gap:16px;h3{color:var(--color-black);font-size:var(--font-size-24);font-weight:var(--font-weight-bold);margin:0 0 8px 4px;padding-top:16px}.studying-kanban-box{background-color:var(--color-lightorange);border-radius:8px;display:grid;gap:8px 0;grid-template-columns:auto 1fr auto;grid-template-areas:"logo _1 since" "title title title" "summary summary summary";padding:16px;img{grid-area:logo;height:24px}time{color:var(--color-gray);font-size:var(--font-size-14);font-weight:var(--font-weight-light);grid-area:since}h4{color:var(--color-black);font-size:var(--font-size-20);font-weight:var(--font-weight-normal);grid-area:title;margin:8px 0}span{color:var(--color-black);font-size:var(--font-size-14);font-weight:var(--font-weight-normal);grid-area:summary}}}.studying-last_update{color:var(--color-gray);font-size:var(--font-size-16);font-weight:var(--font-weight-light);margin:0 0 0 4px}.studying-copyright{color:var(--color-gray);font-size:var(--font-size-12);font-weight:var(--font-weight-light);margin:16px 0 0 4px}.favorites{margin-bottom:64px;.favorites-box-wrapper{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));margin:0 0 32px;width:100%}iframe{aspect-ratio:4/3;border-radius:8px;height:100%;width:100%}.favorites-box{position:relative;picture source, picture img{aspect-ratio:4/3;border-radius:8px;object-fit:cover;height:100%;width:100%}svg{fill:var(--color-black);height:24px;transition:.1s;width:24px}.favorites-box-btn{background-color:var(--color-white);bottom:10px;border:none;border-radius:100px;cursor:pointer;display:grid;height:40px;right:10px;padding:0;place-content:center;position:absolute;transition:.1s;width:40px;z-index:3}.favorites-box-btn:hover{background-color:var(--color-orange);transition:all .1s,transform .25s;svg{fill:var(--color-white);transition:.1s}}.favorites-box-btn.on{background-color:var(--color-orange);transition:.25s;transform:rotate(45deg);svg{fill:var(--color-white)}}.favorites-box-discription{backdrop-filter:blur(0);border-radius:8px;box-sizing:border-box;height:100%;left:0;top:0;opacity:0;overflow:scroll;padding:40px;position:absolute;transition:.25s;width:100%;z-index:2;h3{color:var(--color-white);font-weight:var(--font-weight-bold);margin:0 0 16px}p{color:var(--color-white);font-weight:var(--font-weight-normal);margin:0}a{color:var(--color-white)}}.favorites-box-btn.on+.favorites-box-discription{backdrop-filter:blur(16px);opacity:100;transition:.25s}}.favorites-last_update{color:var(--color-gray);font-size:var(--font-size-16);font-weight:var(--font-weight-light);margin:0 0 0 4px}}}.not_found{h1{font-size:var(--font-size-64);font-weight:var(--font-weight-bold);margin:48px 0 0}}