@charset "utf-8";@import url(https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap);*{margin:0;padding:0;box-sizing:border-box;color:#14171a}html{font-size:100%}body{font-family:"Noto Serif JP",serif;font-family:Quicksand,sans-serif}img{width:100%;height:auto;object-fit:cover}li{list-style:none}a{text-decoration:none}.box{max-width:1100px;margin:0 auto}.inner{max-width:1920px;margin-left:auto;margin-right:auto;text-align:center}.section-title{display:inline-block;font-size:3rem;font-weight:300;margin-bottom:60px;border-bottom:1px solid #383e45}.section-subtitle{display:block;font-size:2rem;margin:20px 0 60px 0}.content-title{font-size:1.2rem;margin:10px 0;color:#9f8e6d}.fadeIn{animation-name:fadeInAnime;animation-duration:4s;animation-fill-mode:forwards;opacity:0}@keyframes fadeInAnime{0%{opacity:0}100%{opacity:1}}.scrolldown4{position:absolute;bottom:1%;right:50%;animation:arrowmove 1s ease-in-out infinite}@keyframes arrowmove{0%{bottom:1%}50%{bottom:3%}100%{bottom:1%}}.scrolldown4 span{position:absolute;left:-20px;bottom:10px;color:#eee;font-size:.7rem;letter-spacing:.05em;-ms-writing-mode:tb-rl;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl}.scrolldown4:before{content:"";position:absolute;bottom:0;right:-6px;width:1px;height:20px;background:#eee;transform:skewX(-31deg)}.scrolldown4:after{content:"";position:absolute;bottom:0;right:0;width:1px;height:50px;background:#eee}.fade-in-target,.opacityText{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.25,1,.5,1),transform .8s cubic-bezier(.25,1,.5,1)}.fade-in-target.is-visible,.opacityText.is-visible{opacity:1;transform:translateY(0)}.back-area{background:-webkit-linear-gradient(to left,#8f94fb,#4e54c8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:0;pointer-events:none}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:rgba(173,173,173,.2);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(10){left:85%;width:150px;height:150px;animation-delay:0s;animation-duration:11s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}100%{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.mv{position:fixed;width:100%;height:100vh;z-index:-2;top:0;left:0}.mv video{width:100%;height:100vh;object-fit:cover}header .inner{margin-bottom:0}header{position:fixed;top:0;left:0;right:0;z-index:10}header.is-scrolled{background-color:rgba(255,255,255,.95);box-shadow:0 2px 5px rgba(0,0,0,.08);transition:all .4s ease}header.is-scrolled li a{color:#333}header.is-scrolled .site-header-navbtn span,header.is-scrolled .site-header-navbtn::after,header.is-scrolled .site-header-navbtn::before{background-color:#333}header .inner{display:flex;justify-content:end;align-items:center;height:70px;padding:10px 0}header .inner img{width:150px;margin-left:20px}header .insta img{width:26px;height:auto}header nav ul{display:flex;padding:10px 0}header li{margin-left:10px;margin-right:20px;letter-spacing:.1rem;line-height:1}header li a{color:#fff;font-size:1rem;font-weight:500}header li a:hover{opacity:.7}header li a span{color:#f6cc23;font-size:.6rem}main{margin-top:0}#splash{position:fixed;z-index:999;width:100%;height:100%;background:#333;text-align:center;color:#fff}#splash_text{position:absolute;top:50%;left:50%;z-index:999;width:100%;transform:translate(-50%,-50%);color:#fff}#mainvisual{height:100vh;position:relative}#mainvisual .content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);width:80%}#mainvisual .content img{max-width:400px}#mainvisual .content h1{font-weight:400;color:#fff;font-size:1rem}#about{background:#ecece6;padding:80px 0}#about h2{text-align:center;margin-bottom:32px}#about h3{font-size:1.3rem;line-height:1;margin-bottom:16px}#about h3 span{font-size:.8rem}#about .name{display:flex;justify-content:center;gap:32px}#about .name .img-box,#about .name .name-box{width:50%}#about .name .img-box{text-align:end}#about .name img{width:300px;max-width:100%;height:100%;object-fit:cover}#about .name .name-box{padding:32px}#about .profile-table{width:100%;border-collapse:collapse;margin-top:20px;font-size:1rem}#about .profile-table td,#about .profile-table th{padding:20px 15px;border-bottom:1px solid #e0e0e0;text-align:left;vertical-align:top}#about .profile-table th{width:140px;font-weight:600;white-space:nowrap}@media screen and (max-width:768px){#about .profile-table td,#about .profile-table th{padding:16px 0}}.products-title{text-align:center;margin-bottom:60px}.products-title h2{font-size:2.5rem;font-weight:700;letter-spacing:.1em;margin-bottom:15px;color:#2c2c2c;position:relative;display:inline-block;padding-bottom:15px}.products-title h2::after{content:'';display:block;width:50px;height:3px;background-color:#2c2c2c;position:absolute;bottom:0;left:50%;transform:translateX(-50%)}.products-title p{font-size:1rem;color:#666;letter-spacing:.05em}.products-title{text-align:center;margin-bottom:60px}.products-title h2{font-size:3rem;font-weight:300;margin-bottom:10px}.products-title p{font-size:1rem}.about-content{display:flex;justify-content:space-between;align-items:center;gap:50px}.about-img{width:40%}.about-img img{width:100%;border-radius:10px}.about-text{width:60%}.about-text h3{font-size:2rem;margin-bottom:30px}.about-text h3 span{font-size:1rem}.about-text p{line-height:2;margin-bottom:30px}.skill h4{font-size:1.2rem;margin-bottom:15px}.skill p{line-height:1.8}@media screen and (max-width:768px){.about-content{flex-direction:column}.about-img,.about-text{width:100%}#about .name{flex-direction:column;padding:0 20px}#about .name .img-box,#about .name .name-box{width:100%}#about .name .img-box{text-align:center}#about .name .name-box{padding:32px 0}}#works{padding:32px 0;background-color:#ecece6;overflow-x:hidden}#works .products-title{padding:30px;margin-bottom:30px}#works .section-subtitle{border-bottom:1px #000 solid}#works li{margin-left:auto;margin-right:auto;margin-bottom:0}#works img{width:100%}#works .content-title{text-align:start}#works .website_list{display:flex;align-items:center;margin-bottom:80px}#works .revers .website_list{flex-direction:row-reverse}#works .website_list .site_img{width:100%;margin-left:-200px}#works .revers .website_list .site_img{margin-left:auto;margin-right:-200px}#works .website_list .site_info,#works .website_list .site_info .content-info,#works .website_list .site_info h3{width:500px}#works .website_list .site_info{background:#ffffffdb;transform:translateX(-200px);border-radius:4px;box-shadow:0 4px 15px rgba(0,0,0,.05)}#works .revers .website_list .site_info{background:#ffffffdb;transform:translateX(200px);border-radius:4px}#works .website_list .site_info .content-info,#works .website_list .site_info h3{padding:8px 16px}#works .content-info table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.7}#works .content-info table td,#works .content-info table th{padding:12px 0;border-bottom:1px solid #eee;text-align:left;vertical-align:top}#works .content-info table tr:last-child td,#works .content-info table tr:last-child th{border-bottom:none}#works .content-info table th{font-weight:600;white-space:nowrap;padding-right:20px;width:110px;color:#555}#works .content-info table td{color:#333}#works .work-link a{background:#fff;padding:16px;border-radius:4px;transition:all .5s}#works .work-link a:hover{background:#333;color:#fff;transition:all .5s}@media screen and (max-width:1300px){#works .website_list .site_info{transform:translateX(-300px)}#works .revers .website_list .site_info{transform:translateX(300px)}}@media screen and (max-width:768px){#works .website_list{display:block}#works .website_list .site_img{width:100%;margin-left:0}#works .website_list .site_info{margin:0 auto;transform:translateX(0)}#works .revers .website_list .site_info{transform:translateX(0)}#works .revers .website_list .site_img{margin-left:auto;margin-right:0}#works .website_list .site_info,#works .website_list .site_info .content-info,#works .website_list .site_info h3{max-width:700px;width:100%}}#stream{padding:80px 20px;background-color:#fff}#stream .products-title p{color:#555}.flow-list{list-style:none;margin-top:20px}.flow-item{display:flex;align-items:flex-start;padding:40px 0;border-bottom:1px solid #e0e0e0;gap:40px}.flow-item:first-child{border-top:1px solid #e0e0e0}.flow-item-number{font-size:1.2rem;font-weight:600;color:#aaa;min-width:80px;text-align:center;padding-top:5px}.flow-item-content h3{font-size:1.5rem;font-weight:600;margin-bottom:15px}.flow-item-content p{line-height:1.8;color:#555}@media screen and (max-width:768px){.flow-item{flex-direction:column;gap:10px;padding:30px 0}}#faq{padding:80px 20px;background-color:#f7f7f7}.faq-list{max-width:800px;margin:0 auto}.faq-list dt{position:relative;padding:20px 50px 20px 20px;background-color:#fff;border:1px solid #e0e0e0;margin-top:-1px;cursor:pointer;font-weight:600;transition:background-color .3s}.faq-list dt:hover{background-color:#f0f0f0}.faq-list dt::after{content:'+';position:absolute;top:50%;right:20px;transform:translateY(-50%);font-size:1.5rem;color:#888;transition:transform .3s}.faq-list dt.active::after{content:'−';transform:translateY(-50%) rotate(180deg)}.faq-list dd{display:none;padding:30px 20px;border:1px solid #e0e0e0;border-top:none;line-height:1.8;color:#555;background-color:#fff}#photo{background-color:#ecece6;padding:60px 0}#photo ul{display:block;margin-left:auto;margin-right:auto;max-width:1180px;height:auto}#photo ul li{padding-left:30px;padding-right:30px}.area{position:relative;margin:0 auto 20% auto;padding:0 30px;max-width:1000px;width:100%}.area img{width:200%}.area figure{position:relative;left:0;top:0;width:40%;line-height:0}.area:nth-child(2n) figure{left:50%}.area .box{position:absolute;top:300%;left:30%;background:#fff;padding:30px;box-shadow:0 0 40px rgba(0,0,0,.1)}.area:nth-child(2n) .box{left:inherit;right:30%}footer{background-color:#333;width:100%;height:200px;padding:10px 0;text-align:center}footer small{display:block;margin-top:90px;color:#fff}.site-header-navbtn{display:none;position:fixed;top:10px;right:10px;width:40px;height:40px;background:0 0;border:none;z-index:1}.site-header-navbtn span,.site-header-navbtn::after,.site-header-navbtn::before{width:30px;height:1px;background-color:#fff;position:absolute;top:50%;left:5px;transition:transform .4s}.site-header-navbtn::after,.site-header-navbtn::before{content:""}.site-header-navbtn::before{transform:translateY(-8px)}.site-header-navbtn::after{transform:translateY(8px)}body.is-nav-open .site-header-navbtn span{transform:scaleX(0)}body.is-nav-open .site-header-navbtn::before{transform:translateY(0) rotate(45deg);background:#333}body.is-nav-open .site-header-navbtn::after{transform:translateY(0) rotate(-45deg);background:#333}.pagetop{width:40px;height:40px;position:fixed;z-index:0;right:16px;bottom:32px;background-color:tan;font-size:1.5rem;text-align:center;line-height:40px;cursor:pointer;opacity:.6}.pagetop:hover{opacity:.9}.ri-arrow-up-line{display:inline-block;width:18px;height:18px;margin:15px 5px;border-top:3px solid #000;border-left:3px solid #000;transform:rotate(45deg)}@media screen and (max-width:700px){.wrapper{margin-bottom:100px}header .inner{height:50px}header .inner img{margin-left:10px}#mainvisual .content-title{font-size:2rem}.site-header-navbtn{top:3px}.wrapper p,header .wrapper{margin-left:1rem;margin-right:1rem}header .inner img{width:265px}header .insta img{width:26px;height:auto;margin-left:0}.content-title{font-size:.8rem;margin:10px 0;color:#9f8e6d}#works{padding-bottom:40px}#works ul{flex-direction:column}#works ul li{padding-bottom:0;width:100%;margin-bottom:2rem}#works .content-title{margin-top:0}.content-title{font-size:.8rem;margin:5px 0}#works .website_list p{font-size:10px}#works img{width:100%;margin-bottom:10px}.site-header-navbtn{display:block;z-index:2}.site-header-nav{position:fixed;width:100%;height:100%;left:0;top:0;background-color:#ecece6;transform:translateX(-100%);transition:transform .6s;z-index:1}body.is-nav-open .site-header-nav{transform:translateX(0)}.site-header-nav ul{height:100%;flex-direction:column;justify-content:center;text-align:1.5em}.site-header-nav ul li{margin-right:0;margin-bottom:1.5em;border-bottom:1px solid #33333350;padding:8px 16px;margin:16px auto}.site-header-nav ul li a{font-size:1.5rem}header li a{color:#333}}#skill{padding:80px 0;background-color:#f7f7f7}#skill .products-title h2,#skill .products-title p{color:#333}#skill .products-title h2::after{background-color:#333}.skill-container{display:flex;gap:50px;align-items:flex-start;padding:0 20px}.skill-chart,.skill-list{width:50%}.skill-list .skill-item{margin-bottom:25px}.skill-chart h4,.skill-list h4{font-size:1.25rem;font-weight:600;margin-bottom:15px;padding-bottom:8px;border-bottom:2px solid #ddd}.skill-list p{font-size:1rem;line-height:1.8;color:#555}.skill-chart ul{list-style:none;padding-top:10px}.skill-chart li{margin-bottom:20px}.skill-chart .skill-name{display:block;margin-bottom:8px;font-weight:500}.skill-chart .bar-container{width:100%;height:22px;background-color:#e0e0e0;border-radius:11px;overflow:hidden}.skill-chart .bar{display:block;height:100%;background:linear-gradient(90deg,#6a11cb,#2575fc);border-radius:11px;width:0;transition:width 1.5s .3s ease-out}.products-title{text-align:center;margin-bottom:60px}@media screen and (max-width:768px){.skill-container{flex-direction:column;gap:50px}.skill-chart,.skill-list{width:100%}}@media screen and (max-width:520px){#mainvisual{height:90vh}#works ul{gap:10px;margin:0 10px}}