:root{
  --bg:#0a0f1c;
  --card:rgba(158,199,255,.06);
  --card-hi:rgba(158,199,255,.1);
  --line:rgba(173,208,255,.18);
  --line-soft:rgba(173,208,255,.1);
  --text:#edf3fc;
  --muted:#aebfd8;
  --dim:#7d8caa;
  --ice:#9bd7ff;
  --blu:#58a6f0;
  --grad:linear-gradient(120deg,#cfeaff 0%,#7cc0f5 45%,#a78bfa 100%);
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.25,.6,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15.5px;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(124,192,245,.35)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px;border-radius:8px}
img{max-width:100%}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(50rem 36rem at 18% -6%, rgba(88,166,240,.16), transparent 65%),
    radial-gradient(44rem 32rem at 92% 30%, rgba(167,139,250,.1), transparent 65%)}

.bwrap{max-width:1160px;margin:0 auto;padding:16px 20px 44px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 6px 20px}
.brand{font-size:20px;font-weight:800;letter-spacing:.02em}

.grid{display:grid;gap:14px;grid-template-columns:repeat(12,1fr);
  grid-template-areas:
    "hero hero hero hero hero hero hero hero hero now now now"
    "hero hero hero hero hero hero hero hero hero now now now"
    "career career career career career career str str str str str str"
    "career career career career career career clif clif clif certs certs certs"
    "side side side side side comm comm comm comm comm comm comm"
    "out out out out out out out offer offer offer offer offer"
    "contact contact contact contact contact contact contact offer offer offer offer offer"}
.tile{border:1px solid var(--line-soft);background:var(--card);border-radius:20px;padding:26px 28px;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.tile:hover{border-color:rgba(155,215,255,.35);background:var(--card-hi)}

.t-hero{grid-area:hero}.t-now{grid-area:now}.t-career{grid-area:career}
.t-str{grid-area:str}.t-clif{grid-area:clif}.t-certs{grid-area:certs}.t-side{grid-area:side}
.t-comm{grid-area:comm}.t-out{grid-area:out}.t-offer{grid-area:offer}.t-contact{grid-area:contact}

.t-h{margin-bottom:14px}
.t-h h3{font-size:17px;font-weight:700}

.t-hero{display:flex;flex-direction:column;justify-content:center;padding:36px 38px}
.hero-row{display:flex;align-items:center;gap:26px;margin-bottom:10px;flex-wrap:wrap}
.medal{width:96px;height:96px;border-radius:50%;padding:3px;background:var(--grad);flex-shrink:0}
.medal img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:3px solid var(--bg)}
h1.name{font-weight:800;font-size:clamp(42px,4.6vw,58px);line-height:1.1;letter-spacing:-.01em}
.role{font-size:15px;color:var(--muted);margin-top:2px}
.who{font-family:var(--mono);font-size:13px;color:var(--dim);margin-top:4px}
.lead{font-size:15px;color:var(--muted);margin-top:10px;max-width:540px;line-height:2}
.meta-line{font-size:13.5px;color:var(--dim);margin-top:12px}
.social-line{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:18px}
.social-line a{font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line);text-decoration-thickness:1px;transition:all .25s var(--ease)}
.social-line a:hover{color:var(--ice);text-decoration-color:var(--ice)}

.t-now{display:flex;flex-direction:column;justify-content:center}
.gem-line{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.gem{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--blu) 75%);box-shadow:0 0 10px rgba(88,166,240,.6);animation:pulse 2.4s ease-out infinite;flex-shrink:0}
@keyframes pulse{0%{box-shadow:0 0 10px rgba(88,166,240,.6),0 0 0 0 rgba(88,166,240,.45)}70%,100%{box-shadow:0 0 10px rgba(88,166,240,.6),0 0 0 10px rgba(88,166,240,0)}}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px}
.stat .num{font-size:28px;font-weight:800;line-height:1.25}
.stat .num span{font-size:13px;font-weight:600;color:var(--muted);margin-left:2px}
.stat .lb{font-size:12px;color:var(--dim);margin-top:1px}
.t-now .co{font-size:18px;font-weight:700}
.t-now .rl{font-size:14px;color:var(--muted);margin-top:2px}
.t-now .yr{font-size:12.5px;color:var(--dim);margin-top:8px}

.mini{display:flex;gap:14px;align-items:baseline;padding:11px 0;border-top:1px solid var(--line-soft)}
.mini:first-of-type{border-top:none}
.mini .yr{font-family:var(--mono);font-size:12.5px;color:var(--dim);white-space:nowrap;min-width:112px}
.mini .co{font-size:15px;font-weight:700}
.mini .rl{display:block;font-size:13px;color:var(--muted);font-weight:400}
.side-list .mini .yr{min-width:112px}
.side-list .yr2{display:block;font-size:11px;color:var(--dim);opacity:.8}

.tbtn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--ice);
  border:1px solid rgba(155,215,255,.35);padding:7px 18px;background:rgba(155,215,255,.06);
  cursor:pointer;transition:all .2s var(--ease);margin-top:14px;font-family:var(--sans);border-radius:10px}
.tbtn:hover{background:rgba(155,215,255,.14)}

.str-list{list-style:none}
.str-list li{padding:8px 0 8px 18px;position:relative;font-size:15px;font-weight:600;border-top:1px solid var(--line-soft)}
.str-list li:first-child{border-top:none}
.str-list li::before{content:"";position:absolute;left:2px;top:1.05em;width:6px;height:6px;border-radius:50%;background:var(--blu)}

.clif-list{display:flex;flex-direction:column;gap:9px}
.clif-list .c{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:600}
.clif-list .g{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:var(--card-hi);border:1px solid var(--line);font-family:var(--mono);font-size:12.5px;color:var(--ice)}

.cert-list{display:flex;flex-direction:column;gap:11px}
.cert-list .c{padding-left:18px;position:relative;font-size:14px;font-weight:500;line-height:1.7}
.cert-list .c::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--blu)}

.hobby-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.hobby{font-size:13.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 16px}
.comm-desc{font-size:14px;color:var(--muted);line-height:1.95;margin-bottom:14px}
.comm-points{list-style:none;font-size:14px;color:var(--muted);margin-bottom:14px}
.comm-points li{padding-left:18px;position:relative;margin-bottom:3px;line-height:1.8}
.comm-points li::before{content:"";position:absolute;left:2px;top:.78em;width:6px;height:6px;border-radius:50%;background:var(--blu)}
.btn-row{display:flex;flex-wrap:wrap;gap:8px}
.glassbtn{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text);
  border:1px solid var(--line);background:rgba(10,15,28,.4);padding:8px 18px;border-radius:10px;transition:all .25s var(--ease)}
.glassbtn:hover{border-color:var(--ice);color:var(--ice)}

.count-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.count{font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 14px}
.count b{color:var(--ice);font-weight:600}
.ix{display:block;padding:9px 2px}
.ix-t{font-size:14px;color:var(--muted);line-height:1.75;transition:color .2s}
.ix:hover .ix-t{color:var(--text);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ice);text-decoration-thickness:1px}

.status{font-size:12px;font-weight:600;letter-spacing:.04em;padding:4px 14px;border-radius:999px;display:inline-block}
.status-closed{color:#fda4af;background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.3)}
.status-open{color:#6ee7b7;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.35)}
.of-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line-soft);font-size:14px;font-weight:600}
.of-row:first-of-type{border-top:none}
.of-row .k{font-size:13px;color:var(--dim);font-weight:400}

.t-contact{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.t-contact h3{font-size:20px;font-weight:700;margin-bottom:4px}
.t-contact p{color:var(--muted);font-size:14px;margin:6px 0 14px;max-width:440px}
.mail{font-size:18px;font-weight:600;color:var(--ice);border-bottom:1px solid rgba(155,215,255,.45);padding-bottom:2px;transition:all .2s var(--ease)}
.mail:hover{color:#fff;border-color:#fff}

dialog{border:1px solid var(--line);border-radius:18px;background:#0d1424;color:var(--text);
  max-width:700px;width:calc(100% - 36px);padding:0;margin:auto}
dialog::backdrop{background:rgba(3,6,13,.65)}
.dlg-in{padding:28px 32px 32px;max-height:80vh;overflow:auto}
.dlg-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.dlg-head h3{font-size:19px;font-weight:700}
.dlg-close{background:none;border:1px solid var(--line);color:var(--dim);border-radius:50%;width:34px;height:34px;cursor:pointer;font-size:14px;transition:all .2s var(--ease)}
.dlg-close:hover{color:var(--ice);border-color:var(--ice)}
.dlg-in h4{font-size:13.5px;font-weight:700;color:var(--ice);margin:16px 0 6px}
.dlg-in ul{list-style:none;font-size:14.5px;color:var(--muted)}
.dlg-in ul li{padding-left:17px;position:relative;margin-bottom:4px;line-height:1.8}
.dlg-in ul li::before{content:"";position:absolute;left:2px;top:.78em;width:6px;height:6px;border-radius:50%;background:rgba(124,192,245,.6)}
.dlg-in ul ul li::before{width:5px;height:5px;background:rgba(167,139,250,.55)}
.dlg-era{padding:18px 0;border-top:1px solid var(--line-soft)}
.dlg-era:first-of-type{border-top:none;padding-top:4px}
.dlg-era .yr{font-family:var(--mono);font-size:12.5px;color:var(--dim)}
.dlg-era h5{font-size:16.5px;font-weight:700;margin:2px 0 0}
.dlg-era .rl{font-size:13.5px;color:var(--muted);margin-bottom:6px}
.dlg-era p{font-size:14px;color:var(--muted);margin:6px 0}
.dlg-gift{padding:13px 0;border-top:1px solid var(--line-soft)}
.dlg-gift:first-of-type{border-top:none;padding-top:2px}
.dlg-gift h5{font-size:15.5px;font-weight:700}
.dlg-gift p{font-size:14px;color:var(--muted);line-height:1.9;margin-top:3px}
.ix-h{font-size:15px;font-weight:700;margin:18px 0 6px;display:flex;align-items:center;gap:12px}
.ix-h::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ccard{display:flex;flex-direction:column;gap:5px;background:var(--card);border-radius:14px;padding:16px 18px}
.ccard .ck{font-size:11.5px;color:var(--dim);letter-spacing:.02em}
.ccard .cv{font-size:15px;font-weight:700;line-height:1.5}
.ccard .note{font-size:12.5px;color:var(--muted);line-height:1.75;margin-top:1px}
.ccard:last-child:nth-child(odd){grid-column:1 / -1}

footer{text-align:center;padding:28px 0 10px;font-size:12.5px;color:var(--dim)}

@media (max-width:860px){
  .grid{display:flex;flex-direction:column}
  .t-hero{order:1}.t-now{order:2}.t-career{order:3}.t-side{order:4}.t-str{order:5}.t-clif{order:6}
  .t-certs{order:7}.t-comm{order:8}.t-out{order:9}.t-offer{order:10}.t-contact{order:11}
  h1.name{font-size:42px}
  .tile{padding:22px 22px}
  .t-hero{padding:26px 24px}
}
@media (max-width:520px){
  .cgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .gem{animation:none}
}