body{font-family:"Mplus 1p", "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;background:#a2acbd;margin:0;text-align:justify;text-justify:inter-ideograph}h2{color:#fff;font-weight:300;margin:0}h3{font-weight:bold}p{font-weight:300}img{width:100%}a{text-decoration:none}section{margin:0 0 30px}header{width:100%;height:100vh;display:table;position:relative;-webkit-animation:huerotator 8s infinite alternate;animation:huerotator 8s infinite alternate}@-webkit-keyframes huerotator{0%{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}100%{-webkit-filter:hue-rotate(360deg);filter:hue-rotate(360deg)}}@keyframes huerotator{0%{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}100%{-webkit-filter:hue-rotate(360deg);filter:hue-rotate(360deg)}}@media (min-width: 550px){.sp{display:none}}.topimg{position:absolute;left:0;width:100%;height:97vh;margin-top:-3vh;background:url("../images/top_img.jpg");background-size:cover;background-position:60%;z-index:-10;opacity:0;-webkit-animation:fadein 10s ease 1s 1 forwards;animation:fadein 10s ease 1s 1 forwards;-webkit-clip-path:polygon(0 20%, 100% 0%, 100% 80%, 0 100%);clip-path:polygon(0 20%, 100% 0%, 100% 80%, 0 100%);padding:40px 0}@media (min-width: 750px){.topimg{top:-10vh;height:110vh}}@media (min-width: 770px){.topimg{background-attachment:fixed}}@-webkit-keyframes fadein{100%{opacity:1}}@keyframes fadein{100%{opacity:1}}.titlearea{display:table-cell;vertical-align:middle}svg{display:block;margin:0 auto;width:100%;height:50vw}@media (min-width: 550px){svg{height:33vw}}@media (min-width: 770px){svg{height:25vw}}.st1{fill:none;stroke:#fff;stroke-dasharray:2000;stroke-dashoffset:0;stroke-width:3;-webkit-animation:hello 4s ease-in 0s;animation:hello 4s ease-in 0s}.st3{opacity:1 !important;fill:rgba(255,255,255,0.5);stroke:rgba(255,255,255,0.5);stroke-dasharray:2000;stroke-dashoffset:0;stroke-width:2;-webkit-animation:hello 1s ease-in 0s;animation:hello 1s ease-in 0s}@-webkit-keyframes hello{0%{stroke-dashoffset:2000;fill:transparent}40%{stroke-dashoffset:2000;fill:transparent}50%{fill:transparent}100%{stroke-dashoffset:0;fill:transparent}}@keyframes hello{0%{stroke-dashoffset:2000;fill:transparent}40%{stroke-dashoffset:2000;fill:transparent}50%{fill:transparent}100%{stroke-dashoffset:0;fill:transparent}}.typewriter h1{font-size:3vw;text-align:center;color:#fff;width:65vw;font-weight:300;overflow:hidden;border-right:.15em solid transparent;white-space:nowrap;margin:0 auto;letter-spacing:.15em;-webkit-animation:typing 3.5s steps(30, end);animation:typing 3.5s steps(30, end)}@media (min-width: 750px){.typewriter h1{font-size:2vw}}@-webkit-keyframes typing{from{width:0}to{width:58vw}}@keyframes typing{from{width:0}to{width:58vw}}.scroll{position:absolute;top:80vh;text-align:center;left:0;right:0;z-index:2;display:inline-block;-webkit-transform:translate(0, -50%);transform:translate(0, -50%);padding-top:40px;color:#fff;font-size:12px;font-size:1.2rem;font-weight:300;opacity:0;-webkit-animation:fadein 3s ease 1s 1 forwards;animation:fadein 3s ease 1s 1 forwards}.scroll span{position:absolute;top:0;left:50%;width:24px;height:24px;margin-left:-12px;border-left:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:sdb 2s infinite;animation:sdb 2s infinite;-webkit-box-sizing:border-box;box-sizing:border-box}@media (max-height: 450px){.scroll{left:auto;right:10px;bottom:10px}}@media (min-width: 750px){.scroll{top:94vh;width:90px;left:auto}}@-webkit-keyframes sdb{0%{-webkit-transform:rotate(-45deg) translate(0, 0)}20%{-webkit-transform:rotate(-45deg) translate(-10px, 10px)}40%{-webkit-transform:rotate(-45deg) translate(0, 0)}}@keyframes sdb{0%{-webkit-transform:rotate(-45deg) translate(0, 0);transform:rotate(-45deg) translate(0, 0)}20%{-webkit-transform:rotate(-45deg) translate(-10px, 10px);transform:rotate(-45deg) translate(-10px, 10px)}40%{-webkit-transform:rotate(-45deg) translate(0, 0);transform:rotate(-45deg) translate(0, 0)}}nav{position:fixed;top:10px;left:10px;z-index:100}nav ul{padding:0;margin:0}nav ul li{display:inline-block}nav ul li a{font-size:12px;font-size:1.2rem;color:#fff;text-decoration:none;text-shadow:2px 2px 0px rgba(162,172,189,0.5);font-weight:300;-webkit-transition:2s;transition:2s;margin-right:10px}.now{display:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.popup-modal{position:relative;display:block;margin:5px 10px 0;overflow:hidden}@media (min-width: 550px){.popup-modal{margin:5px 0 0;width:49.7%;height:30vw}}@media (min-width: 770px){.popup-modal{width:33%;height:20vw}}.popup-modal .overlay{position:absolute;top:0;left:0;display:block;width:100%;height:100%;z-index:998}.popup-modal img{-webkit-transition:1s;transition:1s}.popup-modal span{position:absolute;top:0px;left:0;border:0px solid transparent;-webkit-transition:.5s;transition:.5s;width:100%;height:100%}.popup-modal:hover .overlay{background:rgba(51,51,51,0.5)}.popup-modal:hover img{-webkit-filter:brightness(40%);filter:brightness(40%);-webkit-transform:scale(1.1);transform:scale(1.1)}.popup-modal:hover span{border:1px solid #fff;-webkit-transform:scale(0.9);transform:scale(0.9);z-index:999}.popup-modal:hover:before{content:attr(title);position:absolute;font-size:11px;font-size:1.1rem;width:85%;top:30px;left:30px;color:#fff;z-index:999}.popup-modal:hover:after{content:"more detail";position:absolute;font-weight:100;font-size:20px;font-size:2rem;bottom:30px;color:#fff;text-align:center;width:100%;z-index:999;display:block}.modal{background:#fff;padding:10px;margin:0 auto}.modal h3{font-size:13px;font-size:1.3rem;text-align:center;font-weight:300;margin-top:40px}@media (min-width: 550px){.modal h3{font-size:18px;font-size:1.8rem}}.left{width:100%}@media (min-width: 750px){.left{width:70%}.right{width:30%}.web{width:50%}}.web_flex{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}table{border-bottom:1px solid #333;margin-bottom:30px}table th,table td{font-weight:300}table th{color:rgba(51,51,51,0.5);display:block;width:100%;vertical-align:top;border-top:1px solid #333;padding-top:10px}table td{display:block;width:100%;padding-bottom:10px}@media (min-width: 1100px){table{margin:0 10px}table th,table td{border-top:1px solid #333;display:table-cell}table th{width:20%}table td{width:80%;padding-top:10px}}.center{margin:0 auto;width:100%}@media (min-width: 1100px){.center{width:50%}}.close{color:#a2acbd;display:block;margin:0 auto;width:200px;text-align:center;border:1px solid #a2acbd;padding:10px 0;transition:.5s}.close:hover{color:#fff;background:#a2acbd}.title{display:block;text-align:right;margin-right:10px}.title svg{display:inline;height:70px;width:154px;padding-top:20px}@media (min-width: 750px){.title svg{height:100px;width:220px}}@media (min-width: 750px){.wide{position:relative}.wide h2{position:absolute;bottom:40px;right:240px}}.effect,.effect3{opacity:0}.effect2{opacity:0;-webkit-transform:translateY(-50px);transform:translateY(-50px)}.st2{opacity:1;fill:none;stroke:#fff;stroke-dasharray:2000;stroke-dashoffset:0;stroke-width:3;-webkit-animation:hello 2s ease-in 0s;animation:hello 2s ease-in 0s}g .st2,g .st1{stroke-width:1;fill:#fff}.fadeup{-webkit-animation:fadeup 1s ease-in 1s 1 forwards;animation:fadeup 1s ease-in 1s 1 forwards}@-webkit-keyframes fadeup{from{opacity:0;-webkit-transform:translateY(50px);transform:translateY(50px)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeup{from{opacity:0;-webkit-transform:translateY(50px);transform:translateY(50px)}to{opacity:1;-webkit-transform:none;transform:none}}.narrow{max-width:1000px;margin:0 auto}.narrow .flex{margin:0 10px 20px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.box{background:#333;margin-top:-20px;-webkit-clip-path:polygon(0 20%, 100% 0%, 100% 80%, 0 100%);clip-path:polygon(0 20%, 100% 0%, 100% 80%, 0 100%);padding:40px 0}.about{margin:0 10px 50px;color:#fff}@media (min-width: 770px){.about{-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;writing-mode:vertical-rl;width:60%;height:250px;margin-top:-50px}}svg.skill{margin:0 10px;width:100%;height:200px}svg.skill[title="cording"]{margin:-25px 0;height:260px}@media (min-width: 750px){svg.skill{width:40%;margin:0}}.wrap{margin:0 10px 20px;width:100%}.wrap h3{font-size:20px;font-size:2rem;text-align:center;margin:0 auto;color:#fff;font-weight:300;height:50px}.wrap p{margin:0}@media (min-width: 750px){.wrap{width:60%;margin:0}.wrap h3{text-align:left;margin-top:20px;margin-left:-30px;color:rgba(255,255,255,0.5)}.wrap p{margin-left:-30px}}footer{width:100%;padding:20px 0;text-align:center;background:#333}small{color:#a2acbd}