html{scroll-behavior:smooth}body{margin:0;min-width:320px}#root{width:100%}:root{--color-bg: #ffffff;--color-bg-dark: #f5f5f7;--color-bg-light: #fbfbfd;--color-text: #1d1d1f;--color-text-light: #424245;--color-text-muted: #86868b;--color-accent: #0071e3;--color-white: #ffffff;--color-border: rgba(0, 0, 0, .08);--font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", sans-serif;--font-body: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", "Noto Sans JP", sans-serif;--space-xs: .5rem;--space-sm: 1rem;--space-md: 2rem;--space-lg: 4rem;--space-xl: 8rem;--transition-fast: .2s ease;--transition-medium: .4s cubic-bezier(.22, 1, .36, 1);--transition-slow: .8s cubic-bezier(.22, 1, .36, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-body);font-weight:400;line-height:1.7;color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::selection{background-color:var(--color-accent);color:var(--color-white)}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:300;line-height:1.1;letter-spacing:.02em}p{margin-bottom:1em}a{color:inherit;text-decoration:none;transition:var(--transition-fast)}.app{min-height:100vh;overflow-x:hidden}.navigation{position:fixed;top:0;left:0;right:0;z-index:1000;padding:var(--space-md) var(--space-lg);transition:var(--transition-medium)}.navigation.scrolled{background-color:#fffc;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);padding:var(--space-sm) var(--space-lg);box-shadow:0 1px #0000001a}.nav-content{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.nav-logo{font-family:var(--font-body);font-size:.85rem;font-weight:500;letter-spacing:.15em;color:var(--color-text)}.nav-logo:hover{color:var(--color-accent)}.nav-links{display:flex;gap:var(--space-md);list-style:none}.nav-links a{font-size:.75rem;font-weight:500;letter-spacing:.1em;color:var(--color-text-light);position:relative;padding:.5em 0}.nav-links a:after{content:"";position:absolute;bottom:0;left:0;width:0;height:1px;background-color:var(--color-text);transition:var(--transition-fast)}.nav-links a:hover:after,.nav-links a.active:after{width:100%}.nav-links a.active{color:var(--color-text)}.menu-toggle{display:none;background:none;border:none;width:30px;height:24px;cursor:pointer;position:relative}.menu-toggle span,.menu-toggle span:before,.menu-toggle span:after{display:block;width:100%;height:1px;background-color:var(--color-text);position:absolute;transition:var(--transition-fast)}.menu-toggle span{top:50%;transform:translateY(-50%)}.menu-toggle span:before{content:"";top:-8px}.menu-toggle span:after{content:"";bottom:-8px}.menu-toggle span.open{background-color:transparent}.menu-toggle span.open:before{top:0;transform:rotate(45deg)}.menu-toggle span.open:after{bottom:0;transform:rotate(-45deg)}.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;padding:var(--space-xl) var(--space-lg);text-align:center}.hero-content{position:relative;z-index:2}.hero-name{margin-bottom:var(--space-md);height:80px;display:flex;align-items:center;justify-content:center}.hero-name h1{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,4.5rem);font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--color-text);white-space:nowrap;display:flex;align-items:center;justify-content:center}.typing-text{display:inline-block;min-width:1ch}.typing-cursor{animation:blink 1s step-end infinite;font-weight:300;color:var(--color-accent);margin-left:2px}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.hero-tagline{max-width:500px;margin:var(--space-lg) auto 0;font-size:.95rem;line-height:1.8;color:var(--color-text-light);height:2.5em;display:flex;align-items:center;justify-content:center}.hero-title-cycle{display:block;font-size:1.1rem;font-weight:400;letter-spacing:.05em;color:var(--color-text-muted)}.hero-location{margin-top:var(--space-md);font-size:.9rem;color:var(--color-text-light);letter-spacing:.02em}.quote-section{padding:var(--space-xl) var(--space-lg);text-align:center;background-color:var(--color-bg-dark)}.quote-text{font-family:var(--font-display);font-size:clamp(1.1rem,4vw,2.5rem);font-weight:500;font-style:italic;color:var(--color-text);letter-spacing:-.01em;max-width:800px;margin:0 auto;white-space:nowrap}.hero-scroll{position:fixed;left:50%;bottom:var(--space-md);transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);z-index:10}.hero-scroll span{font-size:.7rem;letter-spacing:.2em;color:var(--color-text-muted)}.scroll-line{width:1px;height:60px;background:linear-gradient(to bottom,var(--color-text-muted),transparent);animation:scrollPulse 2s ease-in-out infinite}@keyframes scrollPulse{0%,to{opacity:.3;transform:scaleY(.8)}50%{opacity:1;transform:scaleY(1)}}.hero-decoration{position:absolute;right:10%;top:50%;transform:translateY(-50%);opacity:.1}.hero-symbol{width:200px;height:200px;color:var(--color-text)}.section{padding:var(--space-xl) var(--space-lg);max-width:1200px;margin:0 auto}.section-header{display:flex;align-items:flex-start;gap:var(--space-md);margin-bottom:var(--space-lg)}.section-number{font-family:var(--font-body);font-size:.8rem;font-weight:500;color:var(--color-accent);letter-spacing:.05em;padding-top:.5em}.section-title{display:flex;flex-direction:column;gap:.25rem}.section-header h2{font-size:clamp(2rem,5vw,3rem);font-weight:600;letter-spacing:-.02em;color:var(--color-text)}.section-subtitle{font-size:.85rem;color:var(--color-text-muted);letter-spacing:.05em}.about-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);align-items:center}.about-intro{font-size:1.2rem;line-height:2;margin-bottom:var(--space-md);color:var(--color-text)}.about-text p{color:var(--color-text-light)}.about-hobbies{font-size:.9rem;color:var(--color-text-muted);margin-top:var(--space-xs)}.about-details{display:grid;gap:var(--space-sm);margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--color-border)}.detail-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xs) 0}.detail-label{font-size:.75rem;letter-spacing:.1em;color:var(--color-text-muted);text-transform:uppercase}.detail-value{font-size:.9rem;color:var(--color-text)}.about-image{display:flex;justify-content:center}.about-image img{width:400px;height:auto;object-fit:cover}.works{background-color:var(--color-bg-dark);max-width:none;padding:var(--space-xl)}.works .section-header,.works .works-grid{max-width:1200px;margin-left:auto;margin-right:auto}.works-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}.work-card{background-color:var(--color-bg);padding:var(--space-lg);transition:var(--transition-medium);border-radius:12px;border:1px solid var(--color-border)}.work-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px #0000001a}.work-card-header{display:flex;justify-content:space-between;margin-bottom:var(--space-md)}.work-year{font-family:var(--font-display);font-size:.85rem;color:var(--color-text-muted)}.work-category{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent)}.work-card h3{font-size:1.5rem;margin-bottom:var(--space-sm);color:var(--color-text)}.work-card p{font-size:.9rem;color:var(--color-text-light);margin-bottom:var(--space-md)}.work-tech{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.work-tech span{font-size:.7rem;padding:.3em .8em;background-color:var(--color-bg-dark);color:var(--color-text-muted);letter-spacing:.05em}.works-note{text-align:center;margin-top:var(--space-lg);font-size:.9rem;color:var(--color-text-muted)}.experience-timeline{display:flex;flex-direction:column;gap:var(--space-lg)}.experience-item{display:grid;grid-template-columns:200px 1fr;gap:var(--space-lg);padding-bottom:var(--space-lg);border-bottom:1px solid var(--color-border)}.experience-item:last-child{border-bottom:none}.experience-period{font-family:var(--font-display);font-size:.9rem;color:var(--color-text-muted)}.experience-content h3{font-size:1.4rem;margin-bottom:var(--space-xs);color:var(--color-text)}.experience-company{display:block;font-size:.85rem;color:var(--color-accent);margin-bottom:var(--space-sm)}.experience-content p{font-size:.9rem;color:var(--color-text-light);margin-bottom:0}.skills{background-color:var(--color-bg-light);max-width:none;padding:var(--space-xl)}.skills .section-header,.skills .skills-grid{max-width:1200px;margin-left:auto;margin-right:auto}.skills-grid{display:grid;grid-template-columns:1.2fr 1.2fr 1fr 1.5fr 1fr;gap:var(--space-lg)}.skill-category h3{font-size:1.1rem;margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid var(--color-border);color:var(--color-text)}.skill-category ul{list-style:none}.skill-category li{font-size:.9rem;color:var(--color-text-light);padding:var(--space-xs) 0;position:relative;padding-left:1em}.skill-category li:before{content:"";position:absolute;left:0;top:50%;width:4px;height:1px;background-color:var(--color-accent)}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}.blog-card{padding:var(--space-lg);background-color:var(--color-bg-light);transition:var(--transition-medium);cursor:pointer}.blog-card:hover{background-color:var(--color-white)}.blog-card-header{display:flex;justify-content:space-between;margin-bottom:var(--space-md)}.blog-date{font-family:var(--font-display);font-size:.8rem;color:var(--color-text-muted)}.blog-category{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent)}.blog-card h3{font-size:1.2rem;margin-bottom:var(--space-sm);color:var(--color-text);line-height:1.4}.blog-card p{font-size:.85rem;color:var(--color-text-light);margin-bottom:var(--space-md);line-height:1.7}.blog-link{font-size:.75rem;letter-spacing:.1em;color:var(--color-text-muted);display:inline-flex;align-items:center;gap:.5em}.blog-link:hover{color:var(--color-text)}.blog-link:after{content:"→";transition:var(--transition-fast)}.blog-link:hover:after{transform:translate(3px)}.contact{padding:var(--space-xl) var(--space-lg) calc(var(--space-xl) * 1.5)}.contact .section-header{text-align:left}.contact .contact-content{text-align:center}.contact-intro{font-size:1.1rem;color:var(--color-text-light);margin-bottom:var(--space-xl);line-height:2;text-align:left}.contact-links{display:flex;justify-content:center;gap:var(--space-xl)}.contact-link{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);padding:var(--space-md);transition:var(--transition-medium)}.contact-link:hover{transform:translateY(-3px)}.link-label{font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--color-text-muted)}.link-value{font-size:.9rem;color:var(--color-text)}.contact-link:hover .link-value{color:var(--color-accent)}.meishi-container{display:flex;flex-direction:column;align-items:center;margin-bottom:var(--space-lg)}.meishi-card{width:400px;height:230px;perspective:1000px}.meishi-inner{position:relative;width:100%;height:100%;transition:transform .8s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d}.meishi-card:hover .meishi-inner{transform:rotateY(180deg)}.meishi-front,.meishi-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;overflow:hidden;box-shadow:0 10px 40px #00000026}.meishi-front img,.meishi-back img{width:100%;height:100%;object-fit:cover}.meishi-back{transform:rotateY(180deg)}.meishi-hint{margin-top:var(--space-sm);font-size:.75rem;color:var(--color-text-muted);letter-spacing:.05em}.footer{background-color:var(--color-bg-dark);padding:var(--space-lg)}.footer-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.footer-name{font-size:.75rem;letter-spacing:.15em;color:var(--color-text-muted)}.footer-year{font-size:.75rem;color:var(--color-text-muted)}@media(max-width:1024px){.skills-grid{grid-template-columns:repeat(2,1fr)}.hero-decoration{display:none}}@media(max-width:768px){:root{--space-lg: 3rem;--space-xl: 5rem}.navigation{padding:var(--space-sm) var(--space-md)}.menu-toggle{display:block;z-index:10000;position:relative}.nav-links-desktop{display:none}.hero-name{height:auto;min-height:60px}.hero-name h1{font-size:clamp(1.8rem,8vw,2.8rem);white-space:normal;word-break:break-word}.hero-tagline{max-width:90%;padding:0 var(--space-sm)}.meishi-card{width:300px;height:172px}.about-content{grid-template-columns:1fr;gap:var(--space-lg)}.about-image{order:-1}.about-image img{width:280px}.works-grid{grid-template-columns:1fr}.experience-item{grid-template-columns:1fr;gap:var(--space-sm)}.skills-grid{grid-template-columns:1fr;gap:var(--space-md)}.blog-grid{grid-template-columns:1fr}.contact-links{flex-direction:column;gap:var(--space-md)}.footer-content{flex-direction:column;gap:var(--space-sm);text-align:center}}@media(max-width:480px){:root{--space-lg: 2rem;--space-xl: 4rem}.section,.hero{padding:var(--space-xl) var(--space-md)}.work-card,.blog-card{padding:var(--space-md)}}.mobile-menu{display:none}@media(max-width:768px){.mobile-menu{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fff;z-index:9999;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease}.mobile-menu.open{opacity:1;visibility:visible;pointer-events:auto}.mobile-menu-links{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;gap:var(--space-lg);list-style:none;padding:0;margin:0}.mobile-menu-links li{text-align:center}.mobile-menu-links a{font-size:1.5rem;font-weight:500;letter-spacing:.1em;color:var(--color-text);text-decoration:none;padding:.5em 1em;display:block;position:relative;transition:color .2s ease}.mobile-menu-links a:after{content:"";position:absolute;bottom:.3em;left:50%;width:0;height:1px;background-color:var(--color-accent);transition:width .3s ease,left .3s ease}.mobile-menu-links a:hover,.mobile-menu-links a.active{color:var(--color-accent)}.mobile-menu-links a:hover:after,.mobile-menu-links a.active:after{width:60%;left:20%}}@media print{.navigation,.hero-scroll,.hero-decoration,.mobile-menu{display:none}.hero{min-height:auto;padding:2rem}.section{padding:2rem 0;break-inside:avoid}}