@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap";.sns{margin-block:90px;scroll-margin-top:80px}.sns .inner{margin:0 auto}.sns .inner h2{text-align:center;font-size:6rem;font-weight:400;margin-bottom:50px}@media screen and (max-width: 768px){.sns .inner h2{font-size:4rem}}.about{margin-block:80px;scroll-margin-top:80px}.about .inner{max-width:1280px;width:100%;padding-inline:40px;margin:0 auto}.about .inner h2{text-align:center;font-size:6rem;font-weight:400;margin-bottom:90px}.about .inner .introduction{display:flex;justify-content:left}.about .inner .introduction .AboutImage{width:300px;height:300px;border-radius:50%;margin-inline:70px}.about .inner .introduction p{font-size:2.4rem}.about .inner .introduction p:nth-child(2){margin-top:40px}@media screen and (max-width: 768px){.about{margin-top:40px}.about .inner{padding-inline:20px}.about .inner h2{font-size:4rem;margin-bottom:4rem}.about .inner .introduction{flex-flow:column;align-items:center}.about .inner .introduction .AboutImage{width:200px;height:200px}.about .inner .introduction p{font-size:1.5rem;margin-top:4rem}}@media screen and (max-width: 452px){.about .inner .introduction p{font-size:1.3rem}}html{font-size:62.5%;box-sizing:border-box;scroll-behavior:smooth;overflow-x:hidden}*,*:before,*:after{box-sizing:inherit;margin:0;padding:0}body{font-family:Noto Sans JP,sans-serif;background-color:#f5f5f5;color:#000;display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden}body nav{color:#707070}body nav ul,body nav ol{list-style:none}body nav ul a,body nav ol a{color:inherit;text-decoration:none}.wrapper{min-height:100vh;display:flex;flex-direction:column}.mainContent{flex:1}footer{margin-top:4rem}footer p{height:80px;width:100%;background-color:#ddd;font-size:20px;display:flex;align-items:center;justify-content:center}.header{background-color:#ddd;width:100%;position:fixed;top:0;z-index:100}.header .inner{margin:0 auto}.header .inner .headerFlex{height:80px;display:flex;justify-content:space-between;align-items:center;padding-inline:40px;max-width:1200px;margin:0 auto}.header .inner .headerFlex .headerImage{width:50px;height:50px;border-radius:50%}.header .inner .headerFlex .navMenu ul{display:flex;gap:30px}.header .inner .headerFlex .navMenu ul li{position:relative;font-size:2rem}.header .inner .headerFlex .navMenu ul li a{color:#000;text-decoration:none}.header .inner .headerFlex .navMenu ul li a:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background-color:#000;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}.header .inner .headerFlex .navMenu ul li a:hover:after{transform:scaleX(1)}.header .inner .headerFlex .hamburger{position:relative;width:30px;height:22px;cursor:pointer;background:none;border:none;z-index:110;display:none}.header .inner .headerFlex .hamburger span,.header .inner .headerFlex .hamburger:before,.header .inner .headerFlex .hamburger:after{content:"";position:absolute;height:2px;width:100%;background-color:#000;transition:all .3s ease;left:0}.header .inner .headerFlex .hamburger span{top:50%;transform:translateY(-50%)}.header .inner .headerFlex .hamburger:before{top:0}.header .inner .headerFlex .hamburger:after{bottom:0}.header .inner .headerFlex .hamburger.open span{opacity:0}.header .inner .headerFlex .hamburger.open:before{top:50%;transform:translateY(-50%) rotate(45deg)}.header .inner .headerFlex .hamburger.open:after{bottom:50%;transform:translateY(50%) rotate(-45deg)}.mobile-nav{position:fixed;top:-100vh;left:0;width:100vw;max-width:100vw;height:60vh;background-color:#ddd;z-index:99;transition:top .4s ease;display:flex;justify-content:center;align-items:center}.mobile-nav ul{list-style:none;text-align:center}.mobile-nav ul li{margin:1.5rem 0}.mobile-nav ul li a{font-size:2rem;text-decoration:none;color:#000;position:relative}.mobile-nav ul li a:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background-color:#000;transition:width .3s ease}.mobile-nav ul li a:hover:after{width:100%}.mobile-nav.show{top:0}@media screen and (max-width: 768px){.header .inner .headerFlex{padding-inline:20px}.header .inner .headerFlex .navMenu{display:none}.header .inner .headerFlex .hamburger{display:block}}@media screen and (min-width: 769px){.mobile-nav{display:none}}.profile{margin-block:80px;background-color:#fff}.profile .inner{margin:0 auto}.profile .inner h2{padding-block:80px;font-size:6rem;text-align:center;font-weight:400;max-width:1200px;margin:0 auto}.profile .inner .iconLists{display:flex;gap:30px;margin-bottom:80px;padding-inline:40px}@media screen and (max-width: 768px){.profile{margin-bottom:40px}.profile .inner h2{font-size:4rem}.profile .inner .iconLists{padding-inline:20px;margin-bottom:40px}}.icon-slider-wrapper{overflow:hidden;max-width:1200px;width:100%;margin:0 auto 80px;position:relative}.icon-slider-wrapper .icon-slider{display:flex;gap:30px;animation:slide 30s linear infinite;will-change:transform;width:fit-content}.icon-slider-wrapper .icon-slider .profileIcon{width:30px;flex-shrink:0}@keyframes slide{0%{transform:translate(0)}to{transform:translate(calc(-50% - 15px))}}.snsIcons{display:flex;justify-content:center;gap:100px}.snsIcons .snsIcon{width:50px;height:50px;transition:transform .3s ease}.snsIcons .snsIcon:hover{transform:translateY(-5px);cursor:pointer}.portfolio-slider{display:flex;justify-content:center;gap:100px}.portfolio-slider .profileIcon{width:400px;height:50px}@media screen and (max-width: 768px){.snsIcons{gap:50px}}.wrapper{display:flex;flex-direction:column;min-height:100vh}.wrapper main{flex:1}.wrapper main .skill{margin-top:80px}.wrapper main .skill .inner{margin:0 auto}.wrapper main .skill .inner .skillTitle{padding-block:80px;font-size:6rem;font-weight:400;text-align:center}.wrapper main .skill .inner .skillCards{display:flex;gap:40px;flex-wrap:wrap;margin-bottom:70px}@media screen and (max-width: 768px){.wrapper main .skill .inner .skillTitle{font-size:4rem;padding-block:4rem}}.skillsCard{width:255px;height:350px;border:solid 3px #707070;border-radius:10px}.skillsCard .skillsCardIcons{width:230px;margin:0 auto}.skillsCard .skillsCardIcons .skillCard_icon{width:230px;height:100px;margin-block:30px 20px}.skillsCard .skillCard_title{position:relative;font-size:2rem;font-weight:400;text-align:center}.skillsCard .skillCard_title:after{content:"";position:absolute;left:50%;transform:translate(-50%);bottom:-20px;width:230px;height:4px;background-color:#707070;border-radius:50px}.skillsCard .skillsClard_text{width:170px;margin:0 auto;font-size:1.4rem;margin-top:3rem}.skill{margin-top:80px}.skill .inner{margin:0 auto}.skill .inner .skillTitle{padding-block:80px;font-size:6rem;font-weight:400;text-align:center}.skill .inner .skillCards{display:flex;gap:20px;flex-wrap:wrap;max-width:1200px;margin:0 auto;padding-inline:30px}@media screen and (max-width: 1200px){.skillCards{justify-content:center}}@media screen and (max-width: 768px){.skill .inner .skillTitle{font-size:4rem;padding-block:4rem}}.skillCard{width:270px;height:350px;border:solid 3px #707070;border-radius:10px}.skillCard .skillCardIcons{width:100px;margin:0 auto}.skillCard .skillCardIcons .skillCard_icon{width:100px;height:100px;margin-block:30px 20px}.skillCard .skillCard_title{position:relative;font-size:2rem;font-weight:400;text-align:center}.skillCard .skillCard_title:after{content:"";position:absolute;left:50%;transform:translate(-50%);bottom:-20px;width:230px;height:4px;background-color:#707070;border-radius:50px}.skillCard .skillCard_level{margin-block:3rem 1rem;font-size:1.5rem;text-align:center}.skillCard .skillCard_level .star{font-size:1.5rem;margin-right:2px;color:#707070}.skillCard .skillCard_level .star.filled{color:#f3bb2d}.skillCard .skillCard_text{width:170px;margin:0 auto;font-size:1.4rem}
