:root{--text-color:#333;--primary-blue:#0890ff;--card-bg:#ffffff80}body{color:var(--text-color);background:radial-gradient(circle,#4dd0e1 0%,#00838f 50%,#004d61 100%) fixed;margin:0;padding:0;font-family:Helvetica Neue,Arial,sans-serif;overflow-x:hidden}header{box-sizing:border-box;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff80;border-bottom:1px solid #ffffff4d;justify-content:space-between;align-items:center;width:100%;padding:20px 40px;display:flex;position:fixed;top:0;left:0}header ul{gap:20px;margin:0;padding:0;list-style:none;display:flex}header a{color:var(--text-color);font-weight:700;text-decoration:none}.header-logo{width:auto;max-height:40px;display:block}#hero{justify-content:center;align-items:center;height:100vh;display:flex;position:relative}#webgl-canvas{z-index:-1;pointer-events:none;filter:brightness(1.4);width:100vw;height:100vh;position:fixed;top:0;left:0}.overlay{z-index:0;pointer-events:none;background-color:#0000;width:100vw;height:100vh;position:fixed;top:0;left:0}.hero-content{z-index:1;text-align:center;pointer-events:none;position:relative}.hero-content h1{text-shadow:0 4px 15px #ffffffe6;margin-bottom:10px;font-size:4rem}section{z-index:1;max-width:1000px;margin:0 auto;padding:100px 20px;position:relative}.glass-panel{background-color:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #fff9;border-radius:12px;max-width:800px;margin:0 auto;padding:40px;box-shadow:0 8px 32px #00000014}.skills-list{padding-left:1.9rem;line-height:2;list-style-type:none}.skills-list li:before{content:"・";color:#000;margin-right:8px;font-weight:700}h2{text-align:center;margin-bottom:40px;font-size:2.5rem}.projects-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;display:grid}.project-card{background-color:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #fffc;border-radius:12px;padding:20px;transition:transform .3s,box-shadow .3s;box-shadow:0 8px 32px #00000014}.project-card:hover{transform:translateY(-5px);box-shadow:0 12px 40px #0066ff26}.card-image{object-fit:cover;border-radius:8px;width:100%;height:200px;margin-bottom:20px;display:block}.tech-stack{color:var(--primary-blue);margin-bottom:20px;font-size:.9rem;font-weight:700;display:block}.btn{background-color:var(--text-color);color:#fff;border-radius:20px;padding:10px 20px;font-size:.9rem;text-decoration:none;transition:background-color .3s;display:inline-block}.btn:hover{background-color:#555}.social-links{justify-content:center;gap:30px;margin-top:20px;display:flex}.social-btn{background-color:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #fffc;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;text-decoration:none;transition:transform .3s,box-shadow .3s;display:flex;box-shadow:0 4px 15px #0000000d}.social-btn:hover{transform:translateY(-5px);box-shadow:0 8px 25px #06f3}.note-btn{color:#000}.note-logo-text{letter-spacing:-.5px;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Arial,sans-serif;font-size:1.3rem;font-weight:900}.x-btn{color:var(--text-color)}footer{text-align:center;margin-top:50px;padding:40px}.hamburger{cursor:pointer;z-index:101;flex-direction:column;justify-content:space-around;width:30px;height:24px;display:none}.hamburger span{background-color:var(--text-color);border-radius:2px;width:100%;height:3px;transition:all .3s ease-in-out;display:block}@media screen and (width<=768px){.hero-content h1{font-size:2.5rem}.hero-content p{padding:0 15px;font-size:1rem}header{padding:15px 20px}.hamburger{display:flex}nav{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;flex-direction:column;width:100%;max-height:0;transition:max-height .3s ease-out;display:flex;position:absolute;top:100%;left:0;overflow:hidden;box-shadow:0 4px 10px #0000001a}nav.active{max-height:300px}nav ul{flex-direction:column;align-items:center;gap:15px;padding:20px 0}.hamburger.active span:first-child{transform:translateY(10.5px)rotate(45deg)}.hamburger.active span:nth-child(2){opacity:0}.hamburger.active span:nth-child(3){transform:translateY(-10.5px)rotate(-45deg)}}.project-detail-page{padding-top:100px}.back-btn{border:1px solid var(--text-color);color:var(--text-color);background-color:#0000}.back-btn:hover{background-color:var(--text-color);color:#fff}.project-container{max-width:900px;margin:0 auto;padding:20px}.project-hero{text-align:center;margin-bottom:30px;padding:60px 40px}.project-hero h1{justify-content:center;align-items:center;gap:15px;margin:10px 0;font-size:3rem;display:flex}.project-logo{width:auto;height:1em}.project-hero .subtitle{color:var(--primary-blue);font-size:1.2rem;font-weight:700}.project-body{padding:50px}.project-body h2{text-align:left;border-bottom:2px solid #ffffff4d;margin-top:50px;margin-bottom:25px;padding-bottom:10px;font-size:1.8rem}.intro-text p{margin-bottom:15px;font-size:1.1rem;line-height:1.8}.features-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;display:grid}.feature-card{background:#0000000d;border:1px solid #fff6;border-radius:8px;padding:25px}.feature-card h3{color:var(--primary-blue);margin-top:0;font-size:1.2rem}.story-box{background:#fff3;border-radius:8px;padding:25px;font-style:italic}.download-info{text-align:center;margin-top:60px}.specs{text-align:left;background:#0000001a;border-radius:8px;max-width:500px;margin:20px auto;padding:20px}.specs ul{margin-top:10px;padding-left:20px}.download-btn-wrapper{margin-top:30px}.download-btn{background-color:var(--primary-blue);border:none;padding:15px 40px;font-size:1.2rem}.download-btn:hover{background-color:#04c}@media screen and (width<=768px){.project-hero{padding:40px 20px}.project-hero h1{font-size:2rem}.project-body{padding:30px 20px}}.project-main-image{border-radius:8px;width:100%;height:auto;margin-bottom:30px;box-shadow:0 4px 20px #00000026}
