html,legend{color:#000}.wrapper .mail a::after,.wrapper .ui::before,.wrapper h1::before,blockquote:after,blockquote:before,q:after,q:before{content:""}article,aside,details,figcaption,figure,footer,header,hr,main,menu,nav,section,summary{display:block}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,i,iframe,img,input,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,tr,ul,var,video{padding:0;margin:0;border:0}html{font-size:100%;background:#fff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{line-height:100%;text-align:center}.wrapper h1,caption,th{text-align:left}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ol,ul{list-style:none}table{font:100%;font-size:inherit;border-spacing:0;border-collapse:collapse}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}button,input,select,textarea{font:99% arial,helvetica,clean,sans-serif;font-family:inherit;font-size:inherit;font-weight:inherit;vertical-align:middle}abbr,acronym{font-variant:normal;border:0}sup{vertical-align:text-top}sub{vertical-align:text-bottom}hr{height:1px;-moz-box-sizing:content-box;box-sizing:content-box;padding:0;margin:1em 0;border:0;border-top:1px solid #ccc}a{padding:0;margin:0;font-size:100%;vertical-align:baseline;background:0 0;color:inherit;text-decoration:inherit;cursor:inherit;cursor:pointer}fieldset,img{vertical-align:bottom;border:0}a:active,a:focus{outline:0}*{-webkit-box-sizing:border-box;box-sizing:border-box}.ofv{overflow:hidden}:root{--bg-col:#ffffff;--wid-img:100%}html{width:100%;height:100%;position:relative;background-color:var(--bg-col);font-family:"Ropa Sans",sans-serif;overflow-y:scroll}.wrapper{height:100%}.wrapper h1{position:fixed;top:45px;left:64px;z-index:10;width:100%}.wrapper h1::before{position:absolute;top:-110px;left:-65px;width:110%;height:170px;z-index:0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:.99}.wrapper h1 img{position:relative;width:160px}.wrapper .bg-grad{position:fixed;top:80px;left:-65px;width:110%;height:50px;background:linear-gradient(var(--bg-col),var(--bg-col),rgba(255,255,255,0));z-index:2}.wrapper .mail{position:fixed;bottom:40px;right:40px;font-size:24px;mix-blend-mode:luminosity;color:#fff}.wrapper .mail a::after{position:absolute;top:32%;left:0;width:100%;height:4px;opacity:1;background-color:var(--bg-col);-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transition:all 350ms cubic-bezier(.19,1,.22,1) 0s;transition:all 350ms cubic-bezier(.19,1,.22,1) 0s;transform-origin:top left}.wrapper .mail a:hover::after{-webkit-transform:scaleX(1);transform:scaleX(1)}.wrapper .ui{position:fixed;top:50px;right:50px;font-size:30px;font-size:34px;mix-blend-mode:luminosity;color:#fff;letter-spacing:.03em;z-index:20;cursor:pointer}.wrapper .ui::before{position:absolute;top:10%;left:-23px;background-image:url(../images/arw1.svg);background-size:contain;width:13px;height:10px;-webkit-transition:all .3s cubic-bezier(.23,1,.32,1) 50ms;transition:all .3s cubic-bezier(.23,1,.32,1) 50ms}.wrapper .ui p{position:relative;text-align:right;width:fit-content;display:inline;text-rendering:optimizeLegibility;font-feature-settings:"palt" 1}.contents .works-links li a .client::after,.contents .works-links li a .client::before,.wrapper .ui p::after{position:absolute;content:""}.wrapper .ui p::after{top:0;left:0;width:100%;height:100%;background-color:#201b37;mix-blend-mode:difference;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transition:all .3s cubic-bezier(.19,1,.22,1) 0s;transition:all .3s cubic-bezier(.19,1,.22,1) 0s;transform-origin:top left}.wrapper .ui.active::before{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.wrapper .ui:hover p::after{-webkit-transform:scaleX(1);transform:scaleX(1)}.contents .works-links{position:relative;margin-left:65px;margin-top:180px;padding-bottom:40px}.contents .works-links li{text-align:left;margin-bottom:40px;color:#fff;mix-blend-mode:luminosity;width:fit-content;opacity:0}.contents .works-links li .client{font-size:36px;margin-bottom:2px;width:fit-content}.contents .works-links li .client .split-msk{overflow:hidden;display:inline-block;line-height:1}.contents .works-links li .client .split-msk .txt{display:inline-block}.contents .works-links li .info{font-size:14px;opacity:.75;letter-spacing:.05em}.contents .works-links li a{width:fit-content;display:block}.contents .works-links li a .client{position:relative;width:fit-content}.contents .works-links li a .client::before{top:6%;right:-18px;background-image:url(../images/arw1_45.svg);background-size:contain;width:11px;height:11px;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:all .3s cubic-bezier(.23,1,.32,1) 50ms;transition:all .3s cubic-bezier(.23,1,.32,1) 50ms}.contents .works-links li a .client::after{top:calc(50% - 8px);top:41%;top:0;left:0;width:100%;height:6px;height:100%;background-color:#201b37;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transition:all 450ms cubic-bezier(.19,1,.22,1) 0s;transition:all 450ms cubic-bezier(.19,1,.22,1) 0s;transform-origin:top left;mix-blend-mode:difference;background-blend-mode:difference}.contents .works-links li a:hover .client::before{-webkit-transform:scale(1);transform:scale(1)}.contents .works-links li a:hover .client::after{-webkit-transform:scaleX(1);transform:scaleX(1)}.contents .works-links li.closed .client{position:relative;opacity:.6;width:fit-content}.contents .works-links li.closed .client::after{content:"";position:absolute;top:43%;left:-.5%;width:101%;height:3px;background-color:#fff;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transition:all 650ms cubic-bezier(.215,.61,.355,1) 0s;transition:all 650ms cubic-bezier(.215,.61,.355,1) 0s;transform-origin:top left}.contents .works-links li.closed .client.show::after{-webkit-transform:scaleX(1);transform:scaleX(1)}.contents .works-links li.closed .info{opacity:.35}.contents .works-imgs{width:100%;height:100%;position:fixed;top:0;left:0;opacity:.75;z-index:1000;mix-blend-mode:luminosity;pointer-events:none}.contents .works-imgs li{position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);-webkit-transform:translateY(-50%) translateX(-50%);opacity:.13;width:580px;height:380px;z-index:1}.contents .works-imgs li .wrap{position:absolute;left:0;top:0;opacity:0}.contents .works-imgs li .wrap img{z-index:1;filter:brightness(100%) grayscale(90%)}.contents .works-imgs li .wrap::after{background-color:#036;content:"";width:100%;height:100%;position:absolute;left:0;top:0;z-index:2;mix-blend-mode:screen}.contents .works-imgs li.active{opacity:.95;mix-blend-mode:plus-darker;z-index:100}.about,.canvas{left:0;z-index:1000}@media screen and (-webkit-min-device-pixel-ratio:0){.bg-grad,::i-block-chrome{display:none}::i-block-chrome .contents .works-links li{background-color:red;mix-blend-mode:plus-lighter}}.canvas{position:fixed;top:0;width:100%;height:100%;opacity:1;mix-blend-mode:difference;mix-blend-mode:overlay;pointer-events:none}.imgs{padding-right:200px;display:none}.imgs img{width:var(--wid-img);display:block;margin:0 auto 100px}.about{line-height:2;color:#fff;text-align:left;letter-spacing:.1em;opacity:.9;position:absolute;overflow:hidden;top:0;margin-top:180px;padding-bottom:60px;margin-left:65px;font-size:14px;display:none}.about h2{font-size:28px;margin-top:40px;margin-bottom:10px;opacity:.7}.about h3{font-size:15px;letter-spacing:.07em}.about h3 .jp{font-size:13px;letter-spacing:.1em}.about .lead{font-size:16px}.about .mailto{font-size:18px;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media only screen and (max-width:768px){.about,.wrapper .ui p::after{display:none}.about .mailto,.contents .works-links li{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wrapper h1{top:0;left:0;margin-left:8%;margin-top:8%}.wrapper h1 img{width:32%}.wrapper h1::before{top:0;left:0;margin-top:-13.3333333333%;margin-left:-8%;height:26vw}.wrapper .bg-grad{top:0;left:0;margin-top:14.6666666667%;margin-left:-8%}.wrapper .mail{bottom:0;right:0;margin-right:5.3333333333%;margin-bottom:5.3333333333%;font-size:34px;font-size:4.5333333333vw}.wrapper .mail a::after{height:4px}.wrapper .ui{position:fixed;top:0;right:0;margin-top:12.2666666667%;margin-right:6.6666666667%;font-size:46px;font-size:6.1333333333vw}.wrapper .ui::before{top:25%;left:-16px;width:9px;height:7px}.contents .works-links{position:relative;margin-left:8%;margin-top:38.6666666667%;padding-bottom:8%}.contents .works-links li{margin-bottom:8%;mix-blend-mode:plus-lighter}.contents .works-links li .client{font-size:46px;font-size:6.1333333333vw;margin-bottom:0}.contents .works-links li .info{font-size:20px;font-size:2.6666666667vw;opacity:.75;letter-spacing:.05em}.contents .works-links li.closed .client::after{top:42%;height:2px}.contents .works-links li a .client::before{width:8px;height:8px;right:-15px}.contents .works-links li.active a .client::before{-webkit-transform:scale(1);transform:scale(1)}.contents .works-links li.active a .client::after{-webkit-transform:scaleX(1);transform:scaleX(1)}.contents .works-imgs{margin-left:6.6666666667%;margin-top:-13.3333333333%;pointer-events:none}.contents .works-imgs li{width:66.6666666667%;height:auto}.contents .works-imgs li img{width:100%;height:auto}.about{margin-top:37.3333333333%;padding-bottom:8%;margin-left:8%;margin-right:8%;font-size:25px;font-size:3.3333333333vw;opacity:1}.about h2{font-size:44px;font-size:5.8666666667vw;margin-top:12%;margin-bottom:0;opacity:.7;letter-spacing:.03em}.about h3{font-size:27px;font-size:3.6vw;letter-spacing:.05em}.about h3 .jp{font-size:23px;font-size:3.0666666667vw;letter-spacing:.1em}.about .lead{font-size:25px;font-size:3.3333333333vw;line-height:2.4}.about .contact{line-height:1.7}.about .mailto{font-size:34px;font-size:4.5333333333vw;margin-top:2.6666666667%;display:inline-block}}