:root{--fg:#1a1a1a;--muted:#6b7280;--line:#e6e6e6;--accent:#8BD3DD;--accent-ink:#0e3b40;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--radius:16px;--content-max: 880px;--page-pad: clamp(20px, 6vw, 56px);--header-h:64px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--fg);font:16px/1.8 Noto Sans JP,system-ui,-apple-system,Segoe UI,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";background:none}body:before{content:"";position:fixed;inset:0;z-index:-2;background:var(--hero-bg-image) center / cover no-repeat;transform:translateZ(0);will-change:transform}body:after{content:"";position:fixed;inset:0;z-index:-1;background:#ffffffad}.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding-inline:var(--page-pad);border-bottom:1px solid var(--line);background:color-mix(in srgb,rgba(255,255,255,.85) 100%,transparent);-webkit-backdrop-filter:saturate(1.1) blur(8px);backdrop-filter:saturate(1.1) blur(8px)}.brand{color:var(--fg);font-weight:700;letter-spacing:.04em;text-decoration:none}.brand-accent{color:var(--accent)}.hamburger{border:1px solid var(--line);background:#fff;padding:8px 12px;border-radius:10px;display:none}.nav{display:flex;gap:12px;align-items:center}.nav a{color:var(--fg);padding:8px 10px;text-decoration:none;border-radius:10px}.nav a.is-active,.nav a:hover{background:var(--accent);color:var(--accent-ink)}@media (max-width: 900px){.hamburger{display:inline-block}.nav{position:absolute;right:var(--page-pad);top:calc(var(--header-h) - 2px);flex-direction:column;align-items:stretch;gap:6px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;display:none}.nav.is-open{display:flex}}.section{padding-block:var(--space-16);scroll-margin-top:calc(var(--header-h) + 16px)}.container{max-width:var(--content-max);margin:0 auto;padding-inline:var(--page-pad)}.section-title{text-align:center;font-size:clamp(28px,4vw,42px);margin:0 0 var(--space-12)}.section-title:after{content:"";display:block;width:120px;height:4px;margin:12px auto 0;background:#a2e5ed;border-radius:2px}.grid-2{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--space-12)}.about-photo{display:flex;justify-content:center;align-items:flex-start}.about-photo img{width:min(300px,80%);aspect-ratio:1/1;object-fit:cover;border-radius:999px;border:8px solid #fff;box-shadow:0 5px 30px #00000014}.about-text{align-self:center}.about-name{font-size:clamp(22px,2.8vw,28px);margin:0 0 var(--space-4)}.roman{font-weight:400;color:var(--fg);margin-left:8px}.lead{margin:0;color:#444}@media (max-width: 900px){.grid-2{grid-template-columns:1fr;text-align:center}.about-text{justify-self:center}}.work-row{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-12);align-items:center;margin-bottom:var(--space-16)}.work-row.reverse{grid-template-columns:.9fr 1.1fr}.work-row.reverse .work-text{order:2}.work-row.reverse .work-image{order:1}.work-image img{width:100%;max-width:clamp(320px,42vw,520px);height:auto;border-radius:12px;box-shadow:0 10px 40px #0000001a}.work-title{font-size:clamp(22px,2.8vw,30px);margin:0 0 var(--space-3)}.work-desc{margin:0;color:#505050}@media (max-width: 900px){.work-row,.work-row.reverse{grid-template-columns:1fr}.work-image img{max-width:100%}}.work-actions{display:flex;gap:12px;margin-top:var(--space-6);flex-wrap:wrap}.btn{display:inline-block;padding:10px 16px;border-radius:12px;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:700}.btn:hover{filter:brightness(.98)}.btn-outline{display:inline-block;padding:10px 16px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--fg);text-decoration:none}.btn-outline:hover{background:color-mix(in srgb,#fff 90%,var(--accent) 10%)}.work-image{display:flex;justify-content:center}.work-image img,.work-image .work-video{width:100%;max-width:clamp(450px,50vw,600px);max-height:300px;border-radius:12px;box-shadow:0 10px 40px #0000001a}.skill-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8)}.skill-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}:root{--skill-image-ar: 4 / 3;--skill-media-inset: 6%}.skill-image{position:relative;background:#fff;border-bottom:1px solid var(--line)}.skill-image:before{content:"";display:block;aspect-ratio:var(--skill-image-ar);width:100%}.skill-image img{position:absolute;inset:var(--skill-media-inset);width:calc(100% - 2 * var(--skill-media-inset));height:calc(100% - 2 * var(--skill-media-inset));object-fit:contain;border-radius:10px;background:#fff}.skill-title{margin:var(--space-4) var(--space-4) var(--space-2);font-size:20px}.skill-body{margin:0 var(--space-4) var(--space-6);color:#505050}.skill-body a,.inline-link{color:#505050;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:color .15s ease,text-decoration-thickness .15s ease}.skill-body a:hover,.inline-link:hover{color:#505050c7;text-decoration-thickness:2px}@media (max-width: 900px){.skill-grid{grid-template-columns:1fr}}.timeline{position:relative;margin-left:8px;padding-left:18px}.timeline:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--line)}.timeline-item{display:grid;grid-template-columns:80px 20px 1fr;gap:16px;margin-bottom:var(--space-6)}.timeline-year{font-weight:700}.timeline-dot{width:14px;height:14px;border-radius:50%;background:var(--fg);margin-top:4px;box-shadow:0 0 0 3px #0f172a14}.timeline-text{color:#444}@media (max-width: 600px){.timeline-item{grid-template-columns:62px 20px 1fr}}.contact-block{border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-8);background:#fff;text-align:center;max-width:420px;margin:0 auto}.contact-lead{color:var(--muted);margin-bottom:var(--space-6);line-height:1.6}.contact-x-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px;border-radius:14px;font-weight:700;letter-spacing:.04em;background:var(--accent);color:var(--accent-ink);text-decoration:none;transition:filter .15s ease}.contact-x-link:hover{filter:brightness(.97)}.contact-x-link:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:2px}.contact-x-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:14px;font-weight:800;background:#000;color:#fff;border-radius:6px}.site-footer{border-top:1px solid var(--line);text-align:center;color:#5f6673;padding:var(--space-6)}:root{--em-ink: var(--accent-ink);--em-bg: color-mix(in srgb, var(--accent) 22%, #fff);--em-outline: color-mix(in srgb, var(--em-ink) 12%, transparent)}:where(.section,.work-desc,.skill-body,.lead) strong{font-weight:800}:where(.section,.work-desc,.skill-body,.lead) em{font-style:italic}:where(.section,.work-desc,.skill-body,.lead) mark{background:var(--em-bg);color:var(--em-ink);padding:0 .25em;border-radius:4px}.em{color:var(--em-ink);background:var(--em-bg);padding:0 .25em;border-radius:6px;box-shadow:0 0 0 1px var(--em-outline) inset}.em-clean{color:#f87a48;font-weight:700}.muted{color:var(--muted)}.u{color:#e4622e;text-decoration:underline;text-underline-offset:2px}.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:.92em;background:#f3f4f6;border:1px solid var(--line);border-radius:6px;padding:0 .35em}.badge{display:inline-block;line-height:1.8;padding:0 .6em;border-radius:999px;background:var(--accent-weak);color:var(--accent-ink);border:1px solid var(--line)}