.material-icons{letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;direction:ltr;font-family:Material Icons;font-size:24px;font-style:normal;font-weight:400;line-height:1;display:inline-block}*{box-sizing:border-box;margin:0;padding:0}:root{--main-color:#4a636b;--accent-color:#e7c942}html{scroll-behavior:smooth}body{word-break:break-all;background:#3f5156;font-family:Bruno Ace,sans-serif;position:relative}.wrapper{position:relative;overflow:hidden}.loading{background:var(--accent-color);color:#fff;z-index:1000;opacity:1;justify-content:center;align-items:center;width:100%;height:100vh;font-size:3em;display:flex;position:absolute;top:0;left:0}@media screen and (width<=480px){.loading{font-size:2em}}section{background:#e2e8ea;width:100%;padding:60px 0}section:nth-child(2n),section.contact{background:var(--main-color)!important;background-image:repeating-linear-gradient(#3f5156,#3f5156 1px,#0000 0 64px),repeating-linear-gradient(90deg,#3f5156,#3f5156 1px,#0000 0 64px)!important}section:nth-child(2n) h1,section.contact h1{color:#e2e8ea}section h1{text-align:center;color:var(--main-color);margin-bottom:40px;font-family:Bruno Ace,sans-serif;font-size:3em;font-weight:700}@media screen and (width<=800px){section h1{font-size:1.8em}}.sp{display:none}@media screen and (width<=1000px){.sp{display:block}}header{background:#e2e8ea;width:100%;position:relative}.header-inner{background:#fff;flex-direction:column;justify-content:center;align-items:center;width:100%;height:12vh;padding:20px;display:flex}@media screen and (width<=800px){.header-inner{height:10vh}}.pc-nav{justify-content:space-around;align-items:center;width:100%;display:flex}.pc-nav a{color:var(--main-color);margin:0 8px;padding:10px 20px;font-family:Bruno Ace,sans-serif;text-decoration:none;transition:all .2s;position:relative;overflow:hidden}.pc-nav a:hover{opacity:.8}.pc-nav a.a-nav{display:block}@media screen and (width<=800px){.pc-nav a.a-nav{display:none}}.pc-nav a.a-nav:last-child{background:var(--accent-color);color:#fff}.sp-nav{display:none}@media screen and (width<=800px){.sp-nav{flex-direction:column;justify-content:center;align-items:center;display:flex}}.sp-nav .a-nav{display:none}.sp-nav.panelactive{z-index:998;width:100%;height:100vh;position:fixed;top:0}.sp-nav.panelactive .a-nav{color:#e2e8ea;margin-bottom:50px;text-decoration:none;display:block}.circle{z-index:100;background:var(--main-color);border-radius:50%;width:100px;height:100px;transition:all .6s;position:fixed;bottom:-50px;left:calc(50% - 50px);transform:scale(0)}.circle.circleactive{transform:scale(50)}.open{z-index:998;cursor:pointer;background:var(--accent-color);width:50px;height:50px;padding:10px;display:none;position:fixed;top:10px;right:10px}@media screen and (width<=800px){.open{display:block}}.open span{background:#fff;border-radius:2px;width:45%;height:3px;transition:all .4s;display:inline-block;position:absolute;left:14px}.open span:first-of-type{top:15px}.open span:nth-of-type(2){top:23px}.open span:nth-of-type(3){top:31px}.open.active{background:var(--main-color);z-index:9999!important}.open.active span{background:#fff}.open.active span:first-of-type{width:45%;top:18px;left:14px;transform:translateY(6px)rotate(-45deg)}.open.active span:nth-of-type(2){opacity:0}.open.active span:nth-of-type(3){width:45%;top:30px;left:14px;transform:translateY(-6px)rotate(45deg)}.a-logo{color:var(--main-color);text-align:center;opacity:1;font-family:Bruno Ace,sans-serif;font-size:2em;font-weight:700;text-decoration:none}@media screen and (width<=480px){.a-logo{font-size:1.5em}}.main-box{z-index:1;background:url(../../../image/main-v.jpg) 50%;flex-direction:column;justify-content:center;align-items:center;width:100%;height:88vh;padding:0 5%;font-weight:700;display:flex;position:relative;overflow-y:hidden}@media screen and (width<=800px){.main-box{height:68vh}}.main-read{color:var(--main-color);text-transform:uppercase;text-shadow:4px 8px #e7ecee;margin-left:68px;font-size:5em}@media screen and (width<=800px){.main-read{text-shadow:2px 2px #e7ecee;margin-left:48px;font-size:2.5em}}@media screen and (width<=480px){.main-read{font-size:1.5em}}.sub-read{writing-mode:vertical-lr;background:var(--main-color);color:#e7ecee;text-align:center;height:100%;padding:10px;font-size:2.5em;position:absolute;left:0}@media screen and (width<=800px){.sub-read{font-size:1.8em}}@media screen and (width<=480px){.sub-read{font-size:1.2em}}.scrolldown{animation:1.6s ease-in-out infinite mousemove;position:absolute;bottom:10px;right:50%}.scrolldown:before{content:"";border:1px solid var(--main-color);border-radius:10px;width:25px;height:37px;position:absolute;bottom:0;left:-10px}.scrolldown:after{content:"";border:1px solid var(--main-color);border-radius:50%;width:5px;height:5px;position:absolute;bottom:26px;left:0}.scrolldown span{color:var(--main-color);letter-spacing:.05em;width:50px;font-size:.7rem;position:absolute;bottom:51px;left:-17px}.scrolldown span:after{content:"";background:var(--main-color);opacity:0;width:1px;height:15px;animation:1.4s linear infinite mousepathmove;position:absolute;top:10px;left:20px}@keyframes mousemove{0%{bottom:10px}50%{bottom:5px}to{bottom:10px}}@keyframes mousepathmove{0%{opacity:0;height:0;top:10px}50%{opacity:1;height:15px}to{opacity:0;height:0;top:30px}}main{width:100%}.container{max-width:1440px;margin:0 auto;padding:0 2%}.flex-box{justify-content:space-between;align-items:flex-end;display:flex;position:relative}@media screen and (width<=1000px){.flex-box{flex-direction:column}}.flex-box .about-image{z-index:1;width:60%;height:auto;position:relative}@media screen and (width<=1000px){.flex-box .about-image{width:100%}}.flex-box .about-image img{width:100%;height:auto}.flex-box .about-text{z-index:2;width:45%;color:var(--main-color);background:#fffffff4;padding:20px;position:absolute;bottom:20px;right:0}@media screen and (width<=1000px){.flex-box .about-text{width:100%;position:relative;right:0}}.flex-box .about-text h2{border-bottom:solid 1px var(--main-color);margin-bottom:20px;padding-bottom:5px;font-weight:700}.flex-box .about-text p{margin-bottom:20px;line-height:1.6em}.flex-box .about-text a{background:var(--accent-color);color:#fff;padding:4px 8px;text-decoration:none}.flex-box .about-text a:hover{opacity:.8}.skills-detail{flex-flow:wrap;justify-content:space-between;align-items:flex-start;display:flex}.skills-detail li{justify-content:space-between;align-items:flex-start;width:49%;margin-bottom:40px;display:flex}.skills-detail li:hover img{border-radius:100%;transition:all .3s}@media (width<=800px){.skills-detail li{width:100%}}.skills-detail li .skills-img{width:100px;height:auto;margin-right:20px}@media (width<=800px){.skills-detail li .skills-img{margin-right:2%}}.skills-detail li .skills-img img{object-fit:contain;width:100%;height:auto;transition:all .5s}.skills-detail li .skills-text{color:#e2e8ea;flex:1;width:70%}.skills-detail li .skills-text h2{margin-bottom:10px;line-height:1}@media (width<=480px){.skills-detail li .skills-text h2{font-size:1.3em}}.skills-detail li .skills-text p{text-align:left;font-size:1em;line-height:1.5}.blog{padding:60px 0 120px}.blog-content{flex-wrap:wrap;justify-content:space-between;display:flex;position:relative}@media (width<=480px){.blog-content{flex-direction:column}}.blog-content:after{content:"What's New";color:var(--main-color);opacity:.4;text-align:left;z-index:0;margin-bottom:30px;font-size:5em;display:block;position:absolute;bottom:-150px;left:1.5%}@media (width<=800px){.blog-content:after{font-size:3em;bottom:-80px}}@media (width<=480px){.blog-content:after{font-size:2em}}.blog-content .blog-item{z-index:1;background:#fff;width:32%;margin:0 0 40px;text-decoration:none;transition:all .3s;position:relative;box-shadow:0 11px 15px -4px #cfcece}@media (width<=800px){.blog-content .blog-item{width:49%}}@media (width<=480px){.blog-content .blog-item{width:100%}}.blog-content .blog-item:hover{box-shadow:none}.blog-content .blog-item .blog-img{width:100%;height:200px;overflow:hidden}.blog-content .blog-item .blog-img img{object-fit:cover;z-index:0;width:100%;height:200px;position:relative}.blog-content .blog-item .blog-img img:hover{transition:all .3s;transform:scale(1.1)}.blog-content .blog-item .blog-text{z-index:1;padding:15px;position:relative}.blog-content .blog-item .blog-line1{align-items:center;display:flex}.blog-content .blog-item .category{background:var(--main-color);color:#e2e8ea;margin-right:10px;padding:4px 8px;font-size:.8em;display:inline-block}.blog-content .blog-item .date{color:var(--main-color);align-items:center;font-size:.8em;display:flex}.blog-content .blog-item .date span{margin-right:2px;font-size:1.1em}.blog-content .blog-item h2{color:var(--main-color);margin-top:10px;font-size:1em;font-weight:400}.form-box{width:100%;max-width:500px;margin:40px auto}@media (width<=800px){.form-box{max-width:100%}}.form-box p{color:#e9e7e7;text-align:center}.form-box .form-item{flex-direction:column;align-items:center;width:100%;display:flex}.form-box .form-item input{color:#e2e8ea;background:#3f5156;border:none;width:100%;margin-bottom:15px;padding:13px;font-size:15px;font-weight:400;transition:all .3s}.form-box .form-item input:focus{outline:none}.form-box .form-item input::placeholder{color:#999}.form-box .form-item textarea{color:#e2e8ea;background:#3f5156;border:none;width:100%;min-height:150px;margin-bottom:15px;padding:13px;font-size:15px;font-weight:400;transition:all .3s}.form-box .form-item textarea:focus{outline:none}.form-box .form-item textarea::placeholder{color:#999}.form-box .form-item span{color:#e2e8ea;margin-bottom:15px}.form-box .form-item button{color:var(--main-color);background:var(--accent-color);border:solid 1px var(--accent-color);cursor:pointer;margin-top:30px;padding:10px 20px;transition:all .5s;display:inline-block}.form-box .form-item button:hover{border:solid 1px var(--accent-color);color:var(--accent-color);background:0 0}footer{background:#3f5156;justify-content:center;width:100%;padding:8px 0;display:flex}footer small{color:#e2e8ea;font-family:Ysabeau,sans-serif;font-size:1em}.eyecatch{width:100%;margin-bottom:30px}.eyecatch img{object-fit:cover;width:100%;max-height:500px}.blog-detail{background:#3f5156b0;max-width:1000px;min-height:88vh;margin:0 auto;padding:40px 3%}.blog-detail h1{text-align:left;font-size:2em}@media (width<=800px){.blog-detail h1{font-size:1.8em}}@media (width<=480px){.blog-detail h1{font-size:1.3em}}.blog-detail-date{color:#e2e8ea;text-align:right;justify-content:flex-start;align-items:center;margin-bottom:20px;line-height:1;display:flex}.blog-detail-date span{margin-right:2px;font-size:1.1em}.blog-detail-text{color:#e2e8ea;width:100%;line-height:1.5}.grecaptcha-badge{visibility:hidden}.reCAPTCHA{text-align:center;color:#e2e8ea;font-size:.5em}.reCAPTCHA a{color:#e2e8ea;text-decoration:underline}.contact-sec{min-height:100vh}.contact-sec .contact-detail{height:100%}.contact-sec .contact-detail a{text-align:center;color:var(--main-color);display:block}