/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */*,:after,:before{border-style:solid;border-width:0;box-sizing:border-box;min-width:0}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}main{display:block}address,blockquote,dl,figure,form,iframe,p,pre,table{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}ol,ul{list-style:none;margin:0;padding:0}dt{font-weight:700}dd{margin-left:0}hr{border-top-width:1px;box-sizing:content-box;clear:both;color:inherit;height:0;margin:0;overflow:visible}pre{font-family:monospace,monospace;font-size:inherit}address{font-style:inherit}a{background-color:transparent;color:inherit;text-decoration:none}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}embed,iframe,img,object,svg{vertical-align:bottom}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;background:transparent;border-radius:0;color:inherit;font:inherit;margin:0;padding:0;text-align:inherit;text-transform:inherit;vertical-align:middle}[type=button],[type=reset],[type=submit],button{cursor:pointer}[type=button]:disabled,[type=reset]:disabled,[type=submit]:disabled,button:disabled{cursor:default}:-moz-focusring{outline:auto}select:disabled{opacity:inherit}fieldset,option{padding:0}fieldset{margin:0;min-width:0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=number]{-moz-appearance:textfield}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]:focus{outline:auto}table{border-collapse:collapse;border-color:inherit}caption{text-align:left}td,th{padding:0;vertical-align:top}th{font-weight:700;text-align:left}body,html{font-family:Kosugi Maru,sans-serif;font-size:62.5%;font-style:normal;font-weight:400;padding:0}.link-btn{border:1px solid;display:block;margin:40px auto 0;width:280px}.link-btn,.link-btn .inner{height:60px;position:relative}.link-btn .inner:before{animation:move 2s linear infinite;background:linear-gradient(90deg,#4c111b,#4c111b 33.33%,transparent 0,transparent 66.66%,#4c111b 0,#4c111b) 100% 0/300% 1px no-repeat,linear-gradient(180deg,transparent,transparent 33.33%,#4c111b 0,#4c111b 66.66%,transparent 0,transparent) 100% 100%/1px 300% no-repeat,linear-gradient(90deg,#4c111b,#4c111b 33.33%,transparent 0,transparent 66.66%,#4c111b 0,#4c111b) 0 100%/300% 1px no-repeat,linear-gradient(180deg,transparent,transparent 33.33%,#4c111b 0,#4c111b 66.66%,transparent 0,transparent) 0 0/1px 300% no-repeat;content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s;width:100%}.link-btn .inner:hover:before{opacity:1}.link-btn .inner span{display:block;font-size:1.6rem;left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);width:100%}@keyframes move{0%{background-position:100% 0,100% 100%,0 100%,0 0}to{background-position:0 0,100% 0,100% 100%,0 100%}}header{box-sizing:border-box;font-weight:700;justify-content:space-between;left:0;padding:20px 40px;position:fixed;top:0;width:100%;z-index:10}header,header .site-logo{align-items:center;display:flex}header .site-logo{gap:0 20px}header .site-logo .logo{max-width:50px}header .site-logo .logo,header .site-logo .logo img{display:block;width:100%}header .site-logo .site-name{font-size:2rem}header .site-logo .site-name span:first-child{color:#4c111b;margin-right:10px}header .site-logo .site-name span:last-child{color:#daaa59}.wrapper{display:flex;flex-direction:column;min-height:100vh}main{flex:1}article,footer,main{position:relative}footer{box-sizing:border-box;padding:30px 20px;text-align:center;z-index:1}footer .footer-contents{display:flex;flex-direction:column;gap:20px 0;justify-content:center}footer .footer-contents .site-logo{display:block;margin:0 auto;max-width:50px;width:100%}footer .footer-contents .site-logo img{display:block;width:100%}footer .footer-contents .copyright{font-size:1.2rem}footer .footer-contents .copyright span:first-child{color:#4c111b}footer .footer-contents .copyright span:last-child{color:#daaa59}nav ul{backdrop-filter:blur(10px);background-color:hsla(0,0%,96%,.4);border-radius:20px;display:flex;flex-wrap:wrap;gap:0 30px;padding:2px 20px;width:100%}nav li{position:relative}nav li:before{bottom:1px;right:0}nav li:after{left:0;top:0}nav li:hover:before{width:100%}nav li:hover .nav-text-wrapper:before{height:100%;transition-delay:.3s}nav li:hover .nav-text-wrapper:after{height:100%;transition-delay:.2s}nav li .nav-text{align-items:center;color:#4c111b;display:flex;font-size:1.8rem;height:100%;justify-content:center;left:0;position:absolute;transition:all .3s;width:100%}nav li .nav-text:first-child{letter-spacing:.5rem;top:0}nav li .nav-text:nth-child(2){font-family:Lato,sans-serif;font-style:normal;font-weight:700;letter-spacing:.5rem;top:-100%}nav a{cursor:pointer;display:inline-block;height:40px;line-height:40px;overflow:hidden;position:relative}nav a.about{width:112px}nav a.portfolio{width:122px}nav a.service{width:112px}nav a.price-frow{width:150px}nav a.contact{width:168px}nav a:hover .nav-text:first-child{top:100%}nav a:hover .nav-text:nth-child(2){top:0}@media (width < 1140px){nav{display:none}}h2{font-size:3.6rem;font-weight:700;letter-spacing:1rem;margin-bottom:3rem}h3{font-size:2.6rem;letter-spacing:.8rem}h3,h4{margin-bottom:1.5rem}h4{font-size:2.2rem;letter-spacing:.6rem}p{font-size:1.8rem;line-height:2;margin-bottom:4rem}.background{background-image:url(../../assets/images/hero-bg.jpg);background-position:50%;background-size:cover;filter:blur(var(--blur-value,0));position:fixed;transform:scale(1.03);transition:background-image .5s ease-in-out;will-change:filter,transform;z-index:-1}.background,.background:after{height:100vh;left:0;top:0;width:100vw}.background:after{background-color:rgba(219,170,92,.3);content:"";position:absolute;z-index:0}.background.is-image-swapped{background-image:url(../../assets/images/connect-bg.jpg);filter:none;transform:scale(1.03)}.background.is-image-swapped:after{background-color:hsla(0,0%,96%,.7)}#hero{color:#f5f5f5}#hero.section{align-items:flex-end;display:flex;min-height:100vh}#hero.section .contents{margin:0 auto;min-width:800px;padding-bottom:15vh;padding-left:5vw;width:100%}#hero h2{font-size:calc(7.27273px + 3.78788vw);text-shadow:4px 4px 3px rgba(76,17,27,.6)}#hero p{font-size:calc(8.85714px + .89286vw);text-shadow:2px 2px 3px rgba(76,17,27,.6)}#introduction .contents{background-color:#f5f5f5;color:#1f1209;display:flex;flex-direction:column;justify-content:center;margin:0 auto;min-width:800px;overflow:hidden;padding:15vh 10vw;position:relative;width:100%}#introduction .contents .segment{margin-bottom:4rem}.js-scroll-scale .contents{opacity:.5;transform:scale(.5);will-change:transform,opacity}#portfolio{background-color:#eeebe9}#portfolio .contents{color:#1f1209;display:flex;flex-direction:column;justify-content:center;margin:0 auto;min-height:100vh;min-width:800px;padding:15vh 10vw;width:100%}#portfolio .contents .segment{margin-bottom:4rem}#portfolio .portfolio-list{display:flex;flex-wrap:wrap;gap:3rem;justify-content:space-between;margin-bottom:8rem;overflow:hidden}#portfolio .portfolio-list .portfolio-item{max-width:calc(33.33333% - 20px)}#portfolio .portfolio-list .portfolio-item .inner{height:100%;padding:20px;position:relative}#portfolio .portfolio-list .portfolio-item .inner:before{animation:move 2s linear infinite;background:linear-gradient(to right,var(--site-button-link-color),var(--site-button-link-color) 33.33%,transparent 33.33%,transparent 66.66%,var(--site-button-link-color) 66.66%,var(--site-button-link-color)) 100% 0/300% 1px no-repeat,linear-gradient(to bottom,transparent,transparent 33.33%,var(--site-button-link-color) 33.33%,var(--site-button-link-color) 66.66%,transparent 66.66%,transparent) 100% 100%/1px 300% no-repeat,linear-gradient(to right,var(--site-button-link-color),var(--site-button-link-color) 33.33%,transparent 33.33%,transparent 66.66%,var(--site-button-link-color) 66.66%,var(--site-button-link-color)) 0 100%/300% 1px no-repeat,linear-gradient(to bottom,transparent,transparent 33.33%,var(--site-button-link-color) 33.33%,var(--site-button-link-color) 66.66%,transparent 66.66%,transparent) 0 0/1px 300% no-repeat;content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s;width:100%}#portfolio .portfolio-list .portfolio-item .inner .frame{background-color:#000018;margin-bottom:2rem;overflow:hidden;position:relative}#portfolio .portfolio-list .portfolio-item .inner h3{font-size:2rem;font-weight:700;margin-bottom:2rem}#portfolio .portfolio-list .portfolio-item .inner p{font-size:1.6rem}#portfolio .portfolio-list .portfolio-item .inner:hover:before{opacity:1}#portfolio .portfolio-list .portfolio-item img{aspect-ratio:16/9;height:auto;object-fit:cover;object-position:center center;opacity:.7;transition:all 1s;width:100%}#portfolio .portfolio-list .portfolio-item:hover .frame{overflow:hidden;position:relative}#portfolio .portfolio-list .portfolio-item:hover .frame img{opacity:1;transform:scale(1.2);transition:all 1s}#portfolio .portfolio-list .portfolio-item:hover .frame:before{background-color:rgba(var(--basic-font-color),.4);content:"";height:100%;left:0;position:absolute;top:0;width:100%}#service{background-color:rgba(219,170,92,.3)}#service .contents{background-color:#f5f5f5;color:#1f1209;display:flex;flex-direction:column;justify-content:center;margin:0 auto;min-width:800px;padding:15vh 10vw;width:100%}#service .service-details{border-top:1px solid #4c111b;padding:40px 20px}#service .service-details h3{margin-bottom:5px}#service .service-details p{margin-bottom:0}#service .service-details:last-child{border-bottom:1px solid #4c111b}#price-flow{background-color:#eeebe9;transition:transform .5s ease-out}#price-flow>.contents{display:flex;flex-direction:column;justify-content:center;margin:0 auto;min-width:800px;padding:15vh 10vw;width:100%}#price-flow>.contents .segment{margin-bottom:4rem}#price-flow>.contents .segment p{margin-bottom:12vh}#price-flow>.contents .segment:first-child{padding-bottom:10vh}#price-flow .service-overview{display:flex;flex-wrap:wrap;gap:0 6rem;justify-content:space-between;margin-bottom:15vh}#price-flow .service-overview .service{padding:60px 40px;width:calc(33.33333% - 40px)}#price-flow .service-overview .service.coding{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' opacity='0.3'><path stroke-linecap='round' stroke-linejoin='round' d='M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5' /></svg>");background-position:50%;background-repeat:no-repeat;background-size:contain}#price-flow .service-overview .service.new{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(51, 51, 51, 0.3)' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.75 17 9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain}#price-flow .service-overview .service.edit{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(51, 51, 51, 0.3)' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain}#price-flow .service-overview h4{font-size:2.4rem;font-weight:700;margin-bottom:1rem}#price-flow .service-overview p{font-size:2rem;margin-bottom:0}#price-flow .service-overview p span{display:block}#price-flow .service-overview p span.price{font-weight:700}#price-flow dl{font-size:2rem}#price-flow dl dt{font-size:2.2rem;margin-bottom:2rem}#price-flow dl dd{margin-bottom:9rem}#price-flow .timeline{margin:0 auto;position:relative}#price-flow .timeline h2{margin-bottom:0}#price-flow .timeline .service-flow-header{border-left:5px solid #4c111b;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:2rem;left:0;margin-left:-2px;padding:1.6rem 1.5rem;position:absolute;top:0;width:100%}#price-flow .timeline .service-flow{padding-top:100px;position:relative}#price-flow .timeline .service-flow-step{position:relative}#price-flow .timeline .service-flow-step:not(:last-of-type){margin-bottom:50px;margin-top:50px}#price-flow .timeline .service-flow-step:first-child{margin-top:60px}#price-flow .timeline .dec{border-left:6px solid #4c111b;margin:-2px;padding:20px 10px 20px 20px}#price-flow .timeline .dec .header{margin-bottom:15px}#price-flow .timeline .dec .header .overview .step-item{display:block;font-size:2.4rem;font-weight:700;margin-bottom:5px}#price-flow .timeline .dec .step-details p{font-size:2rem;margin:0 0 2rem}#price-flow .timeline .dec .step-details a{background:linear-gradient(#4c111b,#4c111b) 0 100%/0 2px no-repeat;border-bottom:2px solid #4c111b;transition:background .4s}#price-flow .timeline .dec .step-details a:hover{background-size:100% 2px}#price-flow .timeline:before{background-color:#4c111b;content:"";height:100%;left:0;position:absolute;top:0;width:1px}#conclusion{min-height:100vh;text-shadow:1px 1px 3px hsla(0,0%,96%,.7)}#conclusion .contents{display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:calc(15vh + 144px) 10vw 15vh}#conclusion .message{margin-bottom:10vh}#news>.contents{background-color:#f5f5f5;display:flex;flex-direction:column;justify-content:center;margin:0 auto;min-width:800px;padding:15vh 10vw;width:100%}#news .news-list{font-size:1.8rem;list-style:none;margin-bottom:0;margin-top:0;padding-left:0}#news .news-list li{margin-bottom:10px}#news .news-list li a{align-items:flex-start;color:inherit;display:flex;text-decoration:none;transition:color .3s ease}#news .news-list li a .update{flex-shrink:0;font-weight:700;margin-right:20px;width:100px}#news .news-list li a .title{flex-grow:1;line-height:2.8rem}#news .news-list li a:hover{color:#4c111b;text-decoration:underline;text-decoration-color:#4c111b}@media (width < 1140px){#introduction .contents,#portfolio .contents,#price-flow .contents,#service .contents{padding:10vh 5vw}#conclusion .contents{padding-bottom:10vh;padding-left:5vw;padding-right:5vw}}@media (width < 1024px){#hero.section .contents,#introduction .contents,#portfolio .contents,#price-flow .contents,#service .contents{min-width:auto}#portfolio .portfolio-list{flex-direction:column}#portfolio .portfolio-list .portfolio-item{margin:0 auto;max-width:500px;min-width:300px;width:100%}#price-flow .segment:first-child h3{text-align:center}#price-flow .service-overview{flex-direction:column;gap:80px 0}#price-flow .service-overview .service{margin:0 auto;max-width:500px;min-width:300px;width:100%}}@media (width < 820px){#hero.section{align-items:center}#hero.section .contents{padding:0;text-align:center}#news>.contents{min-width:auto}}@media (width < 680px){h2{font-size:2.6rem;line-height:3.6rem}h2,h3{letter-spacing:.2rem}h3{font-size:2.2rem;line-height:3.2rem}h4{font-size:1.8rem;letter-spacing:.2rem;line-height:2.8rem}p{font-size:1.6rem}#hero.section{align-items:center}#hero.section .contents{padding:0;text-align:center}#portfolio .portfolio-list{margin-bottom:0}#price-flow .contents{padding:0 5vw 5vh}#price-flow .service-overview{gap:40px 0}#price-flow .service-overview .service{padding:60px 20px;text-align:center}#price-flow .service-overview h4{font-size:1.8rem;line-height:2.8rem}#price-flow .service-overview p{font-size:1.6rem}#price-flow .service-overview p span.price{font-size:2.8rem;letter-spacing:.4rem}#price-flow .contents .segment:last-child{margin-bottom:0}#price-flow .timeline .dec .step-details p{font-size:1.6rem}}