.header{box-shadow:0 0 12px 0 #13162c;position:fixed;width:100%;background-color:#25283d;z-index:1000}.header .inner{display:flex;justify-content:space-between;align-items:center;width:90%;margin:0 auto;padding:34px 0}.logo h1{font-size:1.8rem}.logo h1 a{color:#fff}.logo h1 a span{font-size:1rem}.nav ul{display:flex;align-items:center}.nav ul li{padding:0 40px}.nav ul li a{color:#fff;font-weight:600}@media screen and (max-width:640px){.header .inner{flex-direction:column;grid-gap:20px;gap:20px;padding:15px 0}}.top-page{display:flex;justify-content:center;align-items:center;height:100%}.top-page .inner{padding:0 20px}.top-page .inner h2{color:#fff;text-align:center;font-size:4.4rem}@media screen and (max-width:640px){.top-page .inner h2{font-size:2.4rem}}.profile_wrap{width:100vw;height:100vh;color:#fff;padding:0 20px}.profile_inner,.profile_wrap{display:flex;justify-content:center;align-items:center}.profile_inner{background-color:#25283d;box-shadow:0 0 12px 0 rgb(19 22 44);border-radius:15px;padding:50px}.profile_image{max-width:400px;padding-right:50px}.profile_image img{height:400px;border-radius:50%;object-fit:cover}.profile_text h2{font-size:2rem}.profile_text dl{line-height:35px}.profile_text dt{font-size:1.2rem;padding-bottom:20px}@media screen and (max-width:768px){.profile_inner{flex-direction:column;padding:30px}.profile_text h2{font-size:1.2rem}.profile_text dt{font-size:1rem}.profile_text dd{font-size:.9rem}.profile_image{width:200px;padding-right:0}.profile_image img{height:200px}}@media screen and (max-width:375px){.profile_wrap{display:block}}.skill_wrap{width:100vw;height:100vh;padding:60px 20px 0}.skill_inner{display:flex;justify-content:center;align-items:center}.skill_image{width:130px;margin-right:50px}.skill_bar{position:relative;border-radius:30px;overflow:hidden;border:5px solid #fff;background-color:transparent;box-shadow:0 0 5px 2px rgb(147 147 147)}.skill_bar,.skill_bar:before{max-width:500px;width:100%;height:50px}.skill_bar:before{position:absolute;content:"";top:0;left:-100%}.html.skill_bar:before{background:linear-gradient(90deg,#ffe665,#ff9a00 52%,#ff9500);-webkit-animation-name:html;animation-name:html;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes html{0%{left:-100%}to{left:-10%}}@keyframes html{0%{left:-100%}to{left:-10%}}.css.skill_bar:before{background:linear-gradient(90deg,#7eefff,#76d9ff 50%,#19acff);-webkit-animation-name:css;animation-name:css;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes css{0%{left:-100%}to{left:-20%}}@keyframes css{0%{left:-100%}to{left:-20%}}.js.skill_bar:before{background:linear-gradient(90deg,#fffe7e,#fffd5d 50%,#f6eb00);-webkit-animation-name:js;animation-name:js;-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes js{0%{left:-100%}to{left:-60%}}@keyframes js{0%{left:-100%}to{left:-60%}}.react.skill_bar:before{background:linear-gradient(90deg,#fff,#76ffd9 50%,#48ffcc);-webkit-animation-name:react;animation-name:react;-webkit-animation-duration:4s;animation-duration:4s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes react{0%{left:-100%}to{left:-70%}}@keyframes react{0%{left:-100%}to{left:-70%}}.wp.skill_bar:before{background:linear-gradient(90deg,#a0d7ff,#5b92b9 50%,#0064ad);-webkit-animation-name:wp;animation-name:wp;-webkit-animation-duration:5s;animation-duration:5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes wp{0%{left:-100%}to{left:-50%}}@keyframes wp{0%{left:-100%}to{left:-50%}}@media screen and (max-width:768px){.skill_wrap{display:flex;flex-direction:column;justify-content:center;padding-top:0}}@media screen and (max-width:375px){.skill_wrap{display:block;padding-top:30px}.skill_image{margin-right:20px}}.about{display:flex;justify-content:center;width:100vw;height:100vh;overflow-x:scroll}.scroll-horizontal{overflow-x:auto!important}.work{width:300vw;justify-content:center}.work,.work_inner{height:100vh;display:flex;align-items:center}.work_inner{justify-content:space-around}.portfolio{position:relative;max-width:400px;border-radius:30px}.portfolio a:hover .portfolio_image,.portfolio a:hover .portfolio_text{transition:.3s ease-out;box-shadow:0 0 12px 3px rgb(19 22 44)}.portfolio a:hover .portfolio_image{-webkit-transform:rotateY(90deg);transform:rotateY(90deg)}.portfolio a:hover .portfolio_text{transition:1s ease;-webkit-transform:rotate3d(0,0,0,0deg);transform:rotate3d(0,0,0,0deg);opacity:1;visibility:visible}.portfolio_image{border-radius:30px;transition:.3s ease-out}.portfolio_image img{height:300px;object-fit:cover;border-radius:30px}.portfolio_text{position:absolute;grid-gap:10px;gap:10px;width:100%;height:100%;top:0;left:0;-webkit-transform:rotateY(180deg);transform:rotateY(180deg);opacity:0;visibility:hidden}.portfolio_mobile_text,.portfolio_text{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;color:#fff;background-color:#25283d;border-radius:30px}.portfolio_mobile_text{box-shadow:0 0 12px 3px rgb(19 22 44);margin-top:20px}.portfolio_mobile_text h3{font-size:16px}.portfolio_mobile_text p{font-size:14px}@media screen and (max-width:1024px){.work_inner{justify-content:flex-start;grid-gap:40px;gap:40px}}@media screen and (max-width:768px){.work{justify-content:space-between}.work_inner{padding-bottom:100px}.portfolio{min-width:250px}.portfolio_image img{height:200px}}
/*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */html.has-scroll-smooth{overflow:hidden}html.has-scroll-dragging{-webkit-user-select:none;-ms-user-select:none;user-select:none}.has-scroll-smooth body{overflow:hidden}.has-scroll-smooth [data-scroll-container]{min-height:100vh}[data-scroll-direction=horizontal] [data-scroll-container]{height:100vh;display:inline-block}[data-scroll-direction=horizontal] [data-scroll-section]{display:inline-block;vertical-align:top;white-space:nowrap;height:100%}.c-scrollbar{position:absolute;right:0;top:0;width:11px;height:100%;-webkit-transform-origin:center right;transform-origin:center right;transition:opacity .3s,-webkit-transform .3s;transition:transform .3s,opacity .3s;transition:transform .3s,opacity .3s,-webkit-transform .3s;opacity:0}.c-scrollbar:hover{-webkit-transform:scaleX(1.45);transform:scaleX(1.45)}.c-scrollbar:hover,.has-scroll-dragging .c-scrollbar,.has-scroll-scrolling .c-scrollbar{opacity:1}[data-scroll-direction=horizontal] .c-scrollbar{width:100%;height:10px;top:auto;bottom:0;-webkit-transform:scaleY(1);transform:scaleY(1)}[data-scroll-direction=horizontal] .c-scrollbar:hover{-webkit-transform:scaleY(1.3);transform:scaleY(1.3)}.c-scrollbar_thumb{position:absolute;top:0;right:0;background-color:#000;opacity:.5;width:7px;border-radius:10px;margin:2px;cursor:grab}.has-scroll-dragging .c-scrollbar_thumb{cursor:grabbing}[data-scroll-direction=horizontal] .c-scrollbar_thumb{right:auto;bottom:0}.particle{position:absolute;top:0;left:0;width:100%;z-index:0}#tsparticles,.particle{height:100%}*,:after,:before{margin:0;padding:0;box-sizing:border-box}::-webkit-scrollbar{display:none}img{max-width:100%;vertical-align:bottom}a{text-decoration:none}ul li{list-style:none}.App{background-color:#25283d;font-family:"游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic",sans-serif}.container{position:relative;height:100vh;z-index:0;padding-top:115px;overflow-y:hidden;overflow-x:scroll}
/*# sourceMappingURL=main.942c0beb.chunk.css.map */