*{margin:0;padding:0}*,:after,:before{box-sizing:inherit}html{box-sizing:border-box;color:#848484}body{font-family:Noto Sans JP,Avenir,Helvetica,Arial,sans-serif;line-height:1.6;color:#4b4b4b;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f7fa;background-size:cover;background-repeat:no-repeat}h1{font-size:1.3rem;word-spacing:1.2px}h1,h2{font-weight:500;color:#4b4b4b}h2{font-size:1.1rem}h3{font-weight:400;font-size:1.3rem;color:#4b4b4b}.fade-enter-active,.fade-leave-active{transition:all .4s ease}.fade-enter-from,.fade-leave-to{transform:translateX(-1000px);opacity:0}#app{min-width:80%;margin:4rem}@media (max-width:991.98px){#app{max-width:100%;margin:0}}#nav{display:flex;margin-bottom:5%;justify-content:space-evenly;padding:.5rem 0;flex-wrap:wrap;margin-left:80%;place-items:center;box-shadow:1px 7px 24px rgba(15,14,14,.06);background-color:#fff;border-radius:3rem}@media (max-width:991.98px){#nav{margin:1rem}}@media (min-width:992px) and (max-width:1100px){#nav{margin-left:70%}}@media (min-width:1310px){#nav{margin-left:85%}}.content{display:flex}@media (max-width:991.98px){.content{margin:1rem;flex-direction:column}}@media (max-width:991.98px){.content__profile{display:none}}.profile{min-height:40rem;flex:0 0 25%;margin-right:12%;box-shadow:1px 7px 24px rgba(15,14,14,.06);background-color:#fff;border-radius:1rem}@media (max-width:991.98px){.profile{flex:1;margin:0;margin-bottom:2rem;min-height:unset}}@media (min-width:992px) and (max-width:1100px){.profile{margin-right:10%}}@media (min-width:992px){.contact-router-link{display:none}}.contact{margin:1rem;padding:5rem 1rem 1rem 1rem;box-shadow:1px 7px 24px rgba(15,14,14,.06);background-color:#fff;border-radius:1rem}.contact__items{padding-top:1rem;padding-bottom:3rem}@media (min-width:992px){.contact{display:none}}@media (max-width:991.98px){.large_contact{display:none}}.small_contact{margin-top:2rem;padding:3rem 1rem 1rem 1rem;box-shadow:1px 7px 24px rgba(15,14,14,.06);background-color:#fff;border-radius:0;border-radius:2rem 2rem 0 0}.small_contact__items{padding-bottom:3rem}@media (min-width:992px){.small_contact{display:none}}.projects{min-height:40rem;flex:1}.projects__list{margin-top:1rem;display:flex;justify-content:space-between;flex-wrap:wrap}@media (max-width:991.98px){.projects__list{flex-direction:column}}.about{flex:1;padding:3rem;box-shadow:1px 7px 24px rgba(15,14,14,.06);background-color:#fff;border-radius:1rem}@media (max-width:991.98px){.about{padding:1rem}}@media (max-width:991.98px){#about-profile{display:none}}#nav a{text-align:center;text-decoration:none;padding:.5rem 1rem;color:#4b4b4b}#nav a.router-link-active.router-link-exact-active,#nav a:active,#nav a:hover{background-color:#ffc010;border-radius:3rem;color:#fff}.profile{height:500px;padding:1rem 3rem;display:flex;flex-direction:column;justify-content:space-between}.profile .me{margin-bottom:1.2rem}.profile .me__name{margin-top:.5rem}.profile .me__occupation{font-weight:500;font-size:15px;color:#ffc010}.profile .me__intro{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:1.2rem 0}.profile .me__image{width:5.5rem;height:5.5rem;border-radius:100px;border:4px double #ffc010}.contact,.large_contact,.small_contact{text-align:center}.contact__heading,.large_contact__heading,.small_contact__heading{font-weight:200;font-size:1.3rem}.contact__items,.large_contact__items,.small_contact__items{display:flex;justify-content:space-evenly;margin:1rem}.contact__icon,.large_contact__icon,.small_contact__icon{padding:.6rem 1rem;box-shadow:1px 7px 24px rgba(15,14,14,.06);background-color:#ffc010;border-radius:1rem}.contact__github,.contact__gmail,.contact__linkedin,.large_contact__github,.large_contact__gmail,.large_contact__linkedin,.small_contact__github,.small_contact__gmail,.small_contact__linkedin{width:2rem;height:2rem;fill:#f5f7fa}.contact__legal,.large_contact__legal,.small_contact__legal{margin-top:2rem;font-size:.7rem;color:#848484}.about__detail-title{margin-bottom:1rem}.about__detail-para{padding:1em 0}.about__detailSkills{margin-top:5%;width:70%}@media (max-width:991.98px){.about__detailSkills{width:100%}}@media (min-width:992px) and (max-width:1100px){.about__detailSkills{width:100%}}.about__list{padding:1em;margin:0 1rem;line-height:2}.about__list li{margin-bottom:.5rem}.about__skills{display:flex;justify-content:flex-start;flex-wrap:wrap}.about__skill{margin-bottom:1rem;padding:1rem;list-style:none;flex:0 0 15%;text-align:center;color:#f5f7fa;box-shadow:1px 7px 24px rgba(15,14,14,.06);background-color:#ffc010;border-radius:100px;margin-right:2rem}@media (max-width:991.98px){.about__skill{margin-right:10px}}.project{margin-bottom:1.2rem;padding:.5rem;box-shadow:1px 7px 24px rgba(15,14,14,.06);background-color:#fff;border-radius:1rem}.project__image{width:20rem;height:auto;border-radius:inherit;background-size:cover;background-repeat:no-repeat}@media (max-width:991.98px){.project__image{width:100%;height:20rem}}@media (min-width:992px) and (max-width:1100px){.project__image{width:13rem;height:13rem}}.project__title{margin:10px;text-align:center}.modal{width:100%;height:100vh;background-color:rgba(245,247,250,.8);position:fixed;top:0;left:0;transform:translate(1s);transition:all 4s}.modal__content{padding:1rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30%;box-shadow:1px 7px 24px rgba(15,14,14,.06);background-color:#fff;border-radius:1rem;transition:all 1s}@media (max-width:991.98px){.modal__content{position:absolute;top:40%;left:40%;transform:translate(-40%,-40%);width:90%}}.modal__image{margin:10px 0;width:100%;height:20rem;border-radius:1rem;background-size:cover}.modal__tech{margin-top:2rem}.modal__close{background:transparent;border:none;display:block;width:2em;height:2em;position:absolute;top:-2%;right:-2%;display:inline-block;font-size:1rem;color:#f5f7fa;box-shadow:1px 7px 24px rgba(15,14,14,.06);background-color:#848484;border-radius:10rem}.modal__close:hover{background-color:#4b4b4b}.modal__skills{margin-top:1.2rem;display:flex;justify-content:flex-start;flex-wrap:wrap}.modal__skill{margin-bottom:1rem;padding:1rem;list-style:none;text-align:center;color:#f5f7fa;box-shadow:1px 7px 24px rgba(15,14,14,.06);background-color:#ffc010;border-radius:100px;margin-right:2rem}@media (max-width:991.98px){.modal__skill{margin-right:10px}}