*{scrollbar-width:none}*::-webkit-scrollbar{display:none}body{position:relative;margin:0 auto;width:100%;height:100vh;color:#fff;font-family:sofia-pro,Noto Sans JP,sans-serif;font-size:15px;font-weight:500;line-height:1.2;opacity:1;-webkit-user-select:none;user-select:none}h1{margin:0 auto;font-size:120px;font-weight:600;letter-spacing:-.01em}@media only screen and (max-width: 960px){h1{font-size:90px}}@media only screen and (max-width: 560px){h1{font-size:60px}}h2{margin:0 auto;font-size:72px;font-weight:600}@media only screen and (max-width: 960px){h2{font-size:60px}}@media only screen and (max-width: 560px){h2{font-size:40px}}h3{margin:0 auto;font-size:60px;font-weight:600;letter-spacing:.01em}@media only screen and (max-width: 960px){h3{font-size:54px}}@media only screen and (max-width: 560px){h3{font-size:36px}}h4{margin:10px 0;font-size:28px;font-weight:600;letter-spacing:.02em}@media only screen and (max-width: 960px){h4{font-weight:500;font-size:24px}}@media only screen and (max-width: 560px){h4{font-size:18px}}h5{margin:0;font-size:24px;font-weight:500;letter-spacing:.03em}@media only screen and (max-width: 960px){h5{font-size:20px}}@media only screen and (max-width: 560px){h5{font-size:16px}}p{font-size:16px;font-weight:500;margin:0;letter-spacing:.03em;line-height:2.5}@media only screen and (max-width: 960px){p{font-size:15px}}@media only screen and (max-width: 560px){p{font-size:14px}}caption{font-size:15px;font-weight:500;letter-spacing:.03em;line-height:1.5}@media only screen and (max-width: 960px){caption{font-size:14px}}@media only screen and (max-width: 560px){caption{font-size:13px}}a{color:#fff;text-decoration:none}span{display:inline-block;min-width:.3em}ul{margin:0 auto;padding:0}li{letter-spacing:.05em;display:inline-block;text-decoration:none;font-size:17px}@media only screen and (max-width: 960px){li{font-size:16px}}@media only screen and (max-width: 560px){li{font-size:15px}}.font{font-family:inter,Noto Sans JP,sans-serif}#site-background{position:fixed;z-index:-99;width:100vw;height:100vh;background:linear-gradient(-45deg,#102050,#203080)}#hero-background{position:absolute;z-index:5;width:100%;height:100vh;background:linear-gradient(-45deg,#102050,#203080);animation:bg-animation1 cubic-bezier(.5,0,.2,1) 1.2s both;will-change:clip-path}body.is-work #site-background{background:#f6f6f6}body.is-top .header a[aria-label=home]{opacity:0;pointer-events:none}.title-wrapper{position:relative;z-index:5;padding-top:180px;text-align:center;pointer-events:none}@media only screen and (max-width: 960px){.title-wrapper{padding-top:130px}}@media only screen and (max-width: 560px){.title-wrapper{padding-top:100px}}.social-icon{display:block;width:100%;height:100%;color:currentColor;fill:currentColor;transition:all ease .2s}.stalker{position:fixed;top:0;left:0;z-index:9000;transform:translate3d(var(--sx, 50vw),var(--sy, 50vh),0);pointer-events:none;transition:all .5s cubic-bezier(.2,.6,.5,1);will-change:transform}.stalker-item{width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:100px;background:#f6f6f6;transition:all .3s ease;will-change:transform,opacity}.color .stalker-item{background:#202020}.hover_stick .stalker-item{scale:2;opacity:.5}.hover_view .stalker-item{scale:4;opacity:1;background:#202020}.hover_view .stalker-item:after{font-size:5px;display:flex;height:100%;width:100%;justify-content:center;align-items:center;color:#f6f6f6}.hover_view .stalker-item:after{content:"View"}.range:hover>:first-child{transform:translate3d(calc((var(--mx, 0px) - var(--cx, var(--mx, 0px))) / 2),calc((var(--my, 0px) - var(--cy, var(--my, 0px))) / 2),0)}:root{--header-logo-filter: invert(0);--header-logo-opacity: 1;--header-link-color: #f6f6f6}body.is-top{--header-logo-opacity: 0}html.is-animating body:not(.is-work){--header-logo-filter: invert(0);--header-link-color: #f6f6f6}html.is-animating body.is-work{--header-logo-filter: invert(1);--header-link-color: #202020}html:not(.is-animating) header.is-dark{--header-logo-filter: invert(1);--header-link-color: #202020}header{display:flex;justify-content:space-between;align-items:center;position:fixed;z-index:20;width:100%;height:130px;padding:0 45px;box-sizing:border-box}@media only screen and (max-width: 960px){header{height:100px;padding:0 20px}}@media only screen and (max-width: 560px){header{height:80px;padding:0 15px}}header .range{padding:15px;border-radius:50%}@media only screen and (max-width: 560px){header .range{padding:10px}}header .range #header-logo{width:50px;height:50px;opacity:var(--header-logo-opacity);filter:var(--header-logo-filter);transition:filter .3s,transform .2s ease,opacity .2s;will-change:transform,opacity,filter}@media only screen and (max-width: 560px){header .range #header-logo{width:40px;height:40px}}header .range span{display:inline-block;color:var(--header-link-color);transition:color .3s,transform .2s ease;will-change:transform}footer{display:flex;align-items:center;justify-content:space-between;height:100px;padding:0 60px;box-sizing:border-box;color:#202020}@media only screen and (max-width: 560px){footer{height:80px;padding:0 30px}}footer .footer-link{display:flex;align-items:center}footer .footer-link .range{display:inline-block;height:24px;padding:10px;border-radius:50%}@media only screen and (max-width: 560px){footer .footer-link .range{height:21px;padding:8px}}footer .footer-link .range svg{display:block;width:100%;height:100%;fill:#202020;color:#202020;transition:all .2s}.home{position:relative;overflow:hidden}.home #parallax-layers{width:1100px;height:100vh;height:100dvh;margin-left:auto}@media only screen and (max-width: 960px){.home #parallax-layers{width:960px}}@media only screen and (max-width: 560px){.home #parallax-layers{width:700px;margin-left:-100px}}.home #parallax-layers .layer{position:absolute;width:1100px;margin-left:auto;will-change:transform}@media only screen and (max-width: 960px){.home #parallax-layers .layer{width:960px}}@media only screen and (max-width: 560px){.home #parallax-layers .layer{width:700px;margin-left:-100px}}.home #home-logo{position:absolute;margin:auto;width:300px;height:300px;inset:0}@media only screen and (max-width: 960px){.home #home-logo{width:240px;height:240px}}@media only screen and (max-width: 560px){.home #home-logo{width:180px;height:180px}}.home .home-title-wrapper{position:absolute;bottom:50px;left:70px;margin:0 auto}@media only screen and (max-width: 960px){.home .home-title-wrapper{bottom:20px;left:30px}}@media only screen and (max-width: 560px){.home .home-title-wrapper{bottom:70px;left:20px}}.home .home-link{display:flex;align-items:center;position:absolute;bottom:50px;right:90px;margin:0 auto}@media only screen and (max-width: 960px){.home .home-link{bottom:20px;right:30px}}@media only screen and (max-width: 560px){.home .home-link{bottom:20px;left:12px}}.home .home-link a{display:inline-block;height:24px;padding:10px}@media only screen and (max-width: 560px){.home .home-link a{height:21px;padding:8px}}.home .home-link svg{width:100%;height:100%;display:block;fill:#fff;transition:all ease .2s}.works{background:#f6f6f6}.works-list{margin:130px 40px 20px;position:relative;color:#202020;z-index:10}@media only screen and (max-width: 960px){.works-list{margin:80px 40px 0}}@media only screen and (max-width: 560px){.works-list{margin:40px 10px 0}}.work-card{color:#202020;margin-bottom:7%;padding:20px;display:flex;align-items:center}@media only screen and (max-width: 960px){.work-card{display:block}}.work-card .card-image{overflow:hidden;cursor:pointer;border-radius:4px;width:52%;height:100%}@media only screen and (max-width: 960px){.work-card .card-image{width:100%}}.work-card .card-image img{width:100%;height:100%;vertical-align:bottom}.work-card .card-title-wrapper{width:42%}@media only screen and (max-width: 960px){.work-card .card-title-wrapper{position:relative;width:100%;margin-top:20px!important;margin-left:0!important}}@media only screen and (max-width: 560px){.work-card .card-title-wrapper{margin-top:20px!important;margin-left:0!important}}.work-card:nth-child(2n-1) .card-title-wrapper{margin-left:6%;margin-top:-20px}.work-card:nth-child(2n) .card-image{order:1}.work-card:nth-child(2n) .card-title-wrapper{margin-right:6%;margin-top:-20px;text-align:end}@media only screen and (max-width: 960px){.work-card:nth-child(2n) .card-title-wrapper{text-align:start}}.work-card .card-title{background-repeat:no-repeat;background-size:100% 30%;background-position:10px bottom;padding-right:10px;display:inline;font-size:4vw;line-height:1.5}@media only screen and (max-width: 960px){.work-card .card-title{margin-bottom:5.5%;font-size:6vw}}@media only screen and (max-width: 560px){.work-card .card-title{font-size:36px}}.work-card .card-subtitle{margin:1em 0}.about{background:#f6f6f6}.about-wrapper{max-width:1366px;margin:240px auto 60px;padding:60px;color:#202020;pointer-events:none}@media only screen and (max-width: 560px){.about-wrapper{margin:150px 0 0;padding:30px}}.about-wrapper .about-logo img{position:absolute;z-index:1;width:800px;margin:-300px -150px}@media only screen and (max-width: 960px){.about-wrapper .about-logo img{width:500px;margin:-180px -100px}}@media only screen and (max-width: 560px){.about-wrapper .about-logo img{width:300px;margin:-120px -50px}}.about-wrapper .about-title-wrapper{position:relative;z-index:10;text-align:end;gap:20px}.about-wrapper .about-title-wrapper .about-title{background-repeat:no-repeat;background-size:100% 30%;background-position:10px bottom;background-image:linear-gradient(135deg,#8dd1ff,#2a5cc1);display:inline;font-size:80px}@media only screen and (max-width: 960px){.about-wrapper .about-title-wrapper .about-title{font-size:64px}}@media only screen and (max-width: 560px){.about-wrapper .about-title-wrapper .about-title{font-size:54px}}.about-wrapper .about-title-wrapper h4{margin-top:40px}@media only screen and (max-width: 960px){.about-wrapper .about-title-wrapper h4{margin-top:32px;font-size:24px}}@media only screen and (max-width: 560px){.about-wrapper .about-title-wrapper h4{margin-top:20px;font-size:18px}}.about-wrapper .about-content{position:relative;z-index:10;margin:300px 0 150px;text-align:center}@media only screen and (max-width: 960px){.about-wrapper .about-content{margin:240px 0 120px}}@media only screen and (max-width: 560px){.about-wrapper .about-content{margin:150px 0 70px}}.about-wrapper .about-content h2{margin-bottom:60px}@media only screen and (max-width: 960px){.about-wrapper .about-content h2{margin-bottom:40px}}.about-wrapper .about-content a{color:#202020;transition:all .3s}.about-wrapper .about-content a:hover{opacity:.5}.about-wrapper .about-block{display:flex;position:relative;z-index:10}@media only screen and (max-width: 960px){.about-wrapper .about-block{display:inline}}.about-wrapper .about-block .about-tools{width:100%;padding:150px 0;border-top:solid 1px #DCDCDC;border-bottom:solid 1px #DCDCDC;transition:background-size cubic-bezier(0,.7,.3,1) 1.2s}@media only screen and (max-width: 960px){.about-wrapper .about-block .about-tools{padding:100px 0}}@media only screen and (max-width: 560px){.about-wrapper .about-block .about-tools{padding:50px 0}}.about-wrapper .about-block .about-tools h2{margin-bottom:60px}@media only screen and (max-width: 960px){.about-wrapper .about-block .about-tools h2{margin-bottom:40px}}.about-wrapper .about-block .about-tools ul{display:flex;flex-wrap:wrap;gap:12px}.about-wrapper .about-block .about-tools ul li{background:#fff;padding:.4em .6em;border-radius:6px}.work{background:#f6f6f6}#work-wrapper{padding:160px 60px 500px;margin:0 auto;max-width:1366px;animation:bg-animation2 cubic-bezier(.5,0,.2,1) 1.2s both;will-change:clip-path}@media only screen and (max-width: 960px){#work-wrapper{padding:90px 60px 400px}}@media only screen and (max-width: 560px){#work-wrapper{padding:90px 30px 400px}}#work-wrapper .work-image{overflow:hidden;border-radius:8px;width:100%;height:100%}#work-wrapper .work-image img{border-radius:8px;width:100%;height:100%;vertical-align:bottom}#work-wrapper .work-title-wrapper{margin-top:60px}@media only screen and (max-width: 560px){#work-wrapper .work-title-wrapper{margin-top:40px}}#work-wrapper .work-info{display:flex;align-items:center;justify-content:space-between;margin-top:60px;padding:30px 40px;background:#ffffff1a;border-radius:20px}@media only screen and (max-width: 960px){#work-wrapper .work-info{align-items:flex-end;padding:30px}}@media only screen and (max-width: 560px){#work-wrapper .work-info{padding:20px}}#work-wrapper .work-info .info-items{display:flex;gap:50px}@media only screen and (max-width: 960px){#work-wrapper .work-info .info-items{justify-content:space-between;flex-direction:column;gap:30px}}@media only screen and (max-width: 560px){#work-wrapper .work-info .info-items{gap:20px}}#work-wrapper .work-info .info-items .info-item{display:flex;flex-direction:column;gap:6px}#work-wrapper .work-info .info-items .info-item p{line-height:1.5}#work-wrapper .work-info .info-play{padding:15px 30px;background:#ffffff1a;border-radius:100px;transition:all .3s}#work-wrapper .work-info .info-play:hover{background:#fff3}#work-wrapper1{color:#202020;padding:60px;margin:-120px auto 0;max-width:1366px}@media only screen and (max-width: 560px){#work-wrapper1{padding:30px;margin:-200px 0 0}}#work-wrapper1 .work-about{padding-bottom:150px;border-bottom:solid 1px #DCDCDC}@media only screen and (max-width: 960px){#work-wrapper1 .work-about{padding-bottom:100px}}@media only screen and (max-width: 560px){#work-wrapper1 .work-about{padding-bottom:50px}}#work-wrapper1 .work-about div,#work-wrapper1 .work-about h2{max-width:1080px;margin:0 auto}#work-wrapper1 .work-about h2{margin-bottom:60px}@media only screen and (max-width: 560px){#work-wrapper1 .work-about h2{margin-bottom:40px}}#work-wrapper1 .work-about a{color:#202020;transition:all .3s}#work-wrapper1 .work-about a:hover{opacity:.5}#work-wrapper1 .work-block{display:flex;flex-wrap:wrap;justify-content:space-between;margin:150px 0 200px}@media only screen and (max-width: 960px){#work-wrapper1 .work-block{margin:100px 0}}@media only screen and (max-width: 560px){#work-wrapper1 .work-block{margin:50px 0}}#work-wrapper1 .work-block .block-image{width:48%;height:48%;border-radius:4px;overflow:hidden}#work-wrapper1 .work-block .block-image:nth-child(2n){margin-top:10%;margin-bottom:-5%}@media only screen and (max-width: 960px){#work-wrapper1 .work-block .block-image:nth-child(2n){margin-top:0;margin-bottom:0}}@media only screen and (max-width: 960px){#work-wrapper1 .work-block .block-image{margin-top:10%;width:100%;height:100%;margin-bottom:10%}}#work-wrapper1 .work-block .block-image img{width:100%;height:100%;vertical-align:bottom}#work-wrapper1 .work-share{padding:150px 0;border-top:solid 1px #DCDCDC}@media only screen and (max-width: 960px){#work-wrapper1 .work-share{padding:100px}}@media only screen and (max-width: 560px){#work-wrapper1 .work-share{padding:50px}}#work-wrapper1 .work-share h2{text-align:center;margin-bottom:60px}@media only screen and (max-width: 560px){#work-wrapper1 .work-share h2{margin-bottom:40px}}.share-link{display:flex;justify-content:center;gap:20px}@media only screen and (max-width: 560px){.share-link{gap:16px}}.share-link div{display:flex;justify-content:center;align-items:center;gap:16px;padding:18px 24px;border-radius:100px;transition:all .3s}@media only screen and (max-width: 560px){.share-link div{padding:10px;width:24px;height:24px}}.share-link div.twi{background:#000;border:solid 2px #000000;color:#fff}.share-link div.twi:hover{color:#000}.share-link div.line{background:#2ccf6f;border:solid 2px #2CCF6F}.share-link div.line:hover{color:#2ccf6f}.share-link div.copy{background:#969696;border:solid 2px #969696}.share-link div.copy:hover{color:#969696}.share-link div:hover{background:#fff0}.share-link div svg{width:28px;fill:currentColor}@media only screen and (max-width: 960px){.share-link div svg{width:24px}}@media only screen and (max-width: 560px){.share-link div svg{width:20px}}@media only screen and (max-width: 560px){.share-link div h5{display:none}}.next{display:flex;flex-direction:column;flex-wrap:wrap;align-items:center;justify-content:center;height:100vh;text-align:center}:root{--clip-height-1: 450px;--clip-height-2: 750px;--circle-radius: 100%}@media only screen and (min-width: 1486px){:root{--circle-radius: 1670px}}@media only screen and (max-width: 960px){:root{--clip-height-1: 420px;--clip-height-2: 600px}}@media only screen and (max-width: 560px){:root{--clip-height-1: 300px;--clip-height-2: 400px}}@keyframes bg-animation1{0%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}to{clip-path:polygon(0 0,100% 0,100% var(--clip-height-1),0 var(--clip-height-2))}}@keyframes bg-animation2{0%{clip-path:circle(0% at 50% 0)}to{clip-path:circle(var(--circle-radius) at 50% 0)}}html.is-changing .transition-fade{transition:all .5s ease;will-change:opacity,filter}html.is-animating .transition-fade{opacity:0;filter:blur(3px);will-change:opacity,filter}html:not(.is-initial-loading) .transition-fade,html:not(.is-initial-loading) header{transition:all .6s ease}html.is-initial-loading .transition-fade,html.is-initial-loading header{opacity:0;filter:blur(3px);will-change:opacity,filter}
