@charset "UTF-8";*,:before,:after{margin:0;padding:0;box-sizing:border-box}*{margin:0}@media (prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}:where([hidden]:not([hidden=until-found])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light;tab-size:2;scrollbar-gutter:stable;interpolate-size:allow-keywords;line-height:1.5}:where(html:has(dialog:modal[open])){overflow:clip}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:inherit;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(button){all:unset}:where(input,button,textarea,select){font:inherit;color:inherit;letter-spacing:inherit;word-spacing:inherit;font-feature-settings:inherit;font-variation-settings:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role=button],[role=option],[role=link]){cursor:pointer}:where(:disabled,label:has(>:disabled,+disabled)){cursor:not-allowed}:where(a){color:inherit;text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg,video){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + .5rem);text-wrap:balance}:where(hr){border:0;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(dialog,[popover]){border:0;background:0 0;color:inherit;inset:unset;max-width:unset;max-height:unset;overflow:unset}:where(dialog:not([open],[popover]),[popover]:not(:popover-open)){display:none!important}:where(:focus-visible){outline:3px solid CanvasText;box-shadow:0 0 0 5px Canvas;outline-offset:1px}:where(:focus-visible,:target){scroll-margin-block:8vh}:where(.visually-hidden:not(:focus-within,:active)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important;user-select:none!important}:root{--design-color:#ff4431;--design-dark-color:hsl(6, 100%, 30%);--coding-color:#2291ff;--coding-dark-color:hsl(210, 100%, 30%);--bg-color:#f4f4f4;--bg-dark-color:#eaeaea;--base-color:#333;--black:#000;--gray:#a8a8a8;--border-color:#D3D3D3;--line-height:1.8;--leading-trim:calc((1em - 1lh)/2);--line-space:(var(--line-height) - 1)/2;--is-support-lh:initial;--is-support-not-lh:"";--base-font-family:"Noto Sans JP", sans-serif;--en-font-family:"Sen", sans-serif;--frame-width:1366;--frame-width-px:calc(var(--frame-width) * 1px);--outer-width:1240;--outer-width-px:calc(var(--outer-width) * 1px);--inner-width:1176;--inner-width-px:calc(var(--inner-width) * 1px);--inner-padding:32px;--outer-padding:63px;--vw:1vw;--vh:1vh;--slope-1px:clamp(0px, -.95663px + .2551vw, 1px);--header-height:60px;--ovall-radius:calc(1px / 0)}@media screen and (max-width:767px){:root{--outer-padding:24px;--inner-padding:16px}}:root{--button-animation:cubic-bezier(.455, .03, .515, .955)}:root{--logo:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path fill-rule="evenodd" d="M44.9,76.9h-21.4c-8.8,0-16-7.2-16-16v-1.7c0-8.8,7.2-16,16-16h17.4c2.5,0,4.9-.6,7.1-1.7l41.3-20.4c10.6-5.2,23.1,2.5,23.1,14.3v.8c0,6.2-3.5,11.8-9.1,14.4l-51.5,24.6c-2.1,1-4.5,1.6-6.9,1.6h0ZM96.6,67.2l5.8,2.4c6,2.4,10,8.3,10,14.8h0c0,11.9-12.5,19.6-23.1,14.3l-34.6-17.3v-.2l29.1-13.7c4-1.9,8.6-2,12.8-.4h0Z"></path></svg>')}:root{--icon-arrow:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path fill='currentColor' fill-rule='evenodd' d='M6.61336 18.9111C6.37887 18.6766 6.24714 18.3585 6.24714 18.0268C6.24714 17.6951 6.37887 17.3771 6.61336 17.1425L12.8048 10.951L6.61336 4.75959C6.38552 4.52368 6.25944 4.20773 6.26229 3.87977C6.26514 3.55182 6.39669 3.2381 6.6286 3.00619C6.8605 2.77429 7.17422 2.64274 7.50218 2.63989C7.83013 2.63704 8.14609 2.76312 8.38199 2.99096L15.4578 10.0667C15.6922 10.3013 15.824 10.6194 15.824 10.951C15.824 11.2827 15.6922 11.6008 15.4578 11.8354L8.38199 18.9111C8.14743 19.1456 7.82934 19.2773 7.49767 19.2773C7.16601 19.2773 6.84792 19.1456 6.61336 18.9111Z'/></svg>")}*,:before,:after{box-sizing:border-box}html{font-size:62.5%;height:100%;margin:0;padding:0;scroll-behavior:smooth;background:var(--bg-color);touch-action:manipulation;scroll-margin-block-start:var(--header-height)}body{font-family:var(--base-font-family);font-size:1.4rem;font-weight:400;line-height:var(--line-height);letter-spacing:.03em;width:100%;height:100%;color:var(--base-color);margin:0;padding:0;-webkit-text-size-adjust:100%;font-feature-settings:"palt"}img{display:block;max-width:100%}svg{width:100%;display:block}svg text:not([fill]){fill:currentColor}svg circle:not([fill]){fill:currentColor}a{color:currentColor;text-decoration:underline}a:hover,a.js-tel{text-decoration:none}a.js-tel._active{text-decoration:underline}a.js-tel._inactive{color:currentColor}a:focus-visible{border-color:#666;outline:0;box-shadow:0 0 0 .2em #6464ff4d;border-radius:6px}button{cursor:pointer}button:focus-visible{border-color:#666;outline:0;box-shadow:0 0 0 .2em #6464ff4d;border-radius:6px}sup{vertical-align:super;font-size:70%}sub{vertical-align:sub;font-size:70%}:where(._en){font-family:var(--en-font-family);line-height:.8}@media (any-hover:hover){.u-line-link{background-image:linear-gradient(90deg,currentColor,currentColor 50%,transparent 0,transparent);background-position:0 100%;background-repeat:repeat-x;background-size:200% 1px;border:0;overflow:hidden;position:relative}.is-line .u-line-link{animation-duration:.3s;animation-fill-mode:forwards;animation-name:lineanim_out;background-position:-100% 100%;background-size:200%0}.is-line:any-link:hover .u-line-link{animation-duration:.3s;animation-fill-mode:forwards;animation-name:lineanim_in}}@keyframes lineanim_in{0%{background-position:100% 100%;background-size:200% 1px}to{background-position:0 100%;background-size:200% 1px}}@keyframes lineanim_out{0%{background-position:0 100%;background-size:200% 1px}99.9%{background-position:-100% 100%;background-size:200% 1px}to{background-size:200%0}}:where([data-intersection]){transition:opacity 1s,transform .8s;--intersection-y:30px;--intersection-x:0;--intersection-opacity:0}[data-intersection]{opacity:var(--intersection-opacity);transform:translate(var(--intersection-x)) translateY(var(--intersection-y))}:where([data-intersection][data-intersecting=true]){--intersection-y:0;--intersection-x:0;--intersection-opacity:1}.l-wrapper{display:flex;flex-direction:column;width:100%;min-height:100%;position:relative;margin-inline:auto;transition:opacity .4s ease-out}body.is-loaded .l-wrapper{opacity:1}@media screen and (max-width:767px){.l-wrapper{min-width:0}}.l-header{top:0;left:0;right:0;display:flex;justify-content:space-between;position:fixed;align-items:center;width:100%;height:var(--header-height);padding-block:1em;z-index:1000;padding-inline:1.5em;margin-inline:auto}@media screen and (max-width:767px){.l-header{padding-inline:.5em 1em;padding-block:1em}}.l-header__menu{display:flex;justify-content:flex-end;width:100%;gap:1em}.l-header__menu a{text-transform:uppercase;font-family:var(--en-font-family);text-decoration:none;font-weight:700}.l-header__logo{display:flex;align-items:center;justify-content:center;gap:.5em;transition:opacity .3s;flex-shrink:0;text-decoration:none;font-family:var(--en-font-family);font-weight:700}.l-header__logo img{width:36px;height:36px;display:flex;align-items:center;justify-content:center}.l-header__logo:hover{opacity:.7}.l-footer{width:100%;padding-block:calc(30px + var(--slope-1px)*10);padding-inline:var(--inner-padding);text-align:center}.l-footer__info{color:var(--gray);font-size:12px}.l-main{padding-inline:var(--outer-padding);margin-inline:auto;width:100%}.l-main-page{display:flex}.l-main__head{display:flex;justify-content:center;flex-direction:column;flex:1}body[data-category=design] .l-main__head{--_active-color:var(--design-main-color)}body[data-category=coding] .l-main__head{--_active-color:var(--coding-main-color)}.c-work-nav{display:flex;justify-content:flex-end;width:100%;margin-inline:auto;align-items:center}@media screen and (max-width:767px){.c-work-nav{flex-direction:column;gap:1em;align-items:flex-start}}.c-work-nav__sorts{display:flex;gap:1em;align-items:baseline}.c-work-nav .c-work-count{display:flex;align-items:baseline;gap:.25em;font-family:var(--en-font-family);line-height:1;color:var(--gray);margin-right:auto;font-size:calc(14px + var(--slope-1px)*2)}.c-work-nav .c-work-count ._num{color:var(--base-color)}.c-work-nav__button{display:flex;gap:.5em;align-self:stretch}@media screen and (max-width:767px){.c-work-nav__button{width:100%}}.c-work-nav__button button{display:flex;align-items:center;justify-content:center;font-weight:700;text-decoration:none;padding:.75em 2.25em;transition:color .3s var(--button-animation),background .3s var(--button-animation);line-height:1;border-radius:var(--ovall-radius);position:relative;height:100%;border:1px solid var(--base-color);font-size:1.4rem;--_active-color:var(--base-color);background:color-mix(in srgb,var(--_active-color) 10%,var(--bg-color) 100%);font-family:var(--en-font-family)}@media screen and (max-width:767px){.c-work-nav__button button{flex:1;padding-inline:0}}.c-work-nav__button button>span{display:inline-flex;align-items:center;justify-content:center}.c-work-nav__button button>span>small{font-size:.8em;display:flex;align-items:center;justify-content:center;font-weight:400}.c-work-nav__button button._design{--_active-color:var(--design-color);border:1px solid var(--design-color);color:var(--design-color)}.c-work-nav__button button._coding{--_active-color:var(--coding-color);border:1px solid var(--coding-color);color:var(--coding-color)}.c-work-nav__button button.is-active{color:#fff;border:1px solid var(--_active-color);background:var(--_active-color)}.c-work-nav__button button:hover{color:var(--_active-color)}.c-work-nav__button button:hover.is-active{color:#fff}.c-sort{display:flex;align-items:center;gap:.5em;font-family:sans-serif;position:relative}.c-sort:after{content:"";position:absolute;right:.5em;top:50%;transform:translateY(-80%) rotate(-45deg);width:6px;height:6px;border-left:1px solid var(--base-color);border-bottom:1px solid var(--base-color);pointer-events:none}.c-sort__select{padding:.5em .9em .5em 0;border-color:var(--gray);border-style:solid;border-width:0 0 1px 0;background-color:transparent;cursor:pointer;transition:border-color .2s,box-shadow .2s;border-radius:0;appearance:none;min-width:120px;font-size:1.2rem}.c-sort__select:focus-visible{border-color:#666;outline:0;box-shadow:0 0 0 .2em #6464ff33}.c-work-list{--_gap:calc(12px + var(--slope-1px) * 12);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:var(--_gap);margin-inline:auto;padding-block-end:var(--outer-padding)}@media screen and (max-width:767px){.c-work-list{row-gap:2em;padding-block-end:calc(40px + var(--slope-1px)*20)}}.c-work-item[data-category=coding]{--_color:var(--coding-color)}.c-work-item[data-category=design]{--_color:var(--design-color)}.c-work-item{opacity:0;transform:translateY(20px);animation:fadeInUp .6s ease forwards;animation-delay:calc(var(--animation-order)*.05s)}@media screen and (max-width:767px){.c-work-item{animation-delay:0s!important}}.c-work-item[data-category=design]{--_category-color:var(--design-color)}.c-work-item[data-category=coding]{--_category-color:var(--coding-color)}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.c-work-item__link{text-decoration:none;width:100%;height:100%;display:block;padding-bottom:2em;position:relative;cursor:pointer}@media screen and (max-width:767px){.c-work-item__link{padding-bottom:1.25em}}.c-work-item__link:before{content:"";will-change:opacity,transform;transition:opacity .2s ease,transform .25s cubic-bezier(.2,0,0,1);display:block;width:calc(100% + 24px);height:calc(100% + 24px);margin:-12px;border-radius:12px;background:color-mix(in srgb,var(--_category-color) 5%,var(--bg-color) 100%);box-shadow:0 0 0 1px #ffffff0d,0 4px 12px #0000001a;z-index:-1;position:absolute;inset:0;opacity:0;outline:1px solid color-mix(in srgb,var(--_category-color) 50%,var(--gray) 10%);transform:scale(.96)}.c-work-item__link:hover:before{content:"";opacity:1;transform:scale(1)}.c-work-item__link:hover .c-work-item__image img{transform:scale(1.03);opacity:.8}.c-work-item__image{width:100%;border-radius:8px;overflow:hidden;background:var(--_color);position:relative;aspect-ratio:3/2}.c-work-item__image img{padding:1em;transition:all .4s ease-out;opacity:1;width:100%;height:100%;object-fit:contain}.c-work-item__head{display:flex;justify-content:space-between;margin-block:1em;align-items:center}@media screen and (max-width:767px){.c-work-item__head{margin-block:.75em 0}}.c-work-item__body{display:flex;flex-direction:column;gap:.5em;width:100%}.c-work-item__title{display:flex;gap:0 .5em;flex-wrap:wrap;width:100%;font-size:calc(12px + var(--slope-1px)*2);font-weight:400}.c-work-item__title span:not(:first-child){position:relative;display:flex;align-items:center;justify-content:center;padding-left:.5em}.c-work-item__title span:not(:first-child):before{content:"";position:absolute;left:0;width:1px;height:.8lh;background:var(--base-color);display:block}.c-work-item__date{font-size:calc(12px + var(--slope-1px)*2);font-family:var(--en-font-family);font-weight:700;color:var(--gray);line-height:.7}.c-work-item__category{font-size:.7857142857em;padding:.4285714286em 1em;border-radius:var(--ovall-radius);letter-spacing:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--_category-color) 10%,var(--bg-color) 100%);position:relative;font-family:var(--en-font-family);font-weight:700;gap:.5em;line-height:1;border:1px solid var(--_category-color);color:var(--_category-color)}.c-about-skill{display:flex;flex-direction:column;gap:.75em;--_category-color:var(--base-color);padding-inline:1.5em}.c-about-skill:first-child{padding-block-start:1.5em}.c-about-skill:not(:first-child){padding-block-start:1.5em}.c-about-skill:not(:last-child){padding-block-end:1.5em;border-bottom:1px solid var(--border-color)}.c-about-skill:last-child{padding-block-end:1.5em}.c-about-skill[data-category=design]{--_category-color:var(--design-color)}.c-about-skill[data-category=code]{--_category-color:var(--coding-color)}.c-about-skill__head{padding:.4285714286em 1em;border-radius:var(--ovall-radius);letter-spacing:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--_category-color) 10%,var(--bg-color) 100%);position:relative;font-family:var(--en-font-family);font-weight:700;gap:.5em;line-height:1;border:1px solid var(--_category-color);color:var(--_category-color);width:fit-content}.c-skill{display:flex;flex-wrap:wrap;gap:0 .5em;color:var(--base-color);margin-block:var(--leading-trim)}.c-skill li:not(:last-child){position:relative}.c-skill li:not(:last-child):after{content:"/";position:relative;margin-left:.5em}.c-breadcrumbs{display:flex;flex-wrap:wrap;row-gap:1em;width:100%;font-size:calc(11px + var(--slope-1px)*2);margin-block:var(--leading-trim);margin-inline:auto}.c-breadcrumbs>li{display:flex;align-items:center}.c-breadcrumbs>li+li:before{content:"";display:inline-block;width:1em;height:1em;margin:0 .53846em;background:var(--icon-arrow)}.c-breadcrumbs>li a{text-decoration:none;position:relative}.c-back-button{appearance:none;border:1px solid var(--gray);background:0 0;cursor:pointer;border-radius:var(--ovall-radius);padding-inline:1em;padding-block:1.5em;text-decoration:none;display:inline grid;grid-template-columns:auto 1fr auto;align-items:center;justify-content:center;width:100%;gap:1em;position:relative;transition:opacity .3s;margin-block-end:3em}.c-back-button:after{content:""}.c-back-button:before{content:"";position:relative;mask:var(--icon-arrow);rotate:180deg;background:var(--gray);width:1.5em;height:1.5em;mask-size:1em;mask-repeat:no-repeat;mask-position:center center}.c-back-button span{font-style:normal;display:flex;align-items:center;justify-content:center}.c-back-button:hover{opacity:.7}.c-page{padding-inline:var(--inner-padding);margin-inline:auto;width:100%;padding-block:var(--inner-padding) calc(36px + var(--slope-1px)*12)}@media screen and (max-width:767px){.c-page{padding-block:calc(36px + var(--slope-1px)*12)}}.c-page-image{display:flex;align-items:center;justify-content:center;position:relative;margin-block-end:calc(20px + var(--slope-1px)*20);background:var(--_active-color);padding:var(--inner-padding);border-radius:8px}.c-page[data-category=design] .c-page-image{--_active-color:var(--design-color)}.c-page[data-category=coding] .c-page-image{--_active-color:var(--coding-color)}.c-page-image img{max-width:720px;width:100%;position:relative;z-index:1}.c-page-head{padding-block-end:calc(20px + var(--slope-1px)*10);display:grid;grid-template-columns:100%;width:100%;justify-content:space-between}@media screen and (max-width:767px){.c-page-head{display:flex;flex-direction:column}}.c-page-head__title{display:flex;flex-direction:column}.c-page-title{display:flex;gap:.25em .5em;flex-wrap:wrap;font-size:calc(18px + var(--slope-1px)*6);line-height:1.5;margin-block-start:calc(18px + var(--slope-1px)*6)}.c-page-title__title{display:flex;gap:0 .5em;flex-wrap:wrap;font-family:var(--en-font-family);font-size:calc(18px + var(--slope-1px)*6);font-weight:500}.c-page-title__title span:last-child{position:relative;display:flex;align-items:center;justify-content:center;padding-left:.5em}.c-page-title__title span:last-child:before{content:"";position:absolute;left:0;width:1px;height:.8lh;background:var(--base-color);display:block}.c-page-title__category{font-size:.5833333333em;padding:.4285714286em 1em;border-radius:var(--ovall-radius);letter-spacing:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--_category-color) 5%,var(--bg-color) 100%);position:relative;font-family:var(--en-font-family);font-weight:700;gap:.5em;line-height:1;border:1px solid var(--_category-color);color:var(--_category-color)}[data-category=design] .c-page-title__category{--_category-color:var(--design-color)}[data-category=coding] .c-page-title__category{--_category-color:var(--coding-color)}.c-page-head__info{display:flex;align-items:flex-start;justify-content:flex-start;width:100%;gap:calc(20px + var(--slope-1px)*20);font-family:var(--en-font-family);font-size:calc(12px + var(--slope-1px)*2);border-radius:8px;padding:1em;margin-block-start:calc(20px + var(--slope-1px)*10);background:color-mix(in srgb,#fff 0%,var(--bg-dark-color) 100%)}.c-page-head__info>dl{display:flex;flex-direction:column}.c-page-head__info>dl>dt{font-weight:700;color:var(--gray)}.c-page-head__info>dl>dd{font-weight:400}.c-page-head__description{line-height:1.8;margin-block-start:calc(24px + var(--slope-1px)*12)}p.c-page-head__link{display:inline grid;grid-template-columns:1.2em 1fr;align-items:center;justify-content:center;gap:.25em;position:relative;transition:opacity .3s;color:#999;font-size:calc(11px + var(--slope-1px)*2);border:1px solid var(--border-color);border-radius:8px;padding:.25em 1em .25em .5em;width:fit-content}p.c-page-head__link svg{opacity:.5}a.c-page-head__link{display:inline grid;grid-template-columns:1.2em 1fr;align-items:center;justify-content:center;gap:.25em;position:relative;transition:opacity .3s;font-size:calc(11px + var(--slope-1px)*2);border:1px solid var(--border-color);border-radius:8px;padding:.25em 1em .25em .5em;width:fit-content}a.c-page-head__link:hover{opacity:.7}.c-page-video{max-width:768px;margin-inline:auto}.c-page-device{display:flex;gap:2em 1em;margin-block-start:calc(18px + var(--slope-1px)*6);width:100%;position:relative}.c-page-device>img{border-radius:4px}@media screen and (max-width:560px){.c-page-device{flex-direction:column;gap:2em}}.c-page-device__pc{flex:3;display:flex;flex-direction:column;gap:2em}.c-page-device__pc>img{border-radius:4px}.c-page-device__sp{flex:1;display:flex;flex-direction:column;gap:2em}.c-page-device__sp>img{border-radius:4px}.c-page-banner{display:flex;gap:2em 1em;margin-block:6rem;background:var(--bg-dark-color);padding:var(--inner-padding);border-radius:8px;width:100%;position:relative}.c-page-banner img{width:100%}.c-section-title{font-size:calc(24px + var(--slope-1px)*12);font-weight:700;font-family:var(--en-font-family);text-transform:uppercase;display:flex;align-items:baseline;position:relative;margin-block:var(--leading-trim)}.c-section{display:flex;flex-direction:column;gap:calc(40px + var(--slope-1px)*20);margin-block-end:6rem}.c-section p:not(:last-child){margin-block-end:calc(var(--leading-trim) + .5lh)}.c-section p{line-height:1.8}.c-section__body{letter-spacing:.075em}.c-section__body h2{font-size:2.4rem;margin-block-end:calc(18px + var(--slope-1px)*6)}.c-section__body h2:not(:first-child){margin-block-start:1.75em}.c-section__body dl{display:grid;grid-template-columns:18ch auto;column-gap:1.5em;line-height:1.8}.c-section__body dl:not(:first-child){padding-top:3em}@media screen and (max-width:767px){.c-section__body dl{grid-template-columns:10ch auto}}.c-section__body dl dt{font-weight:700}.c-section__body em{font-style:normal;font-weight:700}.c-section__body>ul{padding-left:1.5em;list-style-position:outside;margin-block-start:calc(18px + var(--slope-1px)*6)}.c-section__body>ul li{list-style:disc}.c-section__body>ul li:not(:last-child){margin-block-end:.25lh}::view-transition-old(work-modal),::view-transition-new(work-modal){animation-duration:.3s;animation-timing-function:cubic-bezier(.33,1,.68,1)}::view-transition-new(work-modal){animation-name:work-modal-enter}@keyframes work-modal-enter{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.c-modal.is-closing .c-modal__content{animation:work-modal-exit .4s cubic-bezier(.4,.4,0,1) forwards}.c-modal.is-closing .c-modal__overlay{animation:overlay-fade-out .4s cubic-bezier(.4,.4,0,1) forwards}@keyframes work-modal-exit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}::view-transition-new(work-overlay){animation:overlay-fade-in .3s ease-out}::view-transition-old(work-overlay){animation:overlay-fade-out .3s ease-out}@keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes overlay-fade-out{0%{opacity:1}to{opacity:0}}.c-modal{position:fixed;inset:0;z-index:10000;display:flex;justify-content:center}.c-modal__content{position:relative;width:1080px;max-width:100%;height:calc(100% - 20px);background:var(--bg-color);z-index:1;overflow-y:auto;display:flex;flex-direction:column;margin:10px;border-radius:6px;z-index:10000;margin-block:auto}.c-modal[data-category=movie] .c-modal__content{max-width:800px;height:fit-content}.c-modal__close{position:absolute;top:calc(var(--outer-padding)/2);right:calc(var(--outer-padding)/2);z-index:2;background:0 0;border:0;font-size:1.5em;line-height:1;cursor:pointer}.c-modal__overlay{position:fixed;inset:0;background:color-mix(in srgb,var(--base-color) 40%,transparent);width:100%;height:100%;z-index:10000}.c-modal[data-category=design] .c-modal__overlay{background:color-mix(in srgb,var(--design-dark-color) 30%,#333 20%)}.c-modal[data-category=coding] .c-modal__overlay{background:color-mix(in srgb,var(--coding-dark-color) 30%,#333 20%)}.c-modal[data-category=movie] .c-modal__overlay{background:color-mix(in srgb,var(--gray) 30%,#333 20%)}.c-modal__body{width:100%;height:fit-content;flex:1;overflow-y:auto;border:0}.c-modal__movie{position:relative;padding-inline:var(--inner-padding);margin-inline:auto;width:100%;padding-block:var(--inner-padding) calc(36px + var(--slope-1px)*12)}@media screen and (max-width:767px){.c-modal__movie{padding-block:calc(36px + var(--slope-1px)*12)}}.c-video-modal__title{margin-block-end:1em;font-size:calc(18px + var(--slope-1px)*6);font-weight:500}.c-modal__movie iframe{position:absolute;inset:0;width:100%;height:100%}.c-video-modal__video{position:relative;width:100%;aspect-ratio:16/9}.c-video-modal__video iframe{position:relative;width:100%;height:100%}