*{margin:0;padding:0;box-sizing:border-box}body{font-family:Helvetica Neue,Arial,Hiragino Kaku Gothic ProN,Hiragino Sans,Meiryo,sans-serif;line-height:1.7;color:#2d3748;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.container{max-width:900px;margin:40px auto;padding:40px;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 25px 50px #00000026;border-radius:20px;border:1px solid rgba(255,255,255,.2)}.header-section{text-align:center;margin-bottom:40px}.profile-photo{width:200px;height:200px;border-radius:50%;object-fit:cover;border:6px solid transparent;background:linear-gradient(135deg,#667eea,#764ba2);background-clip:padding-box;box-shadow:0 15px 35px #0003;margin-bottom:30px;transition:all .3s ease}.profile-photo:hover{transform:scale(1.05);box-shadow:0 20px 40px #0000004d}h1{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;font-size:3.5em;font-weight:700;margin-bottom:0;letter-spacing:-2px;position:relative}h1:after{content:"";display:block;width:80px;height:4px;background:linear-gradient(135deg,#667eea,#764ba2);margin:20px auto 0;border-radius:2px}h2{color:#2d3748;margin-top:50px;margin-bottom:25px;font-size:2em;font-weight:600;position:relative;padding-left:30px}h2:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:40px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:3px}h3{color:#2c3e50;margin-top:30px;margin-bottom:15px;font-size:1.3em}h4{color:#2c3e50;margin-top:20px;margin-bottom:10px;font-size:1.1em;font-weight:600}p,li{margin-bottom:8px;font-size:14px}ul{margin-left:20px;margin-bottom:15px}.basic-info{background:linear-gradient(135deg,#667eea1a,#764ba21a);padding:30px;border-radius:15px;margin-bottom:40px;border:1px solid rgba(102,126,234,.2);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.basic-info p{margin-bottom:8px;font-size:18px;font-weight:500}.section{margin-bottom:40px}.company{background:linear-gradient(135deg,#ffffffe6,#ffffffb3);padding:30px;border-radius:15px;margin-bottom:40px;border:1px solid rgba(102,126,234,.3);box-shadow:0 10px 25px #0000001a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:relative;overflow:hidden}.company:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(135deg,#667eea,#764ba2)}.project{background:#fffc;padding:20px;border-radius:12px;margin-bottom:25px;border:1px solid rgba(102,126,234,.2);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:transform .3s ease,box-shadow .3s ease}.project:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00000026}.tech-skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px;margin-top:30px}.skill-category{background:linear-gradient(135deg,#ffffffe6,#ffffffb3);padding:25px;border-radius:15px;border:1px solid rgba(102,126,234,.3);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:transform .3s ease,box-shadow .3s ease;position:relative;overflow:hidden}.skill-category:before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(135deg,#667eea,#764ba2)}.skill-category:hover{transform:translateY(-3px);box-shadow:0 10px 25px #00000026}.skill-category h4{margin-top:0;color:#2d3748;font-size:1.2em;font-weight:600}strong{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:600}a{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-decoration:none;font-weight:500;transition:all .3s ease}a:hover{text-decoration:underline;transform:scale(1.05)}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 80%,rgba(120,119,198,.3) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,119,198,.3) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(120,219,255,.3) 0%,transparent 50%);z-index:-1;animation:float 6s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(180deg)}}.section{opacity:0;transform:translateY(30px);transition:all .6s ease}.section.visible{opacity:1;transform:translateY(0)}@media (max-width: 768px){.container{margin:15px;padding:25px}.profile-photo{width:150px;height:150px;margin-bottom:20px}h1{font-size:2.5em}h2{font-size:1.5em;padding-left:25px}h2:before{width:4px;height:30px}.tech-skills{grid-template-columns:1fr}.company,.basic-info,.skill-category{padding:20px}.sns-links{grid-template-columns:1fr}}.grid-container{margin-top:25px}.card{background:linear-gradient(135deg,#ffffffe6,#ffffffb3);border-radius:15px;border:1px solid rgba(102,126,234,.3);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:relative;overflow:hidden}.card-hover{transition:transform .3s ease,box-shadow .3s ease}.card-hover:hover{transform:translateY(-3px);box-shadow:0 10px 25px #00000026}.sns-links{gap:20px}.sns-item{display:flex;align-items:center;background:linear-gradient(135deg,#ffffffe6,#ffffffb3);padding:20px;border-radius:15px;border:1px solid rgba(102,126,234,.3);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:all .3s ease;position:relative;overflow:hidden}.sns-item:before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(135deg,#667eea,#764ba2)}.sns-item:hover{transform:translateY(-5px);box-shadow:0 15px 30px #0003}.sns-icon{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-right:20px;transition:all .3s ease}.sns-icon svg{width:28px;height:28px}.sns-icon.github{background:linear-gradient(135deg,#333,#24292e);color:#fff}.sns-icon.linkedin{background:linear-gradient(135deg,#0077b5,#005885);color:#fff}.sns-icon.zenn{background:linear-gradient(135deg,#3ea8ff,#0969da);color:#fff}.sns-item:hover .sns-icon{transform:scale(1.1) rotate(5deg)}.sns-content h4{margin:0 0 5px;color:#2d3748;font-size:1.1em;font-weight:600}.sns-content a{font-size:14px;opacity:.8;transition:opacity .3s ease}.sns-content a:hover{opacity:1}