/* ========== CSS 変数 ========== */
:root{
    --primary:#00c6ff;
    --secondary:#0072ff;
    --accent:#ffb300;
    --bg:#0f172a;
    --card-bg:rgba(255,255,255,0.12);
    --blur:16px;
    --radius:14px;
    --shadow:0 8px 25px rgba(0,0,0,.3);
    --font-jp:'Noto Sans JP',sans-serif;
    --font-en:Poppins,system-ui,sans-serif;
  }
  
  /* ========== RESET ========== */
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:var(--font-jp);
    color:#e2e8f0;
    background:var(--bg);
    line-height:1.7;
    scroll-behavior:smooth;
  }
  
  /* ========== HERO ========== */
  .hero{
    min-height:60vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:linear-gradient(-45deg,var(--primary),var(--secondary));
    position:relative;
    overflow:hidden;
  }
  .hero::after{
    content:'';
    position:absolute;
    bottom:-1px;left:0;right:0;height:120px;
    background:var(--bg);
    clip-path:polygon(0 0,100% 100%,0 100%);
  }
  .hero__title{
    font-family:var(--font-en);
    font-size:clamp(2.2rem,6vw,4rem);
    background:linear-gradient(90deg,#fff,var(--accent),#fff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 6px rgba(255,255,255,.6));
    animation:hue 10s linear infinite;
  }
  @keyframes hue{
    0%{filter:drop-shadow(0 0 6px rgba(255,255,255,.6)) hue-rotate(0deg);}
    100%{filter:drop-shadow(0 0 6px rgba(255,255,255,.6)) hue-rotate(360deg);}
  }
  .scroll-icon{
    margin-top:3rem;width:24px;height:40px;border:2px solid #fff;
    border-radius:12px;position:relative;
  }
  .scroll-icon::after{
    content:'';position:absolute;left:50%;top:8px;width:4px;height:8px;
    background:#fff;border-radius:2px;
    transform:translateX(-50%);
    animation:scroll 1.4s infinite;
  }
  @keyframes scroll{
    0%{opacity:.8;transform:translate(-50%,0);}
    100%{opacity:0;transform:translate(-50%,16px);}
  }
  
  /* ========== MAIN LAYOUT ========== */
  main{width:min(92%,900px);margin:0 auto;padding-top:4rem}
  .card{
    background:var(--card-bg);
    backdrop-filter:blur(var(--blur));
    border-radius:var(--radius);
    padding:2rem;
    margin-bottom:2.5rem;
    box-shadow:var(--shadow);
    transform:translateY(20px);
    opacity:0;
    transition:transform .8s ease,opacity .8s ease;
  }
  .card.active{transform:none;opacity:1}
  h2{
    font-size:1.6rem;
    margin-bottom:1rem;
    color:var(--accent);
    font-weight:500;
  }
  
  /* ========== CONTACT ========== */
  .contact-list dt{font-weight:600}
  .contact-list dd{margin:0 0 .8rem}
  .contact-list a{
    color:var(--primary);
    font-weight:600;
    text-decoration:none;
  }
  .contact-list a:hover{text-decoration:underline}
  
  /* ========== PUBLICATIONS ========== */
  .pub-list{
    list-style-type:disc;
    padding-left:1.4rem;
  }
  .pub-list li{margin-bottom:.8rem}
  
  /* ========== TIMELINE ========== */
  .timeline{list-style:none;padding-left:0;position:relative}
  .timeline::before{
    content:'';position:absolute;left:13px;top:0;bottom:0;width:3px;
    background:linear-gradient(var(--accent),var(--primary));
  }
  .timeline li{
    position:relative;
    padding-left:2.8rem;
    margin-bottom:1.3rem;
  }
  .timeline li::before{
    content:'';position:absolute;left:4px;top:6px;width:16px;height:16px;
    background:var(--bg);
    border:3px solid var(--accent);
    border-radius:50%;
  }
  .year{
    color:var(--accent);
    font-weight:700;
    margin-right:.4rem;
  }
  
  /* ========== LINK BUTTON ========== */
  .btn{
    display:inline-block;
    margin-top:.4rem;
    padding:.6rem 1.4rem;
    border-radius:30px;
    background:linear-gradient(135deg,var(--primary),var(--accent));
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:transform .25s ease;
  }
  .btn:hover{transform:translateY(-3px) scale(1.03)}
  
  /* ========== FOOTER ========== */
  footer{
    padding:2rem 0;
    text-align:center;
    font-size:.9rem;
    color:#94a3b8;
  }
  
  /* ========== MEDIA QUERIES ========== */
  @media(max-width:600px){
    .hero::after{height:80px}
    .card{padding:1.6rem}
  }