*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,h5,p,figure,blockquote,ul,ol,li,dl,dd{margin:0;padding:0}ul[role=list],ol[role=list]{list-style:none}li{list-style-type:none}body{min-height:100vh;line-height:1.5}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes scrolltab{from{transform:translateX(0)}to{transform:translateX(-235%)}}@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-211%)}}@keyframes scrollrest{from{transform:translateX(0)}to{transform:translateX(-300%)}}@keyframes scroll1600{from{transform:translateX(0)}to{transform:translateX(-180%)}}.header{position:fixed;width:100%;top:0;right:0;z-index:7;padding:30px 24px;transition:.3s}.header__container{display:flex;justify-content:space-between;align-items:center}@media screen and (min-width: 1024px){.header__container{padding:20px 2%}}@media screen and (min-width: 1024px){.header__logo{background:url(../images/logo_header_PC.png) center/cover;width:60px;height:48px}}@media screen and (min-width: 1024px){.header__logoimg{display:none}}.header__link{display:block;width:100%;height:100%}@media screen and (min-width: 1024px){.header__link{padding:25px}}.btn{position:relative;display:flex;justify-content:center;align-items:center;width:50px;height:50px;z-index:1;cursor:pointer}.btn__top,.btn__middle,.btn__bottom{position:absolute;display:block;width:80%;height:3px;background:#fff;transition:.4s}.btn__top{transform:translateY(-16px)}.btn__bottom{transform:translateY(16px)}.gnav{position:absolute;top:0;right:0;z-index:0;background:rgba(0,0,0,.8);width:100%;height:100dvh;transform:translateX(120%);transition:.5s}@media screen and (min-width: 1024px){.gnav{top:20px;right:20px;width:480px;height:80dvh;border-radius:20px}}.gnav__line1,.gnav__line2{background:#fff;width:100%;height:1px}.gnav__line1{position:absolute;top:105px}.gnav__nav{padding:180px 0 100px 10%}.gnav__nav .gnav__list{font-size:34px;padding:20px 0;transition:.3s}.gnav__nav .gnav__list:nth-of-type(1)::after{content:"自己紹介";width:auto;height:auto;font-size:14px;color:#fff;margin-left:20px}.gnav__nav .gnav__list:nth-of-type(2)::after{content:"作品紹介";width:auto;height:auto;font-size:14px;color:#fff;margin-left:20px}.gnav__nav .gnav__list:nth-of-type(3)::after{content:"スキル紹介";width:auto;height:auto;font-size:14px;color:#fff;margin-left:20px}.gnav__nav .gnav__list:nth-of-type(4)::after{content:"コンタクト";width:auto;height:auto;font-size:14px;color:#fff;margin-left:20px}.gnav__link{text-decoration:none;color:#fff}.gnav__link:hover{color:#5e5e5e;transition:.3s}.gnav__deco{font-size:40px;text-align:center;color:#fff}.modal__container01,.modal__container02,.modal__container03{display:none;position:fixed;top:0;left:0;z-index:10;background:rgba(0,0,0,.5);width:100%;height:100dvh}.modal__wrap{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;background:#fff;width:80%;height:90vh;display:block}@media screen and (min-width: 1024px){.modal__wrap{display:flex;align-items:center;width:95%;height:95vh;gap:100px;padding-left:7%}}.modal__ttl{padding:30px 0}@media screen and (min-width: 1024px){.modal__ttl{font-size:32px;padding:50px 0}}.modal__exp{display:none}@media screen and (min-width: 1024px){.modal__exp{display:block;width:68%;padding-bottom:50px}}.modal__nav{padding-bottom:5px}.modal__box1{margin-left:5%}@media screen and (min-width: 1024px){.modal__box1{width:60%}}@media screen and (min-width: 1300px){.modal__box1{width:35%}}.modal__navbox{font-size:14px;padding-bottom:15px}.modal__list{font-weight:bold;font-size:14px}@media screen and (min-width: 800px){.modal__list{font-size:18px}}@media screen and (min-width: 1024px){.modal__list{font-size:20px}}.modal__ans{font-size:14px}@media screen and (min-width: 800px){.modal__ans{font-size:18px}}@media screen and (min-width: 1024px){.modal__ans{font-size:20px}}.modal .color{width:250px;height:21px}@media screen and (min-width: 800px){.modal .color{width:320px;height:27px}}@media screen and (min-width: 1024px){.modal .color{width:300px;height:30px}}@media screen and (min-width: 1400px){.modal .color{width:350px;height:30px}}.modal__ansimg1{width:100%;height:100%}@media screen and (min-width: 800px){.modal__ansimg1{background:url(../images/CN15_color_800.png) center/cover}}@media screen and (min-width: 1024px){.modal__ansimg1{background:url(../images/CN15_color_1024.png) center/cover}}@media screen and (min-width: 1400px){.modal__ansimg1{background:url(../images/CN15_color_1400.png) center/cover}}.modal__ansimg2{width:100%;height:100%}@media screen and (min-width: 800px){.modal__ansimg2{background:url(../images/WSS_color_800.png) center/cover}}@media screen and (min-width: 1024px){.modal__ansimg2{background:url(../images/WSS_color_1024.png) center/cover}}@media screen and (min-width: 1400px){.modal__ansimg2{background:url(../images/WSS_color_1400.png) center/cover}}.modal__ansimg3{width:100%;height:100%}@media screen and (min-width: 800px){.modal__ansimg3{background:url(../images/KMM_color_800.png) center/cover}}@media screen and (min-width: 1024px){.modal__ansimg3{background:url(../images/KMM_color_1024.png) center/cover}}@media screen and (min-width: 1400px){.modal__ansimg3{background:url(../images/KMM_color_1400.png) center/cover}}.modal__pic{width:72%;margin:0 auto 2%}@media screen and (min-width: 800px){.modal__pic{width:55%}}@media screen and (min-width: 1024px){.modal__pic{width:90%;margin:140px auto}}@media screen and (min-width: 1300px){.modal__pic{margin:100px auto}}@media screen and (min-width: 1700px){.modal__pic{width:100%;margin:70px auto}}.modal__img{background:center/cover;width:100%;height:100%;aspect-ratio:150/100}@media screen and (min-width: 1024px){.modal__img{aspect-ratio:800/660}}.modal__btn{font-size:28px;display:flex;justify-content:center;align-items:center;gap:5px}@media screen and (min-width: 1024px){.modal__btn{display:block;font-size:40px}}.modal__link{display:flex;justify-content:end;align-items:center;gap:5px;text-decoration:none;color:#000;transition:.3s}@media screen and (min-width: 1024px){.modal__link{margin-right:100px}.modal__link:hover{color:#dadada}.modal__link:hover .modal__icon{border-color:#dadada}.modal__link:hover .modal__icon:after{border-left:10px solid #dadada}}.modal__icon{position:relative;display:flex;justify-content:center;align-items:center;width:30px;aspect-ratio:1/1;border-radius:50%;border:1px solid #000;transition:.3s}.modal__icon:after{content:"";display:block;position:absolute;width:0;height:0;border-style:solid;border-top:3px solid rgba(0,0,0,0);border-bottom:3px solid rgba(0,0,0,0);border-left:10px solid #000;border-right:0;transition:.3s}.footer{width:100%;background:#595959;overflow:hidden;padding:50px 0}@media screen and (min-width: 1500px){.footer__container{display:flex;justify-content:space-between;align-items:center;padding:50px 5%}}.footer__ttl{font-size:32px;font-weight:normal;line-height:.95;color:#fff;text-align:center}@media screen and (min-width: 1024px){.footer__ttl{font-size:72px}}.footer__nav{padding:50px 0}.footer__nav{display:flex;justify-content:space-evenly;align-items:center}@media screen and (min-width: 1500px){.footer__nav{gap:80px}}@media screen and (min-width: 1024px){.footer__list{font-size:32px}}.footer__link{color:#fff;text-decoration:none}.footer__link:hover{color:#000;transition:.3s}.footer__box{display:flex;justify-content:space-between;align-items:end;padding:0 5%}@media screen and (min-width: 1024px){.footer__logopic{background:url(../images/logo_PC_white.png) center/cover;width:231px;height:56px}}@media screen and (min-width: 1024px){.footer__logoimg{display:none}}.footer__copy{font-size:8px;color:#fff}@media screen and (min-width: 1024px){.footer__copy{font-size:14px}}#top{font-family:"Forum",serif;font-weight:normal}#top .mv{position:relative;background:url(../images/bgsp.svg) center/cover;width:100%;height:839px;color:#000;margin-bottom:50px}@media screen and (min-width: 1024px){#top .mv{background:url(../images/FVbg_PC.svg) center/cover;width:100%;height:1739px}}#top .mv::after{content:"";display:block;position:absolute;z-index:2;top:640px;left:0;width:100%;height:201px;background:linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%)}@media screen and (min-width: 1024px){#top .mv::after{top:1540px}}#top .mv__img{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;mix-blend-mode:multiply;-o-object-fit:cover;object-fit:cover}#top .mv__ttl{position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;margin:auto;display:flex;justify-content:center;text-align:center;font-size:90px;line-height:.8em;font-weight:normal;padding:150px 0 40px;color:#fff}@media screen and (min-width: 768px){#top .mv__ttl{font-size:160px}}@media screen and (min-width: 1024px){#top .mv__ttl{font-size:250px;line-height:.75em}}#top .mv__logo2{display:none;font-size:36px;color:#fff}@media screen and (min-width: 1024px){#top .mv__logo2{display:block;position:absolute;top:780px;left:40px;z-index:4}}#top .mv__scroll{position:relative;z-index:1;top:420px;right:0;display:block;width:122px;height:264px;margin-left:auto;overflow:hidden}@media screen and (min-width: 1024px){#top .mv__scroll{top:680px;right:3%}}#top .mv__line{margin:0 auto;display:block;width:1px;height:110px;background:linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%)}#top .mv__circle{width:100px;height:100px;font-size:12px}#top .mv__txt{fill:#0089a7}#top .mv__svg{overflow:visible;animation:rotate 5s infinite linear}#top .mv__path{fill:none}#top .mv__allow{position:absolute;top:150px;right:45px;width:30px;height:40px}#top .mv__allowimg{width:100%;height:100%}#top .profile{position:relative;padding:0 20%;margin-bottom:100px}@media screen and (min-width: 1024px){#top .profile{padding:0 10%;top:-250px;z-index:2;padding-bottom:0}}@media screen and (min-width: 1024px){#top .profile__container{padding:0 5%}}#top .profile__ttl{position:relative;font-size:40px;font-weight:normal;letter-spacing:-0.02em;padding-bottom:20px;padding-bottom:54px}@media screen and (min-width: 1024px){#top .profile__ttl{position:relative;font-size:72px;font-weight:normal;letter-spacing:-0.02em;padding-bottom:100px;color:#fff}}@media screen and (min-width: 1500px){#top .profile__ttl{left:110px}}#top .profile__ttl::before{content:"";position:absolute;top:-11px;left:-40px;z-index:-1;background:url(../images/sec_circle.svg) center/cover;display:block;width:191px;height:76px}@media screen and (min-width: 1024px){#top .profile__ttl::before{background:url(../images/sec_circle_PC_white.svg);width:350px;height:158px;top:-23px;left:-100px}}#top .profile__ttl::after{content:"自己紹介";position:absolute;top:30px;right:0;font-size:16px;font-weight:normal;display:flex}@media screen and (min-width: 1024px){#top .profile__ttl::after{top:90px;left:250px;font-size:18px}}#top .profile__container2{margin:0 auto}#top .profile__img{background:url(../images/profile_sp.png);width:248px;height:248px;display:flex;justify-content:center;margin-bottom:30px}@media screen and (min-width: 1024px){#top .profile__img{position:absolute;top:0px;right:10%;z-index:0;background:url(../images/profile.png) center/cover;width:500px;height:500px}}@media screen and (min-width: 1500px){#top .profile__img{right:13%}}@media screen and (min-width: 1500px){#top .profile__container,#top .profile__container2{padding-left:10%}}#top .profile__name{font-size:22px;padding-bottom:20px}@media screen and (min-width: 1024px){#top .profile__name{font-size:36px;padding-bottom:40px}}#top .profile__name::after{content:"Yusuke Yasuda";font-size:13px;padding-left:15px}@media screen and (min-width: 1024px){#top .profile__name::after{font-size:16px;padding-left:20px;letter-spacing:.1em}}#top .profile__txt{font-size:14px;width:100%;line-height:2}@media screen and (min-width: 1024px){#top .profile__txt{font-size:18px;width:32%}}#top .profile__container3{display:none}@media screen and (min-width: 1024px){#top .profile__container3{position:relative;display:block;margin:500px 0 100px}}@media screen and (min-width: 1500px){#top .profile__container3{margin:300px 0 100px}}@media screen and (min-width: 1024px){#top .profile__img1{position:absolute;top:15%;left:0;display:block;background:url(../images/pf1.png) center/cover;width:300px;height:250px}}@media screen and (min-width: 1500px){#top .profile__img1{left:-10%}}@media screen and (min-width: 1024px){#top .profile__img2{position:absolute;top:-75%;left:22%;z-index:auto;display:block;background:url(../images/pf2.png) center/cover;width:400px;height:300px}}@media screen and (min-width: 1024px)and (min-width: 1500px){#top .profile__img2{top:-30%}}@media screen and (min-width: 1024px){#top .profile__img3{display:block;background:url(../images/pf3.png) center/cover;width:400px;height:530px;margin-left:auto}}#top .works{position:relative;padding:100px 0}#top .works__view{position:absolute;left:0px;top:-30px;z-index:-3;background:linear-gradient(90deg, rgba(245, 229, 204, 0.5) 31.73%, rgba(245, 229, 204, 0) 100%);width:100%;height:120vh}#top .works__container{padding:0 20%}@media screen and (min-width: 1024px){#top .works__container{display:flex;gap:5%;align-items:center;padding:0 1% 50px 17%}}#top .works__ttl{position:relative;font-size:40px;font-weight:normal;letter-spacing:-0.02em;padding-bottom:20px}@media screen and (min-width: 1024px){#top .works__ttl{position:relative;font-size:72px;font-weight:normal;letter-spacing:-0.02em}}#top .works__ttl::before{content:"";position:absolute;top:-11px;left:-40px;z-index:-1;background:url(../images/sec_circle.svg) center/cover;display:block;width:191px;height:76px}@media screen and (min-width: 1024px){#top .works__ttl::before{top:-18px;left:-95px;background:url(../images/sec_circle_1024.svg);width:349px;height:138px}}#top .works__ttl::after{content:"作品紹介";position:absolute;top:30px;right:0;font-size:16px;font-weight:normal;display:flex}@media screen and (min-width: 1024px){#top .works__ttl::after{display:none}}#top .works__group{display:flex;flex-direction:column;align-items:baseline;padding-left:10%}#top .works__sub{display:none}@media screen and (min-width: 1024px){#top .works__sub{display:block;padding-bottom:30px;font-size:18px}}#top .works__subttl{font-size:20px;line-height:1.5;letter-spacing:.05em;padding-bottom:30px}@media screen and (min-width: 1500px){#top .works__subttl{font-size:30px}}#top .works__ttltxt{padding:40px 0 50px;width:100%;font-size:14px;line-height:2;width:100%}@media screen and (min-width: 1024px){#top .works__ttltxt{font-size:18px;width:38%;padding-left:10px}}#top .works__box{padding:50px 20%}#top .works__box:nth-of-type(1){background:#dac2a7;width:100%}@media screen and (min-width: 1024px){#top .works__box:nth-of-type(1){width:88%;margin-left:auto;padding:50px 0 50px 5%}}#top .works__box:nth-of-type(2){background:#b0d7c9;width:100%}@media screen and (min-width: 1024px){#top .works__box:nth-of-type(2){width:88%;margin-left:auto;padding:50px 0 50px 5%}}#top .works__box:nth-of-type(3){background:#8dafbe;width:100%;margin-bottom:100px}@media screen and (min-width: 1024px){#top .works__box:nth-of-type(3){width:88%;margin-left:auto;padding:50px 0 50px 5%}}#top .works__link2{text-decoration:none;color:#000}#top .works__link2:hover{background-color:hsla(0,0%,100%,.4)}#top .works__minibox{position:relative;padding-bottom:112px;padding-bottom:14px}#top .works__number{font-size:16px}@media screen and (min-width: 1024px){#top .works__number{font-size:28px;padding-bottom:25px}}#top .works__workttl{font-size:32px;font-weight:normal;letter-spacing:-0.02em;line-height:.95;padding-bottom:5px}@media screen and (min-width: 1024px){#top .works__workttl{width:calc(100% - 55.5vw);font-size:60px;padding-bottom:15px}}@media screen and (min-width: 1500px){#top .works__workttl{font-size:80px}}#top .works__jap{font-size:12px;padding-bottom:30px}@media screen and (min-width: 1024px){#top .works__jap{font-size:20px;width:240px;padding-bottom:0}}@media screen and (min-width: 1024px){#top .works__line{background:#000;width:1px;height:100px;margin:30px 0}}#top .works__pic{display:block;width:100%;height:100%;aspect-ratio:247/164}@media screen and (min-width: 1024px){#top .works__pic{position:absolute;right:0;top:-50px;width:55.5vw;height:auto;aspect-ratio:1065/650}}#top .works__img{background:center/cover;max-width:100%;display:block;width:100%;height:100%}#top .works__txt{padding:40px 0;width:100%;font-size:14px;line-height:2}@media screen and (min-width: 1024px){#top .works__txt{width:calc(160% - 55.5vw);font-size:16px}}@media screen and (min-width: 1500px){#top .works__txt{width:calc(96% - 55.5vw);font-size:16px;padding:0}}#top .works__btn{font-size:28px;display:flex;justify-content:center;align-items:center;gap:5px;cursor:pointer}@media screen and (min-width: 1024px){#top .works__btn{font-size:40px;justify-content:end;transition:.3s;margin:0 3% 0 auto}#top .works__btn:hover{color:#dadada}#top .works__btn:hover .works__icon{border-color:#dadada}#top .works__btn:hover .works__icon:after{border-left:10px solid #dadada}}#top .works__link{display:flex;justify-content:end;align-items:center;gap:5px;text-decoration:none;color:#000;transition:.3s}@media screen and (min-width: 1024px){#top .works__link{margin-right:100px}#top .works__link:hover{color:#dadada}#top .works__link:hover .works__icon{border-color:#dadada}#top .works__link:hover .works__icon:after{border-left:10px solid #dadada}}#top .works__icon{position:relative;display:flex;justify-content:center;align-items:center;width:30px;aspect-ratio:1/1;border-radius:50%;border:1px solid #000;transition:.3s}#top .works__icon:after{content:"";display:block;position:absolute;width:0;height:0;border-style:solid;border-top:3px solid rgba(0,0,0,0);border-bottom:3px solid rgba(0,0,0,0);border-left:10px solid #000;border-right:0;transition:.3s}#top .works__container3{background:#fff}#top .rest{display:flex;justify-content:center;align-items:center;background:url(../images/restbg_sp.svg) center/cover;background-attachment:scroll;width:100%;height:350px;overflow:hidden;margin-bottom:70px}@media screen and (min-width: 1024px){#top .rest{background:url(../images/restbg_PC.svg) center/cover;width:100%;height:700px;margin-bottom:200px}}#top .rest__txt{display:flex;justify-content:center;align-items:center;color:#fff;font-size:50px;white-space:nowrap;width:950px;margin-left:110%;animation:scrollrest 25s linear infinite}@media screen and (min-width: 1024px){#top .rest__txt{height:700px;font-size:160px;margin-left:215%}}@media screen and (min-width: 1500px){#top .rest__txt{margin-left:165%}}#top .skills{background:url(../images/skills_bg_sp.png);padding-bottom:710px}@media screen and (min-width: 1024px){#top .skills{background:url(../images/skills_bg_PC.png) center/cover;width:100%;height:auto;padding-bottom:850px}}#top .skills__container{padding:0 20%}@media screen and (min-width: 1024px){#top .skills__container{display:flex;justify-content:space-between;align-items:center;padding:0 7% 165px}}@media screen and (min-width: 1500px){#top .skills__container{padding:0 13% 165px 20%}}#top .skills__ttl{position:relative;font-size:40px;font-weight:normal;letter-spacing:-0.02em;padding-bottom:20px}@media screen and (min-width: 1024px){#top .skills__ttl{position:relative;font-size:72px;font-weight:normal;letter-spacing:-0.02em}}#top .skills__ttl::before{content:"";position:absolute;top:-11px;left:-40px;z-index:-1;background:url(../images/sec_circle.svg) center/cover;display:block;width:191px;height:76px}@media screen and (min-width: 1024px){#top .skills__ttl::before{content:"";background:url(../images/sec_circle_1024.svg) center/cover;width:300px;height:114px;left:-65px}}@media screen and (min-width: 1500px){#top .skills__ttl::before{content:"";background:url(../images/sec_circle_pc.svg) center/cover;width:349px;height:138px;left:-110px}}#top .skills__ttl::after{content:"スキル紹介";position:absolute;top:30px;right:0;font-size:16px;font-weight:normal;display:flex}@media screen and (min-width: 1024px){#top .skills__ttl::after{display:none}}@media screen and (min-width: 1024px){#top .skills__group1{display:flex;flex-direction:column;align-items:baseline}}@media screen and (min-width: 1024px){#top .skills__group2{width:40%}}#top .skills__sub{display:none}@media screen and (min-width: 1024px){#top .skills__sub{font-size:18px;padding-bottom:50px;display:block}}#top .skills__subttl{font-size:20px;line-height:1.5;letter-spacing:.05em;padding-bottom:30px}@media screen and (min-width: 1500px){#top .skills__subttl{font-size:30px}}#top .skills__ttltxt{padding-bottom:50px}@media screen and (min-width: 1024px){#top .skills__ttltxt{font-size:18px;line-height:2}}#top .skills__container2{display:flex;flex-direction:column;justify-content:space-evenly;padding:0 5%}@media screen and (min-width: 1024px){#top .skills__box{display:flex;justify-content:space-evenly;align-items:center}}#top .skills__minibox{display:flex;justify-content:space-evenly;align-items:center;padding-bottom:40px}#top .skills__img1{background:url(../images/HTML.png) center/cover;display:block;width:150px;height:150px;-o-object-fit:cover;object-fit:cover}@media screen and (min-width: 1024px){#top .skills__img1{background:url(../images/HTML1024.png);position:relative;display:block;width:300px;height:300px;-o-object-fit:cover;object-fit:cover}#top .skills__img1:hover{background:url(../images/HTML_hov1024.png) center/cover;width:300px;height:300px;transition:.5s}#top .skills__img1:hover::after{content:"構造を意識したHTMLでWebサイトを制作することができます。";position:absolute;top:40%;left:29%;width:140px;height:80px;font-size:18px;color:#fff;display:flex;justify-content:center;align-items:center}}@media screen and (min-width: 1600px){#top .skills__img1{background:url(../images/HTML.png);position:relative;display:block;width:470px;height:470px;-o-object-fit:cover;object-fit:cover}#top .skills__img1:hover{background:url(../images/HTML_hov.png) center/cover;display:block;width:470px;height:470px;transition:.5s}#top .skills__img1:hover::after{content:"構造を意識したHTMLでWebサイトを制作することができます。";position:absolute;top:43%;left:26%;width:250px;height:80px;line-height:1.5;font-size:18px;color:#fff;display:flex;justify-content:center;align-items:center}}#top .skills__img2{background:url(../images/CSS_sp.png) center/cover;display:block;width:150px;height:150px;-o-object-fit:cover;object-fit:cover}@media screen and (min-width: 1024px){#top .skills__img2{background:url(../images/CSS1024.png) center/cover;position:relative;display:block;width:300px;height:300px;-o-object-fit:cover;object-fit:cover}#top .skills__img2:hover{background:url(../images/CSS_hov1024.png) center/cover;display:block;width:300px;height:300px;transition:.5s}#top .skills__img2:hover::after{content:"レスポンシブ対応を含め、デザインを正確に再現し運用しやすい実装に貢献します。";position:absolute;top:40%;left:29%;width:140px;height:80px;font-size:18px;color:#fff;display:flex;justify-content:center;align-items:center}}@media screen and (min-width: 1600px){#top .skills__img2{background:url(../images/CSS.png);position:relative;display:block;width:470px;height:470px;-o-object-fit:cover;object-fit:cover}#top .skills__img2:hover{background:url(../images/CSS_hov.png) center/cover;display:block;width:470px;height:470px;transition:.5s}#top .skills__img2:hover::after{content:"レスポンシブ対応を含め、デザインを正確に再現し運用しやすい実装に貢献します。";position:absolute;top:43%;left:26%;width:250px;height:80px;line-height:1.5;font-size:18px;color:#fff;display:flex;justify-content:center;align-items:center}}#top .skills__img3{background:url(../images/jQuery_sp.png) center/cover;display:block;width:150px;height:150px;-o-object-fit:cover;object-fit:cover}@media screen and (min-width: 1024px){#top .skills__img3{background:url(../images/jQuery1024.png) center/cover;position:relative;display:block;width:300px;height:300px;-o-object-fit:cover;object-fit:cover}#top .skills__img3:hover{background:url(../images/jQuery_hov1024.png) center/cover;display:block;width:300px;height:300px;transition:.5s}#top .skills__img3:hover::after{content:"クリックやスクロールなどの動きを実装し、ユーザー操作に応じたUIを構築することができます。";position:absolute;top:40%;left:29%;width:140px;height:80px;font-size:18px;color:#fff;display:flex;justify-content:center;align-items:center}}@media screen and (min-width: 1600px){#top .skills__img3{background:url(../images/jQuery.png);position:relative;display:block;width:470px;height:470px;-o-object-fit:cover;object-fit:cover}#top .skills__img3:hover{background:url(../images/jQuery_hov.png) center/cover;display:block;width:470px;height:470px;transition:.5s}#top .skills__img3:hover::after{content:"クリックやスクロールなどの動きを実装し、ユーザー操作に応じたUIを構築することができます。";position:absolute;top:43%;left:26%;width:250px;height:80px;line-height:1.5;font-size:18px;color:#fff;display:flex;justify-content:center;align-items:center}}#top .skills__img4{background:url(../images/Sass_sp.png) center/cover;display:block;width:150px;height:150px;-o-object-fit:cover;object-fit:cover}@media screen and (min-width: 1024px){#top .skills__img4{background:url(../images/Sass1024.png) center/cover;position:relative;display:block;width:300px;height:300px;-o-object-fit:cover;object-fit:cover}#top .skills__img4:hover{background:url(../images/Sass_hov1024.png) center/cover;display:block;width:300px;height:300px;transition:.5s}#top .skills__img4:hover::after{content:"共通化や変数管理により、スタイル調整を素早く行うことができます。";position:absolute;top:40%;left:29%;width:140px;height:80px;font-size:18px;color:#fff;display:flex;justify-content:center;align-items:center}}@media screen and (min-width: 1600px){#top .skills__img4{background:url(../images/Sass.png);position:relative;display:block;width:470px;height:470px;-o-object-fit:cover;object-fit:cover}#top .skills__img4:hover{background:url(../images/Sass_hov.png) center/cover;display:block;width:470px;height:470px;transition:.5s}#top .skills__img4:hover::after{content:"共通化や変数管理により、スタイル調整を素早く行うことができます。";position:absolute;top:43%;left:26%;width:250px;height:80px;line-height:1.5;font-size:18px;color:#fff;display:flex;justify-content:center;align-items:center}}#top .skills__img5{background:url(../images/Photoshop_sp.png) center/cover;display:block;width:150px;height:150px;-o-object-fit:cover;object-fit:cover}@media screen and (min-width: 1024px){#top .skills__img5{background:url(../images/Photoshop1024.png) center/cover;position:relative;display:block;width:300px;height:300px;-o-object-fit:cover;object-fit:cover}#top .skills__img5:hover{background:url(../images/Photoshop_hov1024.png) center/cover;display:block;width:300px;height:300px;transition:.5s}#top .skills__img5:hover::after{content:"画像加工やサイズ調整、トリミング、色味補正などWeb制作で必要な画像を生成することができます。";position:absolute;top:40%;left:29%;width:140px;height:80px;font-size:18px;color:#fff;display:flex;justify-content:center;align-items:center}}@media screen and (min-width: 1600px){#top .skills__img5{background:url(../images/Photoshop.png);position:relative;display:block;width:470px;height:470px;-o-object-fit:cover;object-fit:cover}#top .skills__img5:hover{background:url(../images/Photoshop_hov.png) center/cover;display:block;width:470px;height:470px;transition:.5s}#top .skills__img5:hover::after{content:"画像加工やサイズ調整、トリミング、色味補正などWeb制作で必要な画像を生成することができます。";position:absolute;top:43%;left:26%;width:250px;height:80px;line-height:1.5;font-size:18px;color:#fff;display:flex;justify-content:center;align-items:center}}#top .skills__img6{background:url(../images/XD_sp.png) center/cover;display:block;width:150px;height:150px;-o-object-fit:cover;object-fit:cover}@media screen and (min-width: 1024px){#top .skills__img6{background:url(../images/XD1024.png) center/cover;position:relative;display:block;width:300px;height:300px;-o-object-fit:cover;object-fit:cover}#top .skills__img6:hover{background:url(../images/XD_hov1024.png) center/cover;display:block;width:300px;height:300px;transition:.5s}#top .skills__img6:hover::after{content:"ワイヤーフレームからデザインカンプのまで一貫して作成することができます。";position:absolute;top:40%;left:29%;width:140px;height:80px;font-size:18px;color:#fff;display:flex;justify-content:center;align-items:center}}@media screen and (min-width: 1600px){#top .skills__img6{background:url(../images/XD.png);position:relative;display:block;width:470px;height:470px;-o-object-fit:cover;object-fit:cover}#top .skills__img6:hover{background:url(../images/XD_hov.png) center/cover;display:block;width:470px;height:470px;transition:.5s}#top .skills__img6:hover::after{content:"ワイヤーフレームからデザインカンプのまで一貫して作成することができます。";position:absolute;top:43%;left:26%;width:250px;height:80px;line-height:1.5;font-size:18px;color:#fff;display:flex;justify-content:center;align-items:center}}#top .skills__img7{background:url(../images/Figma_sp.png) center/cover;display:block;width:150px;height:150px;-o-object-fit:cover;object-fit:cover}@media screen and (min-width: 1024px){#top .skills__img7{background:url(../images/Figma1024.png) center/cover;position:relative;display:block;width:300px;height:300px;-o-object-fit:cover;object-fit:cover}#top .skills__img7:hover{background:url(../images/Figma_hov1024.png) center/cover;display:block;width:300px;height:300px;transition:.5s}#top .skills__img7:hover::after{content:"XDと同じくワイヤーレームからデザインカンプまで一貫して作成することができます。";position:absolute;top:40%;left:29%;width:140px;height:80px;font-size:18px;color:#fff;display:flex;justify-content:center;align-items:center}}@media screen and (min-width: 1600px){#top .skills__img7{background:url(../images/Figma.png);position:relative;display:block;width:470px;height:470px;-o-object-fit:cover;object-fit:cover}#top .skills__img7:hover{background:url(../images/Figma_hov.png) center/cover;display:block;width:470px;height:470px;transition:.5s}#top .skills__img7:hover::after{content:"XDと同じくワイヤーレームからデザインカンプまで一貫して作成することができます。";position:absolute;top:43%;left:26%;width:250px;height:80px;line-height:1.5;font-size:18px;color:#fff;display:flex;justify-content:center;align-items:center}}#top .skills__img8{background:url(../images/VSCode_sp.png) center/cover;display:block;width:150px;height:150px;-o-object-fit:cover;object-fit:cover}@media screen and (min-width: 1024px){#top .skills__img8{background:url(../images/VSCode1024.png) center/cover;position:relative;display:block;width:300px;height:300px;-o-object-fit:cover;object-fit:cover}#top .skills__img8:hover{background:url(../images/VSCode_hov1024.png) center/cover;display:block;width:300px;height:300px;transition:.5s}#top .skills__img8:hover::after{content:"Web制作におけるコーディング環境として使用しています。";position:absolute;top:40%;left:29%;width:140px;height:80px;font-size:18px;color:#fff;display:flex;justify-content:center;align-items:center}}@media screen and (min-width: 1600px){#top .skills__img8{background:url(../images/VSCode.png);position:relative;display:block;width:470px;height:470px;-o-object-fit:cover;object-fit:cover}#top .skills__img8:hover{background:url(../images/VSCode_hov.png) center/cover;display:block;width:470px;height:470px;transition:.5s}#top .skills__img8:hover::after{content:"Web制作におけるコーディング環境として使用しています。";position:absolute;top:43%;left:26%;width:250px;height:80px;line-height:1.5;font-size:18px;color:#fff;display:flex;justify-content:center;align-items:center}}#top .skills__img9{background:url(../images/Git_sp.png) center/cover;display:block;width:150px;height:150px;-o-object-fit:cover;object-fit:cover}@media screen and (min-width: 1024px){#top .skills__img9{background:url(../images/Git1024.png) center/cover;position:relative;display:block;width:300px;height:300px;-o-object-fit:cover;object-fit:cover}#top .skills__img9:hover{background:url(../images/Git_hov1024.png) center/cover;display:block;width:300px;height:300px;transition:.5s}#top .skills__img9:hover::after{content:"GitHub Desktopを使用し、個人のバージョン管理行うことができます。";position:absolute;top:40%;left:29%;width:140px;height:80px;font-size:18px;color:#fff;display:flex;justify-content:center;align-items:center}}@media screen and (min-width: 1600px){#top .skills__img9{background:url(../images/Git.png);position:relative;display:block;width:470px;height:470px;-o-object-fit:cover;object-fit:cover}#top .skills__img9:hover{background:url(../images/Git_hov.png) center/cover;display:block;width:470px;height:470px;transition:.5s}#top .skills__img9:hover::after{content:"GitHub Desktopを使用し、個人のバージョン管理行うことができます。";position:absolute;top:43%;left:26%;width:250px;height:80px;line-height:1.5;font-size:18px;color:#fff;display:flex;justify-content:center;align-items:center}}#top .skills__skltxt{width:43%;font-size:14px}@media screen and (min-width: 1024px){#top .skills__skltxt{display:none}}#top .contact{position:relative;z-index:2;overflow:hidden;background:url(../images/contactbg_sp.png) center top/cover;width:100%;height:421px;margin-top:-700px}@media screen and (min-width: 1024px){#top .contact{background:url(../images/contactbg_PC.png) center top/cover;width:100%;height:744px;margin-top:-700px}}#top .contact__line{background:linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);width:1px;height:110px;margin:10px auto 45px}@media screen and (min-width: 1024px){#top .contact__line{height:220px;margin:10px auto 82px}}#top .contact__txt{font-size:16px;line-height:1.5;text-align:center;width:250px;color:#fff;padding-bottom:35px;margin:0 auto}@media screen and (min-width: 1024px){#top .contact__txt{font-size:24px;width:655px}}#top .contact__btn{display:flex;justify-content:center;align-items:center;width:320px;height:70px;margin:0 auto;background:#fff;border-radius:70px;font-size:30px;margin-bottom:56px;transition:.3s}@media screen and (min-width: 1024px){#top .contact__btn{width:830px;height:130px;font-size:80px;margin-bottom:126px}}#top .contact__btn:hover{background:#828282;transition:.3s}#top .contact__link{padding:20px 38%;text-decoration:none;color:#000}#top .contact__link:hover{color:#fff;transition:.3s}#top .contact__deco{font-size:45px;white-space:nowrap;padding-left:100%;animation:scrolltab 25s linear infinite}@media screen and (min-width: 1024px){#top .contact__deco{font-size:100px;animation:scroll 25s linear infinite}}@media screen and (min-width: 1600px){#top .contact__deco{animation:scroll1600 25s linear infinite}}#top .contmv{position:relative;background:url(../images/contactMV_sp.svg) center/cover;width:100%;height:371px;margin-bottom:120px}@media screen and (min-width: 1024px){#top .contmv{background:url(../images/contactMV_PC.svg) center/cover;height:708px;margin-bottom:0}}#top .contmv::after{content:"";position:absolute;top:273px;display:block;width:100%;height:100px;background:linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%)}@media screen and (min-width: 1024px){#top .contmv::after{top:610px}}#top .contmv__ttl{position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;font-size:80px;font-weight:normal;color:#fff}@media screen and (min-width: 1024px){#top .contmv__ttl{font-size:180px}}#top .form{position:relative;margin:0 auto}#top .form__exp{position:absolute;top:-140px;right:0;bottom:0;left:0;width:80%;font-size:16px;line-height:1.8;margin:0 auto}@media screen and (min-width: 1024px){#top .form__exp{position:static;width:100%;font-size:20px;line-height:1.5;margin-bottom:125px}}@media screen and (min-width: 1024px){#top .form__group{display:flex;margin-left:15%;margin-bottom:150px}}#top .form__container1{display:flex;justify-content:center;align-items:center;margin-bottom:70px}@media screen and (min-width: 1024px){#top .form__container1{display:block;width:300px;padding:30px 0}}#top .form__bigbox{display:flex;justify-content:center;align-items:center}@media screen and (min-width: 1024px){#top .form__bigbox{display:block;width:300px;margin:0 auto}}#top .form__box1,#top .form__box2{position:relative;display:block}@media screen and (min-width: 1024px){#top .form__box1,#top .form__box2{display:flex;justify-content:center;align-items:center;gap:30px;margin:10px 0}}#top .form__shape1,#top .form__shape2{display:flex;justify-content:center;align-items:center;width:50px;height:40px;border-radius:50px;font-size:18px;margin-bottom:8px}@media screen and (min-width: 1024px){#top .form__shape1,#top .form__shape2{height:40px;gap:30px}}#top .form__shape1{background:#8dbed3}#top .form__shape2{background:#aaa}#top .form__item{display:flex;justify-content:center;align-items:center}#top .form__linebox{display:flex;justify-content:center;align-items:stretch;height:25px;padding:0 10px}@media screen and (min-width: 1024px){#top .form__linebox{position:relative;flex-direction:column;align-items:center;width:50px;height:auto;padding:10px 0}}#top .form__line{background:#0572a1;display:block;width:30px;height:1px;display:flex;justify-content:center;align-items:center}@media screen and (min-width: 1024px){#top .form__line{position:absolute;top:-10px;left:117px;width:1px;height:30px}}#top .form__container2{margin:0 auto 80px}@media screen and (min-width: 1024px){#top .form__container2{width:70%;margin:0;padding-left:6%}}#top .form__inputbox{display:block;width:80%;margin:0 auto 24px}@media screen and (min-width: 1024px){#top .form__inputbox{margin-bottom:50px}}#top .form__label{display:block;font-size:16px;margin-bottom:10px}@media screen and (min-width: 1024px){#top .form__label{font-size:20px}}#top .form__label::after{content:"※必須";padding-left:5px;font-size:8px;color:red}@media screen and (min-width: 1024px){#top .form__label::after{font-size:14px}}#top .form__input{background:#e6e6e6;width:100%;height:50px;border:none}@media screen and (min-width: 1024px){#top .form__input{height:70px}}#top .form__message{background:#e6e6e6;width:100%;height:200px;border:none}@media screen and (min-width: 1024px){#top .form__message{height:380px;margin-bottom:100px}}#top .form__btnbox{width:185px;height:53px;margin:0 auto}@media screen and (min-width: 1024px){#top .form__btnbox{width:386px;height:88px;font-size:24px}}#top .form__submit{background:#85b6d2;width:100%;height:100%;border-radius:50px;border:none}#top .worksmv{position:relative;background:url(../images/MV_workmv_sp.png) center/cover;width:100%;height:568px;margin-bottom:286px}@media screen and (min-width: 1024px){#top .worksmv{background:url(../images/workMV__PC.png) center/cover;width:100%;height:895px;margin-bottom:100px}}#top .worksmv::after{content:"";position:absolute;top:314px;display:block;width:100%;height:254px;background:linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%)}@media screen and (min-width: 1024px){#top .worksmv::after{top:640px}}#top .worksmv__ttl{position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;font-size:80px;display:flex;justify-content:center;align-items:center;color:#fff;font-weight:normal}@media screen and (min-width: 1024px){#top .worksmv__ttl{font-size:180px;top:-250px}}#top .list{margin:0 auto}#top .list__txt{position:absolute;top:430px;right:0;left:0;bottom:0;width:77%;margin:0 auto;font-size:16px;line-height:2}@media screen and (min-width: 768px){#top .list__txt{font-size:18px}}@media screen and (min-width: 1024px){#top .list__txt{width:46%;top:650px}}#top .list__container:last-child{padding-bottom:65px}@media screen and (min-width: 1024px){#top .list__container:last-child{padding-bottom:185px}}@media screen and (min-width: 768px){#top .list__container{display:flex;justify-content:space-between;padding:0 2%}}@media screen and (min-width: 1200px){#top .list__container{padding:0 8% 140px}}#top .list__box{width:300px;margin:0 auto;padding-bottom:35px}@media screen and (min-width: 1100px){#top .list__box{width:500px;margin:0}}@media screen and (min-width: 1700px){#top .list__box{width:700px}}#top .list__pic{width:300px;height:208px}@media screen and (min-width: 1100px){#top .list__pic{width:500px;height:357px}}@media screen and (min-width: 1700px){#top .list__pic{width:700px;height:500px}}#top .list__img{width:100%;height:100%;transition:.3s}#top .list__img:hover{box-shadow:0px 0px 15px 2px rgba(0,0,0,.5);transform:scale(0.9);transition:.3s}#top .list__exp1,#top .list__exp2,#top .list__exp3,#top .list__exp4,#top .list__exp5,#top .list__exp6{font-size:17px}@media screen and (min-width: 1200px){#top .list__exp1,#top .list__exp2,#top .list__exp3,#top .list__exp4,#top .list__exp5,#top .list__exp6{font-size:28px}}@media screen and (min-width: 1700px){#top .list__exp1,#top .list__exp2,#top .list__exp3,#top .list__exp4,#top .list__exp5,#top .list__exp6{font-size:32px}}#top .list__exp1::after,#top .list__exp2::after,#top .list__exp3::after{content:"(レスポンシブ非対応)";display:block;font-size:12px;line-height:0}@media screen and (min-width: 1200px){#top .list__exp1::after,#top .list__exp2::after,#top .list__exp3::after{font-size:17px}}@media screen and (min-width: 1700px){#top .list__exp1::after,#top .list__exp2::after,#top .list__exp3::after{font-size:18px}}#top .list .comming_soon{pointer-events:none}#top .thanksmv{position:relative;background:url(../images/contactMV_sp.svg) center/cover;width:100%;height:371px}@media screen and (min-width: 1024px){#top .thanksmv{background:url(../images/contactMV_PC.svg) center/cover;height:708px;margin-bottom:250px}}#top .thanksmv::after{content:"";position:absolute;top:273px;display:block;width:100%;height:100px;background:linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%)}@media screen and (min-width: 1024px){#top .thanksmv::after{top:610px}}#top .thanksmv__ttl{position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;font-size:80px;font-weight:normal;color:#fff}@media screen and (min-width: 1024px){#top .thanksmv__ttl{font-size:180px}}@media screen and (min-width: 1024px){#top .thanks__container{display:flex;flex-direction:row-reverse;justify-content:space-around;align-items:center;margin-bottom:300px}}#top .thanks__exp{font-size:20px;display:flex;justify-content:center;align-items:center}@media screen and (min-width: 1024px){#top .thanks__exp{font-size:30px}}#top .thanks__bigbox{display:flex;justify-content:center;align-items:center;margin:80px 0}@media screen and (min-width: 1024px){#top .thanks__bigbox{display:block;width:300px;margin:0}}#top .thanks__box1,#top .thanks__box2{position:relative;display:block}@media screen and (min-width: 1024px){#top .thanks__box1,#top .thanks__box2{display:flex;justify-content:center;align-items:center;gap:30px;margin:10px 0}}#top .thanks__shape{display:flex;justify-content:center;align-items:center;width:50px;height:40px;border-radius:50px;font-size:18px;margin-bottom:8px}@media screen and (min-width: 1024px){#top .thanks__shape{height:40px;gap:30px}}#top .thanks__shape{background:#8dbed3}#top .thanks__item{display:flex;justify-content:center;align-items:center}@media screen and (min-width: 1024px){#top .thanks__item{font-size:20px}}#top .thanks__linebox{display:flex;justify-content:center;align-items:stretch;height:25px;padding:0 10px}@media screen and (min-width: 1024px){#top .thanks__linebox{position:relative;flex-direction:column;align-items:center;width:50px;height:auto;padding:10px 0}}#top .thanks__line{background:#0572a1;display:block;width:30px;height:1px;display:flex;justify-content:center;align-items:center}@media screen and (min-width: 1024px){#top .thanks__line{position:absolute;top:-10px;left:117px;width:1px;height:30px}}#top .thanks__top{font-size:16px;display:flex;justify-content:center;align-items:center;margin-bottom:130px}@media screen and (min-width: 1024px){#top .thanks__top{font-size:28px;margin-bottom:300px}}#top .thanks__link{color:#000}.rotateTop{transform:rotate(45deg)}.hideMiddle{transform:translateX(120%);opacity:0;pointer-events:none}.rotateBottom{transform:rotate(-45deg)}.translateNav{transform:translate(0)}.resizeHeader{background:rgba(150,150,150,.5);transition:.3s;height:14%;border-radius:0 0 50px 50px}/*# sourceMappingURL=style.css.map */