*{box-sizing:border-box}body{font-family:Inter,Noto Sans JP,sans-serif;background-color:#fff;margin:0;overflow-x:hidden;width:100%}.header{width:100%;position:sticky;top:0;z-index:100;background-color:#ffffffb3;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}.header-content{display:flex;margin:0 auto;max-width:700px;height:75px;padding:0 20px;align-items:center}.yoanz-link{text-decoration:none;display:flex;align-items:center}.yoanz{color:#000;margin:0;font-family:Geist Mono,Inter,Noto Sans JP,sans-serif;line-height:1}.nav{margin-left:auto;display:flex;align-items:center}.nav-item{margin-left:20px}.nav-item :hover{color:#6f6f6f}.nav-a{color:#6f6f6f;text-decoration:none}.nav-b{color:#000;text-decoration:none}.Footer{width:100%;max-width:700px;padding:0 20px;margin:155px auto 0}.Footer2{display:flex;margin:0}.sns{margin:auto 0 auto auto;padding:0;height:24px}.icon{color:#000;margin:auto auto auto 15px}.FooterTitle{margin:0;font-family:Source Code Pro,Inter,Noto Sans JP,sans-serif}.copyright{margin-top:60px;font-size:.8rem;color:#b4b4b4}.workItem{background-color:#fafafa;border:2px solid #e4e4e4;width:100%;padding:15px;border-radius:10px;margin:0 auto}.workImg{width:100%;height:auto;border-radius:6px;border:2px solid #e4e4e4}.work-title{margin:15px 0 7px;color:#000}.work-title:hover{text-decoration:underline}.work-detail{margin:0;color:#000}.workLink{text-decoration:none}.BlogItem{border:2px solid #e4e4e4;background-color:#fafafa;border-radius:10px;margin-bottom:15px;padding:15px;text-decoration:none;color:#000}.BlogItemLink{text-decoration:none}.blog-title{margin:0 0 10px}.blog-title:hover{text-decoration:underline}.blog-date{margin:0}.home{width:100%;max-width:700px;padding:0 20px;margin:0 auto}.title{font-size:60px;margin:0 0 10px;font-family:Geist Mono,Inter,Noto Sans JP,sans-serif;border-right:4px solid #000000;animation:blinking .8s steps(2) infinite;width:fit-content;max-width:100%}@media (max-width: 600px){.title{font-size:32px}}.title.animation-done{border-color:transparent;animation:none}.titleText{padding-right:1px;border-right:2px solid #000000;animation:blinking .8s steps(2) infinite;width:fit-content;max-width:100%}.titleText.animation-done{border-color:transparent;animation:none}.ime-active{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:#000}@keyframes blinking{0%,to{border-color:transparent}50%{border-color:#000}}.about-sec{margin:15px 0 0;height:calc(100vh - 105px);display:flex;align-items:center}.about-sec-2{transform:translateY(-55px)}.about-sec p{margin:0}.button-sec{display:flex;margin-top:50px;flex-wrap:wrap;gap:15px}.button1{border-radius:8px;padding:15px;text-decoration:none;background-color:#000;border:2px solid #000000;color:#fff}.button2{border:2px solid #4a4a4a;border-radius:8px;padding:15px;text-decoration:none;color:#000}.button3{border:2px solid #7b7b7b;border-radius:800px;padding:15px;text-decoration:none;color:#000;transition:.2s cubic-bezier(.45,0,.55,1)}.viewALLWorksButton{width:fit-content;margin:35px auto 0}.workItemList{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;max-width:700px;width:100%;margin:0 auto}.workItemList>.fade-in-up-element{width:100%;display:flex;justify-content:center}@media (min-width: 700px){.workItemList>.fade-in-up-element{width:calc(50% - 10px);max-width:340px}}.worksTitle{margin:2.5px 0 20px;font-family:Geist Mono,Inter,Noto Sans JP,sans-serif}.blogTitle{margin:115px 0 20px;font-family:Geist Mono,Inter,Noto Sans JP,sans-serif}.fade-in-up-element{opacity:0;transform:translateY(20px);transition:opacity 1.5s cubic-bezier(.19,1,.22,1),transform 1.5s cubic-bezier(.19,1,.22,1)}.fade-in-up-element.visible{opacity:1;transform:translateY(0)}.button1:hover{background-color:#717171;border-color:#717171}.button2:hover{background-color:#e6e6e6}.button3:hover{background-color:#000;color:#fff;border-color:#000}.about{width:100%;max-width:700px;padding:0 20px;margin:0 auto}.aboutPageText{margin:0}.about-title2{margin-top:70px;font-family:Geist Mono,Inter,Noto Sans JP,sans-serif}.about-title3{font-family:Geist Mono,Inter,Noto Sans JP,sans-serif;margin:50px 0 20px}.about-title4{font-family:Geist Mono,Inter,Noto Sans JP,sans-serif;margin:50px 0 5px}.takusan{margin:0 0 20px}.skill{display:flex;width:fit-content;height:fit-content;border:3px solid #d2d2d2;border-radius:5px;padding:7px;background-color:#f9f9f9}.colored{margin:auto 6px auto auto;font-size:1.5rem}.skillText{margin:auto 0}.skillSet{display:flex;max-width:700px;flex-wrap:wrap;gap:10px;cursor:pointer}.devicon-tailwindcss-original{font-size:1.4rem;margin-right:4px}.green{border:3px solid #5dff65;background-color:#e2ffdd}.red{border:3px solid #ff5d5d;background-color:#fdd}.Works{width:100%;max-width:700px;padding:0 20px;margin:70px auto 0;font-family:Geist Mono,Inter,Noto Sans JP,sans-serif}.workImg2{width:100%;max-width:300px;height:auto;border-radius:6px;border:2px solid #e4e4e4}.workItem2{display:flex;gap:15px;margin:0 0 15px;border:2px solid #e4e4e4;background-color:#fafafa;border-radius:10px;padding:15px}@media (max-width: 600px){.workItem2{flex-direction:column}.workImg2{max-width:100%}}.workItemText{display:block}.workLink2{text-decoration:none}.workTitle2{margin:0;color:#000}.workTitle2:hover{text-decoration:underline}.workText2{color:#000}.blog{width:100%;max-width:700px;padding:0 20px;margin:70px auto 0}.blogPageTitle{font-family:Geist Mono,Inter,Noto Sans JP,sans-serif}.tagSec{margin-bottom:20px;display:flex;gap:10px}.tagButton{background-color:#f0f0f0;border:2px solid #dcdcdc;padding:5px;border-radius:5px;cursor:pointer}.tagButton:hover{background-color:#dcdcdc}.selected{background-color:#000;border-color:#000;color:#fff;cursor:default}.selected:hover{background-color:#000;border-color:#000;color:#fff}.blogItem2{border:2px solid #e4e4e4;background-color:#fafafa;border-radius:10px;margin-bottom:15px;padding:15px;text-decoration:none;color:#000}.blogLink2{text-decoration:none}.blogTitle2{margin:5px 0 10px;color:#000}.blogTitle2:hover{text-decoration:underline}.blogDate2{margin:0;color:#000}.tag{margin:0;color:#000;padding:5px;background-color:#e4e4e4;border:none;border-radius:5px;cursor:pointer}.tag:hover{background-color:#d9d9d9}.tagList{display:flex;gap:10px}.blogArticle{width:100%;max-width:700px;padding:0 20px;margin:70px auto 0}.blogArticlePageTag{width:fit-content;margin:0;color:#000;padding:5px;background-color:#e4e4e4;border:none;border-radius:5px;cursor:pointer}.tagArea{display:flex;gap:10px;margin-bottom:40px}.blogArticleTitle{margin:0 0 10px}.blogArticleDate{margin:0 0 20px}.worksArticlePage{width:100%;max-width:700px;padding:0 20px;margin:70px auto 0}.worksArticlePageImg{width:100%;max-width:700px;height:auto;border:2px solid #e4e4e4}.worksArticlePageTitle{margin:20px 0 10px}.url{margin:0 0 40px;text-decoration:none;color:#00f}.url:hover{color:#08087c}