@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#f6f7f2;--ink:#151815;--muted:#666e61;--line:#dde1d6;--lime:#c8f568}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:92px}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Noto Sans JP',sans-serif;font-size:14px;line-height:1.8}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input,summary{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #617d28;outline-offset:5px}.skip{position:absolute;left:20px;top:-100px;background:var(--lime);padding:12px;z-index:10}.skip:focus{top:10px}header{height:88px;display:flex;align-items:center;gap:40px;max-width:1440px;padding:0 5%;margin:auto;border-bottom:1px solid var(--line)}.logo{display:flex;align-items:center;font-size:23px;font-weight:900;letter-spacing:-1px;white-space:nowrap}.logo>span:not(.logo-mark){font-weight:400}.logo-mark{background:var(--ink);color:var(--lime);height:36px;width:36px;text-align:center;font-weight:900;border-radius:8px;margin-right:10px;line-height:31px;font-size:32px}.logo i{font-style:normal;font-size:8px;letter-spacing:1.7px;align-self:flex-end;line-height:2;margin:0 0 5px 12px;color:var(--muted)}nav{display:flex;gap:28px;margin-left:auto;font-size:12px;font-weight:600}.social{font-size:12px;border:1px solid var(--line);border-radius:24px;padding:8px 17px}.social span{margin-left:16px}.section{max-width:1320px;margin:auto;padding:74px 0}.hero{max-width:1440px;margin:auto;display:grid;grid-template-columns:1.04fr 1fr;min-height:575px;padding:40px 5% 46px;gap:25px;align-items:center}.kicker{font-size:10px;font-weight:800;letter-spacing:2.4px;margin:0 0 22px}.hero .kicker{display:flex;align-items:center;gap:9px}.kicker>span{height:7px;width:7px;background:#87b631;border-radius:50%}h1{font-size:clamp(30px,3.2vw,49px);line-height:1.65;letter-spacing:-2px;margin:26px 0 20px;font-weight:900}.dot{color:#6b9230}.hero-text{color:var(--muted);line-height:2.1;font-size:14px}.hero-actions{display:flex;gap:24px;align-items:center;margin-top:30px}.button{display:inline-flex;justify-content:space-between;align-items:center;gap:28px;padding:15px 25px;border-radius:8px;font-weight:700;font-size:13px;transition:transform .2s}.button:hover{transform:translateY(-2px)}.solid{background:var(--ink);color:#fff}.solid>span{color:var(--lime);font-size:20px}.text-link{font-size:11px;border-bottom:1px solid var(--ink);padding:6px 0}.text-link>span{margin-left:10px}.hero-small{margin-top:43px;display:flex;gap:25px;font-size:8px;letter-spacing:1.8px;color:#777e70}.setup{position:relative;overflow:hidden;min-height:445px;background:#e8eddf;border-radius:22px;isolation:isolate}.scene-label{display:flex;justify-content:space-between;position:absolute;top:24px;left:26px;right:26px;font-size:9px;letter-spacing:2px;z-index:5}.scene-label>span{color:#78816a}.orbit{position:absolute;border:1px solid #cbd5bd;border-radius:50%;width:490px;height:490px;left:15%;top:0;z-index:-1}.orbit-two{width:390px;height:390px;left:24%;top:50px}.monitor{position:absolute;left:15%;top:18%;width:66%;height:48%;transform:rotate(-5deg);border:9px solid #252a24;border-bottom-width:18px;border-radius:10px;background:#121a15;box-shadow:10px 20px 30px #2c3f2925}.display{height:100%;overflow:hidden;position:relative;background:linear-gradient(135deg,#212e22,#0c120e)}.display>span{position:relative;z-index:2;display:block;color:#e7eddf;font-size:clamp(22px,2.5vw,38px);font-weight:900;line-height:.95;letter-spacing:-1px;margin:25px 20px}.display em{font-style:normal;color:var(--lime);font-size:.76em}.display-orb{position:absolute;width:185px;height:185px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#e0ffa0,#9bbd54 30%,#2f4b26 65%,#172b1b);right:-30px;top:10px;box-shadow:0 0 50px #92d43b30}.stand{position:absolute;top:calc(100% + 17px);left:46%;height:65px;width:22px;background:linear-gradient(90deg,#32392f,#737e68)}.stand:after{content:'';position:absolute;bottom:-5px;left:-36px;width:95px;height:10px;border-radius:50%;background:#343c2f}.desk{position:absolute;bottom:58px;left:7%;width:85%;height:34px;background:#bfcaaa;transform:skewY(-8deg);border-radius:60%;filter:blur(10px);opacity:.65}.keyboard{position:absolute;bottom:57px;left:18%;width:55%;height:76px;border-radius:7px;background:#bac6ac;transform:rotate(-8deg) skewX(-20deg);padding:8px;box-shadow:0 9px 0 #929e84,0 14px 18px #596d4b33}.keys{height:100%;border-radius:3px;background:repeating-linear-gradient(0deg,transparent 0 14px,#a6b29a 14px 17px),repeating-linear-gradient(90deg,#edf1e8 0 18px,#a6b29a 18px 21px)}.keys:after{content:'';display:block;background:var(--lime);width:16px;height:13px;border-radius:2px}.mouse{position:absolute;right:11%;bottom:78px;width:47px;height:67px;background:linear-gradient(110deg,#eef2e8,#c7d4b8);border-radius:45% 45% 40% 40%;transform:rotate(-16deg);box-shadow:3px 7px 0 #a4b393,4px 11px 14px #596d4b33}.mouse:after{content:'';height:24px;width:1px;background:#a4b393;position:absolute;left:50%;top:1px}.mouse i{position:absolute;left:42%;top:9px;width:7px;height:13px;background:#637354;border-radius:6px;z-index:2}.sound{position:absolute;left:7%;bottom:95px;height:50px;width:40px;border:6px solid #39452e;border-bottom:0;border-radius:30px 30px 0 0;transform:rotate(15deg)}.sound i{position:absolute;top:25px;height:28px;width:11px;background:#242e1d;border-radius:5px;left:-9px}.sound i+i{left:25px}.floating-tag{position:absolute;font-size:7px;letter-spacing:1px;background:#f8faefdd;border:1px solid white;padding:8px 11px;border-radius:30px;z-index:4}.floating-tag>span{display:inline-block;border-radius:50%;background:var(--ink);color:#fff;margin-right:7px;width:17px;line-height:17px;text-align:center}.tag-one{right:15px;top:110px}.tag-two{left:25px;bottom:31px}.illustration-note{position:absolute;bottom:8px;right:15px;font-size:7px;color:#6c765f;letter-spacing:.4px}.disclosure{max-width:1296px;margin:0 auto;display:flex;align-items:center;gap:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;color:var(--muted);font-size:10px}.disclosure>span{font-size:8px;letter-spacing:1.5px;white-space:nowrap;border:1px solid #bcc5ae;padding:4px 8px;border-radius:4px}.disclosure p{margin:0}.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px}.section-head .kicker{color:#6b7d52;margin-bottom:12px}h2{font-size:27px;letter-spacing:-.8px;line-height:1.6;margin:0;font-weight:800}.count{font-size:10px;color:var(--muted);letter-spacing:1px}.filter-row{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:28px}.filters{display:flex;gap:7px;flex-wrap:wrap}.filter{border:1px solid var(--line);background:transparent;color:#596050;padding:8px 15px;border-radius:24px;font-size:11px;white-space:nowrap}.filter.active{background:var(--ink);border-color:var(--ink);color:#fff}.filter:hover:not(.active){background:#e9eddf}.search{display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid #b6bfa9;max-width:210px}.search>span{font-size:22px;line-height:1}.search input{border:0;background:transparent;width:155px;outline-offset:8px;font-size:11px;color:var(--ink)}.brand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.brand-card{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;transition:transform .2s,box-shadow .2s}.brand-card:hover{transform:translateY(-3px);box-shadow:0 12px 20px #15201308}.brand-art{height:165px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--card-bg)}.brand-art:before{content:'';position:absolute;width:170px;height:170px;border:1px solid #15181515;border-radius:50%;right:-25px;top:-40px}.brand-art:after{content:'';position:absolute;width:220px;height:220px;border:1px solid #15181512;border-radius:50%;right:-50px;top:-65px}.brand-art strong{font-size:35px;font-weight:900;letter-spacing:-1.8px;z-index:1}.brand-art .art-label{position:absolute;bottom:14px;left:18px;font-size:7px;letter-spacing:2px;color:#46503c}.brand-art .art-arrow{position:absolute;top:13px;right:17px;font-size:20px}.lime{--card-bg:#e6f1ce}.purple{--card-bg:#e8e1f4}.blue{--card-bg:#dcebf1}.orange{--card-bg:#f6e6d5}.pink{--card-bg:#f0e1e4}.brand-content{padding:23px}.card-tags{display:flex;gap:6px;font-size:9px;color:#6c7464;margin-bottom:12px}.card-tags span+span:before{content:' / ';margin-right:6px;color:#b3b9aa}.brand-card h3{font-size:19px;margin:0 0 8px}.brand-card p{font-size:12px;color:var(--muted);margin:0 0 17px;min-height:44px}.card-action{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:15px;font-size:12px;font-weight:700}.card-action>span{font-size:18px}.card-note{font-size:9px;color:#7c8376;display:block;margin-top:12px}.pending .brand-art{filter:saturate(.3)}.pending .card-action{color:#8a9281}.pending-label{background:#eef1e7;padding:4px 8px;border-radius:4px;font-size:10px}.store-note{font-size:10px;color:var(--muted);margin-top:24px}.empty{grid-column:1/-1;text-align:center;padding:55px 20px;background:#edf0e6;border-radius:12px}.empty h3{font-size:21px;margin:0 0 12px}.empty p{color:var(--muted)}.empty a{display:inline-block;border-bottom:1px solid;font-size:12px}.guide{border-top:1px solid var(--line)}.section-lead{font-size:12px;color:var(--muted);margin:0;line-height:1.9}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}.guide-grid article{padding:20px 0;border-top:1px solid #adb99d}.guide-number{font-size:11px;letter-spacing:1px;color:#73835d}.guide-grid h3{font-size:17px;margin:17px 0 10px}.guide-grid p{font-size:12px;color:var(--muted);line-height:2}.guide-tags{display:flex;gap:7px;margin-top:22px}.guide-tags span{font-size:9px;padding:4px 10px;border:1px solid var(--line);border-radius:20px}.follow{background:#e9efd9;border-radius:15px;padding:45px 48px;display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden}.follow .kicker{color:#6b7d52;margin-bottom:13px}.follow h2{font-size:30px}.follow p:not(.kicker){color:var(--muted);font-size:12px}.follow .button{z-index:1}.follow-art{position:absolute;right:170px;bottom:-80px;font-size:270px;font-weight:900;color:#dce7c6;line-height:1}.about{max-width:780px;padding-top:85px;padding-bottom:80px}.about h2{font-size:23px;margin-bottom:20px}.about>p:not(.kicker){font-size:13px;color:var(--muted)}details{border-bottom:1px solid var(--line);padding:18px 0}summary{cursor:pointer;list-style:none;font-size:12px;font-weight:600;display:flex;justify-content:space-between}summary:after{content:'+';font-weight:400}details[open] summary:after{content:'−'}details p{font-size:12px;color:var(--muted);line-height:2}details a{text-decoration:underline}footer{border-top:1px solid var(--line);padding:32px 5%;display:flex;align-items:center;gap:35px}footer .logo{font-size:19px}footer .logo-mark{height:30px;width:30px;font-size:26px;line-height:26px}footer p{font-size:8px;letter-spacing:1.5px;color:var(--muted)}footer small{margin-left:auto;font-size:9px;color:var(--muted)}.mobile-only{display:none}
@media(min-width:1440px){.section,.disclosure{max-width:1296px}}@media(max-width:1439px){.section,.disclosure{margin-left:5%;margin-right:5%}.about{margin-left:auto;margin-right:auto}}@media(max-width:1050px){header{gap:18px}.logo i{display:none}nav{gap:17px}.hero{min-height:500px}.setup{min-height:390px}.hero-actions{gap:14px;flex-wrap:wrap}h1{letter-spacing:-1.5px}.brand-grid{gap:14px}.brand-content{padding:18px}.filter-row{align-items:flex-start;flex-direction:column}.search{width:100%;max-width:280px}.search input{width:100%}.hero-small{gap:12px}.about{margin-left:12%;margin-right:12%}.display-orb{width:145px;height:145px}.display>span{font-size:30px}}
@media(max-width:700px){header{height:72px;padding:0 6%;gap:12px}.logo{font-size:21px}nav{display:none}.social{margin-left:auto;font-size:10px;padding:7px 12px}.hero{display:flex;flex-direction:column;padding:32px 6%;gap:32px;align-items:stretch}.hero-copy{padding:7px 0 0}.hero .kicker{font-size:8px;letter-spacing:1.6px;margin-bottom:17px}h1{font-size:34px;line-height:1.6;margin:15px 0}.hero-text{font-size:12px}.hero-actions{margin-top:24px;gap:18px}.button{padding:13px 20px;font-size:12px}.text-link{font-size:10px}.hero-small{margin-top:28px;font-size:7px;gap:20px}.setup{min-height:345px}.monitor{height:44%;top:20%}.display>span{font-size:28px;margin:17px}.display-orb{height:135px;width:135px}.keyboard{height:60px;bottom:48px}.stand{height:50px}.mouse{bottom:65px;width:38px;height:55px}.sound{bottom:78px}.tag-one{top:95px;right:10px}.tag-two{bottom:23px;font-size:6px;left:15px}.illustration-note{font-size:6px;bottom:3px}.scene-label{font-size:8px}.disclosure{align-items:flex-start;margin:0 6%;padding:16px 0;gap:12px;font-size:9px}.disclosure>span{font-size:7px;margin-top:3px}.section{margin-left:6%;margin-right:6%;padding:48px 0}.section-head{gap:12px;align-items:flex-start}h2{font-size:21px}.section-head .kicker{font-size:8px;margin-bottom:9px}.count{font-size:8px;margin-top:5px;white-space:nowrap}.filters{gap:6px}.filter{font-size:10px;padding:7px 12px}.brand-grid{grid-template-columns:1fr 1fr;gap:11px}.brand-art{height:115px}.brand-art strong{font-size:25px;letter-spacing:-1px}.brand-art .art-label{font-size:5px;left:12px;letter-spacing:1px}.brand-content{padding:15px 12px}.brand-card h3{font-size:17px}.brand-card p{font-size:10px;min-height:60px}.card-tags{font-size:7px;gap:2px}.card-action{font-size:10px}.card-note{font-size:8px}.guide-grid{grid-template-columns:1fr;gap:10px}.guide-grid article{padding:17px 0}.guide-grid h3{margin:9px 0}.guide-tags{margin-top:12px}.section-lead{display:none}.follow{margin:0 6%;padding:30px;align-items:flex-start;flex-direction:column;gap:10px}.follow h2{font-size:25px}.follow-art{right:-20px;font-size:230px}.follow>div{z-index:1}.about h2{font-size:21px}.about>p:not(.kicker){font-size:12px}footer{padding:25px 6%;flex-wrap:wrap;gap:10px}footer p{order:3;width:100%;font-size:7px}.mobile-only{display:block}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
