@import url(https://fonts.googleapis.com/css?family=Nunito&display=swap);@import url(https://fonts.googleapis.com/icon?family=Material+Icons&display=swap);@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);@import url(https://fonts.googleapis.com/css2?family=Stardos+Stencil&display=swap);@import url(https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap);@import url(https://use.typekit.net/ayz3jyb.css);@import url(https://use.fontawesome.com/releases/v5.15.1/css/all.css);@import url(https://use.fontawesome.com/releases/v5.15.1/css/v4-shims.css);:root{--color1:#fff;--color2:#000;--color3:#0e2636;--color4:#dfdfdf;--color5:#333;--color6:#efefef;--color7:#333}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}html{scroll-behavior:smooth}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#333}::-webkit-scrollbar-thumb{background:rgba(0,0,0,.5)}body{background-color:var(--color2);font-family:adobe-caslon-pro,"Noto Serif JP",serif;font-display:swap}a,body{color:var(--color1)}a{text-decoration:none}p{font-family:Roboto,Noto Sans JP,sans-serif;line-height:1.2em}hr{border:1px solid #444}img{width:100%;height:auto}.invert{background-color:var(--color1);color:var(--color2)}.wrapper{max-width:1024px;width:100%;display:flex;flex-direction:column;margin:0 auto}.container{padding:10%}.row{display:flex;flex-direction:column}.row .col{flex:1;justify-content:space-between;padding:1vw}.f-right{float:right}.f-left{float:left}a.router-link-exact-active{color:red}.heading{font-family:adobe-caslon-pro,"Noto Serif JP",serif;font-size:1.1em;letter-spacing:1.1em;text-align:center;text-indent:0;padding-bottom:10%;text-transform:uppercase}.heading span{opacity:.2;position:absolute}.leading{font-family:adobe-caslon-pro,"Noto Serif JP",serif;display:inline-block;width:100%;border-bottom:var(--color1) 1px solid}.txtHide{font-size:12pt;color:var(--color5);transition:.5s ease}.txtHide:hover{color:var(--color1)}.bar-text{letter-spacing:5px;background:var(--color1);color:var(--color2);padding:5px 10px;display:block;text-align:left;align-self:center;font-size:1em}.link1{transition:1s ease;text-align:center}.link1:hover{border-bottom:1px solid var(--color1);transition:.25s ease}.link2{font-family:Roboto,Noto Sans JP,sans-serif;text-align:center;padding:5px 30px;margin:5px;color:var(--color1);position:relative}.link2,.link2:hover{transition:.25s ease;border:1px solid var(--color1)}.link2:hover{background:var(--color1);color:var(--color2)}.overlay{opacity:.2;font-size:10em;position:absolute;align-self:center;z-index:-1}.sns-logo{width:3em;background-color:var(--color1)}.list1 li{opacity:.8;width:100%;display:inline-block;margin-bottom:10px}.list1 li span{float:left}.list1 li a,.list1 li p{float:right}.list1 li:hover{opacity:1}.list2{display:block}.list2 li{display:flex;justify-content:space-between;border-top:1px solid #555;border-bottom:1px solid #555;padding:10px}.list3 li{width:100%;background:var(--color5);height:20px;margin-bottom:10px}.list3 li label{background:var(--color4);display:block;width:var(--skill-level);height:16px;padding:2px;text-indent:5px;text-align:left;font-size:12pt;font-family:Roboto,Noto Sans JP,sans-serif;text-transform:uppercase;box-shadow:inset 0 0 100px var(--color3);transition:all .3s}.list3 li label:hover{width:100%;transition:all .3s}.box-list{border:1px solid #fff;padding:5px 6px;margin:10px 0;min-height:30px;display:flex;align-items:center;justify-items:center}.box-list span:first-child{flex-grow:1;justify-content:center}.box-list span:nth-child(2){flex-grow:8}.box-list span:nth-child(3){flex-grow:1;font-size:1em;font-family:Roboto,Noto Sans JP,sans-serif;text-align:right}.box-list:hover{background:#fff;color:#000}.box-list:hover a{color:#000}.box-empty{border:1px solid #fff;min-height:40px;display:block}.box-empty:hover{background:#fff;color:#000}.bg-overlay{position:fixed;width:100%;height:100vh;z-index:-1;top:0;left:0}.bg-overlay img{-o-object-fit:cover;object-fit:cover;height:100vh}.img-hover1{height:100%;overflow:hidden}.img-hover1 img{transition:transform 1s ease}.img-hover1:hover img{transform:scale(1.1)}.page{display:flex;flex-direction:column;justify-content:center;align-self:center;padding:5%}.page div:first-child a{margin-right:10%}.page div:first-child h6{margin-bottom:1%}.page .page-content{display:flex;flex-direction:column}#about-page .page-content section{padding:10px}#about-page .page-content section:first-child{flex:1}#about-page .page-content section:first-child .about-intro{position:relative}#about-page .page-content section:first-child .about-intro img{position:absolute;opacity:.2;height:500px;width:auto}#about-page .page-content section:nth-child(2),#about-page .page-content section:nth-child(3){flex:1}#contact-page .page-content,#project-page .page-content{justify-content:center}.btn1{background:transparent;width:100%;padding:10px;color:var(--color5);border:3px var(--color5) solid}.btn1,.btn2{text-align:center}.btn2{display:block;width:60%;font-size:inherit;padding:10px 20px;margin:10px auto;border:1px solid transparent;position:relative}.btn2,.btn2:hover{transition:all .5s ease}.btn2:hover{border:1px solid var(--color1);border-radius:5px}.closebtn{position:absolute;cursor:pointer;top:10px;right:25px;font-size:36px;margin-left:50px}.fade-enter-active,.fade-leave-active{transition:all 1s}.fade-enter-active{transition-delay:1s}.fade-enter,.fade-leave-to{opacity:0}.page-change-enter-active{transition:all 1s}.page-change-leave-active{transition:all .5s}.page-change-enter-active{transition-delay:1s}.page-change-enter,.page-change-leave-to{opacity:0}.slide-enter-active,.slide-leave-active{transition:all .5s}.slide-enter-active{transform:translateX(0)}.slide-enter,.slide-leave-to{transform:translateX(-100%)}.accordion-enter{opacity:0;overflow:hidden}.accordion-enter-active,.accordion-leave-active{transition:all 10s}.accordion-enter-to{opacity:1}.accordion-leave-to{opacity:0}header{position:-webkit-sticky;position:sticky;top:4vh;z-index:100}header nav{padding:0 1em;display:flex;justify-content:space-between;font-family:Roboto,Noto Sans JP,sans-serif}header nav span{background:none;border:none;color:#fff;z-index:10;transform:rotate(90deg);transition:all .15s ease-in;-webkit-tap-highlight-color:transparent}header nav span i{cursor:pointer;transition:.5s;font-size:17pt;font-weight:700}header nav span i:hover{opacity:.5}header nav span i:after{font-family:Material Icons;content:"menu";transition:all .15s ease}header nav span .active:after{content:"clear"}header nav ul{display:flex;letter-spacing:.5em;align-self:center}header nav ul li a{padding:0 1em}.nav-menu{position:fixed;margin-left:30px;z-index:10;transform:translateY(100%) rotate(90deg);transform-origin:0 0;transition:all .15s ease-in;-webkit-tap-highlight-color:transparent}.nav-menu i{cursor:pointer;transition:.5s;font-size:17pt;font-weight:700}.nav-menu i:hover{opacity:.5}.nav-menu i:after{font-family:Material Icons;content:"menu";transition:.15s ease}.nav-menu .active:after{content:"clear";opacity:0}.nav-menu span{font-family:Roboto;font-weight:500;letter-spacing:8pt;position:relative;left:8px;top:-7px}.sidenav{background:var(--color5) url(/img/bg4.webp);height:100%;width:250px;max-width:250px;position:fixed;z-index:10;top:0;left:0;overflow-x:auto;padding-top:10%;transition:transform .25s ease-in linear;will-change:transform}.sidenav object{width:60%!important;margin:10% auto;display:block}.sidenav div a{padding:8px 8px 8px 32px;text-decoration:none;font-size:25px;text-transform:uppercase;display:block;transition:.5s;letter-spacing:.15em}.sidenav div a:active{opacity:.2;-webkit-text-decoration-line:line-through;text-decoration-line:line-through}.sidenav div a:hover{opacity:.5;margin-left:30px}.hero{background-size:cover;height:100vh;display:flex;justify-content:center;align-items:center}.hero .hero-text h1{font-size:1.2em}.hero .hero-text h1,.hero .hero-text h2{font-family:Roboto,Noto Sans JP,sans-serif}.hero .hero-text h2{font-size:2.5em}.hero .hero-text p{margin-bottom:2rem}.hero .hero-text a{font-size:1.5rem}.bg-top{background:var(--color2) url(/img/hero1.webp) top no-repeat;background-size:contain;width:100%;height:100vw;position:absolute;z-index:-1;opacity:.9}#intro{background:var(--color2);overflow:hidden;height:100vh}#intro p{font-family:adobe-caslon-pro,"Noto Serif JP",serif;font-size:.65em;letter-spacing:.5em;line-height:2.3em;text-align:justify}#intro .intro-wrap{display:flex;width:100%;max-width:500px;height:768px;position:relative;overflow:hidden;margin:auto}#intro .intro-wrap img{z-index:10;position:relative;top:25%;cursor:pointer}#intro .intro-wrap .intro-bar{background:var(--color5) url(/img/bg1.webp) repeat;width:100%;height:100%;-webkit-clip-path:polygon(75% 0,100% 0,25% 100%,0 100%);clip-path:polygon(75% 0,100% 0,25% 100%,0 100%);position:absolute;background-attachment:fixed;background-position:50%}#intro .intro-left{width:50%;padding:5px;float:left}#intro .intro-left h6{background:var(--color2);width:50px;height:30px;position:absolute;margin:10%;padding:15px;font-size:3.2em}#intro .intro-right{padding:5px;width:50%;margin-top:25%;float:right}#intro .intro-center{width:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#about{display:grid;font-size:1.1em;grid-template-columns:1fr;grid-template-rows:1fr;grid-row-gap:30px;grid-template-areas:"about1" "about2" "about4" "about3";overflow:hidden}#about div:first-of-type{grid-area:about1;place-self:center}#about div:nth-of-type(2){grid-area:about2;place-self:center;width:100%}#about div:nth-of-type(3){grid-area:about3}#about div:nth-of-type(4){grid-area:about4;place-self:center}#about div{overflow:hidden}#about div,#about div p{line-height:2.2em}#about div .letter{font-size:7.5em;padding:10px;float:left;height:80px;position:relative;top:55px}#about div object{position:absolute;align-self:center;opacity:.2;left:-100px}#about div img{position:relative}#project{font-size:1.1em}#project .hooper{outline:none;height:100%}#project .hooper .hooper-next,#project .hooper .hooper-prev{outline:none;fill:var(--color1)}#project img{-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;-webkit-filter:saturate(.5);filter:saturate(.5);transition:all .3s ease}#project img:hover{-webkit-filter:saturate(.9);filter:saturate(.9);transition:all .3s ease;transition-delay:.3s}#project video{height:100%;width:100%}#skills{font-size:1.1em;display:flex;flex-direction:column}#skills,#skills .parts{transition:all .5s ease}#skills .parts{flex-grow:1;flex-basis:auto;padding:10px}@media (min-width:700px){#skills{flex-direction:row}#skills .parts{width:50%}}.footer{background:var(--color2) url(/img/footer.webp) bottom no-repeat;background-size:contain}.footer .navi-open{background:var(--color2) url(/img/bg4.webp);height:150px;width:150px;display:block;align-self:center;margin:10% auto}.footer p{text-align:center}.footer .sns-list{display:flex;justify-content:space-between;font-size:2em}.footer .sns-list,.footer .sns-list i{transition:all .5s ease}.footer .sns-list i:hover{-webkit-animation:vibrate 10s ease infinite;animation:vibrate 10s ease infinite}.footer .trial1{background:#255;height:300px;width:600px;overflow:hidden}.footer .trial1 img{-webkit-animation:vibrate 5s linear infinite alternate;animation:vibrate 5s linear infinite alternate;width:120%;height:auto}@-webkit-keyframes vibrate{0%{transform:scale(1.5) skew(1deg,1deg)}30%{transform:scale(1.49) rotate(1deg)}50%{transform:scale(1.48) rotate(2deg) skew(0deg,1deg)}70%{transform:scale(1.49) rotate(1deg)}to{transform:scale(1.5) skew(-1deg,0deg)}}@keyframes vibrate{0%{transform:scale(1.5) skew(1deg,1deg)}30%{transform:scale(1.49) rotate(1deg)}50%{transform:scale(1.48) rotate(2deg) skew(0deg,1deg)}70%{transform:scale(1.49) rotate(1deg)}to{transform:scale(1.5) skew(-1deg,0deg)}}@media (min-width:700px){.row{flex-direction:column}.heading{letter-spacing:1.7em;text-indent:1.5em}.hero-text{font-size:30px}.mainnavi{display:block}#about{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;grid-template-areas:"about1 about2" "about3 about4";grid-gap:3%}#about div:first-of-type{grid-area:about1;justify-self:center;align-self:center}#about div:nth-of-type(2){grid-area:about2;align-self:center}#about div:nth-of-type(3){grid-area:about3;align-self:center}#about div:nth-of-type(4){grid-area:about4}#about div .letter{font-size:7.5em;padding:10px;float:left;height:80px;position:relative;top:55px}#about div object{position:relative;opacity:1;left:0}.page .page-content{flex-direction:row}}@media (min-width:1000px){.bg-top{background:var(--color2) url(/img/hero1.webp) top no-repeat}}.locale-changer select{background:none;border:none;color:#fff;text-transform:uppercase}.locale-changer select option{background:#000;border:none;text-transform:uppercase}.lang-enter-active,.lang-leave-active{transition:opacity .5s}.lang-enter,.lang-leave-to{opacity:0}.mainnavi{display:none}.mainnavi p{letter-spacing:10px}@-webkit-keyframes qwe{0%{opacity:0}to{opacity:1}}@keyframes qwe{0%{opacity:0}to{opacity:1}}@media (min-width:700px){.mainnavi{display:block}.sidedrawer{display:none}}.acc-enter[data-v-f35bb782]{max-height:0;opacity:0}.acc-enter-active[data-v-f35bb782],.acc-leave-active[data-v-f35bb782]{transition:1s ease}.acc-enter-to[data-v-f35bb782]{max-height:100vh;opacity:1}.acc-leave[data-v-f35bb782]{max-height:100vh}.acc-leave-to[data-v-f35bb782]{max-height:0;opacity:0}.accordion[data-v-f35bb782]{background-color:transparent;font-family:Roboto,sans-serif;letter-spacing:10pt;color:#fff;cursor:pointer;width:100%;border:none;border-bottom:1px solid #444;text-align:left;outline:none;font-size:15px;transition:.4s;padding:5px 0;margin-bottom:10px}.accordion i[data-v-f35bb782]{float:right}.accordion[data-v-f35bb782]:after{font-family:Material Icons;content:"expand_more";color:#fff;font-weight:700;float:right;margin-left:5px}.active[data-v-f35bb782]:after{content:"expand_less"}.panel[data-v-f35bb782]{width:95%}.page-nav[data-v-52dc53f0]{position:fixed;top:50%;left:-10px;cursor:pointer;transform:rotate(90deg);background:none;border:none;color:#fff;transition:all .2s ease}.page-nav[data-v-52dc53f0]:hover{font-size:120%;transition:all .2s ease}.slider{background:#459;position:relative;height:500px;width:50vw}.slider div{position:absolute;z-index:10;transform:translate(-50%,50%)}.slider div h1{font-size:5em}.slider ul{position:relative;height:100%;width:100%}.slider ul li img{position:absolute;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:top;object-position:top}.slider ul li img .current{z-index:10}.slider ol{display:flex;position:absolute;bottom:10px;right:10px}.slider ol li{background:#fff;height:20px;width:3px;margin-left:5px}.hiding{display:none}.notfound[data-v-325be99e]{display:flex;width:100%;height:100vh;justify-content:center;justify-self:center;align-self:center;align-content:center}.notfound h6[data-v-325be99e]{font-size:2em}.notfound section[data-v-325be99e]{position:relative;max-width:500px;height:500px;align-self:center}.notfound section img[data-v-325be99e]{width:200px;position:absolute;left:-150px;top:-50px;z-index:-1;opacity:.1}.notfound section a[data-v-325be99e]{color:#555}.notfound section a[data-v-325be99e]:hover{color:#fff}.page-projects{padding:5vh;overflow:hidden;max-width:1280px;margin:0 auto;display:flex;flex-direction:column}.page-projects img{width:100%;height:auto}.page-projects .p-intro{display:flex;flex-direction:column}.page-projects section{padding:10% 0}.page-projects video{width:100%}.page-projects p{padding:20px 0}.device-preview{background-image:url(/img/projects/mobile.svg);background-size:100% auto;display:block;height:463px;width:261px;margin:0 auto;padding:75px 19px 76px 19px;cursor:none}.device-preview div{overflow-y:scroll;-webkit-overflow-scrolling:touch;height:100%}