@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap";@import"https://fonts.googleapis.com/css?family=Anton&display=swap";@import"https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap";body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans JP,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.main-view{color:#fff;width:90%;max-width:1500px;min-width:300px;margin:auto}.profile .row{display:grid;font-size:2em;grid-template-columns:7em 1fr;margin:1.5rem 0}.profile .row .small{font-size:.8em}.profile .row__en{transform:scale(.7);transform-origin:top left;color:#d0d0d0}@media screen and (max-width: 768px){.profile .row{display:block}.profile .row>div:not(.row__title){padding-left:1em}}.skill-contents{display:flex;justify-content:left;flex-direction:column}.other-skills{display:flex;flex-direction:row;justify-content:flex-start;margin:0 -1rem;flex-wrap:wrap}.other-skill{display:flex;flex-direction:row;align-items:center;align-content:center;background-color:#f3f0f0;padding:1.5rem 3rem;margin:1.5rem 1rem;color:#000;border-radius:2rem;flex-wrap:wrap}.other-skill__image{max-height:150px}.other-skill__text{margin:0 .4em;font-size:3.6rem}.devices{display:flex;justify-content:flex-start;flex-wrap:wrap;margin:-.5rem}.contact-email,.contact-twitter{display:inline-flex;align-items:center;background-color:#eee;padding:1em;border-radius:10px;text-decoration:none;margin:.5rem 1rem;flex-wrap:wrap;border-bottom:solid 4px #666666}.contact-email__icon,.contact-twitter__icon{margin:0 1em;width:60px}.contact-email__address,.contact-twitter__address{color:#000;font-size:1.7rem;margin:0 1em}.contact-email:active,.contact-twitter:active{-webkit-transform:translateY(4px);transform:translateY(4px);border-bottom:none;border-top:solid 4px transparent}.experience{font-size:24px;line-height:1.4;padding-bottom:16px}.experience a{color:inherit}.life__wrap{background:#404040;padding:14px 0;font-size:18px}.life__year{display:inline-block;background:#9090f0;font-size:20px;padding:8px 16px 8px 32px;margin-bottom:12px}.life .life-content__wrap{position:relative;margin:0 16px 16px 60px;display:flex;background:#fff;padding:.8em}.life .life-content__date{position:absolute;display:flex;width:110px;height:1.7em;background:#ff6c00;font-size:1.1em;align-items:center;justify-content:center;left:0;top:0;font-weight:700}.life .life-content p{margin:unset;padding-left:110px;color:#000}@media screen and (max-width: 768px){.life .life-content p{padding-left:0;padding-top:1.8em}}.main-view-content{width:100%;padding:5rem 0}.main-view-content__title{font-size:4em;font-family:Anton,sans-serif;margin-bottom:1rem}.main-view-content__content{padding-left:3em}@media screen and (max-width: 512px){.main-view-content__content{padding-left:0}}.skill-box{display:grid;align-items:center;background-color:#f3f0f0;padding:1rem 1.5rem;margin:1.5rem 0;color:#000;border-radius:2rem;grid-template-rows:min-content auto 2rem;grid-template-columns:150px 14rem 1fr;grid-template-areas:"lang-image lang-name comment   " "lang-image lang-name frameworks" "lang-image since     frameworks"}@media screen and (max-width: 768px){.skill-box{grid-template-rows:1fr 2rem auto min-content;grid-template-columns:150px 1fr;grid-template-areas:"lang-image lang-name" "lang-image since" "comment    comment" "frameworks frameworks"}}@media screen and (max-width: 512px){.skill-box{grid-template-columns:1fr;grid-template-rows:auto auto auto 0 auto;grid-template-areas:"lang-image" "lang-name" "since" "comment" "frameworks"}}.skill-box__lang-image{grid-area:lang-image;width:150px}@media screen and (max-width: 512px){.skill-box__lang-image{margin:0 auto}}.skill-box__lang-name{grid-area:lang-name;text-align:center}@media screen and (max-width: 768px) and (min-width: 512px){.skill-box__lang-name{max-width:14rem}}.skill-box__since{grid-area:since;font-size:1.5rem;text-align:center}@media screen and (max-width: 768px) and (min-width: 512px){.skill-box__since{max-width:14rem}}.skill-box__comment{font-size:1.2em;grid-area:comment}@media screen and (max-width: 768px){.skill-box__comment{padding:1em 0}}@media screen and (max-width: 512px){.skill-box__comment{display:none}}.skill-box .framework-list{grid-area:frameworks;display:flex;flex-direction:row;flex-wrap:wrap}.skill-box .framework-list .framework-item{display:flex;flex-direction:row;padding:.3em 1em;margin:.3em .4em;text-align:center;align-items:center;border:1px solid #888888;border-radius:25px;background-color:#fff5f0;font-size:1.3rem}.skill-box .framework-list .framework-item__image{height:1.6em}.skill-box .framework-list .framework-item__text{margin-left:.6em}.device{width:max-content;margin:1rem;padding:1.5em 2em 1.5em 1.5em;border-radius:12px;color:#000;background:#f3f0f0}.device__name{font-size:2.4rem;font-weight:700}.device-row{display:flex;padding:.5em 0 0 .5em;font-size:1.8em}.device-row__title{width:3em;padding:0 .3em}.wrapper{width:100%;height:100%;background-color:#15151c}.top{display:flex;flex-direction:column;justify-content:center;width:100%;height:100vh;align-items:center;background-color:#25252c;color:#ddddd7}@media screen and (min-width: 513px){.top__sp{display:none}}.elements{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}.elements__icon{width:170px;height:170px;border-radius:100%}.elements__name{font-family:Source Sans Pro,sans-serif;margin:0 1em;line-height:170px;font-size:4rem}.footer{background-color:#25252c;color:#ddddd7;text-align:center;padding:3em 0}.triangle{margin-top:10rem;height:70px;width:70px;border-bottom:3px #DDDDD7 solid;border-right:3px #DDDDD7 solid;transform:rotate(45deg)}