:root{--bg: #1a0808;--bg2: #241010;--bg3: #2e1818;--cream: #ffffff;--cream-dim: rgba(255, 255, 255, .6);--accent: #1a1af3;--accent-text: #9fd6ff;--border: rgba(26, 26, 243, .3);--serif: "DM Sans", "Noto Sans JP", sans-serif;--display: "Paytone One", "Noto Sans JP", sans-serif;--mono: "Courier Prime", "Courier New", monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;overflow-x:clip;overflow-y:scroll;width:100%}body{background:var(--bg);color:var(--cream);font-family:var(--serif);font-weight:300;font-size:16px;line-height:1.75;width:100%;min-width:0;padding-bottom:60px;-webkit-text-size-adjust:100%;text-size-adjust:100%}.work-thumb:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' seed='5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.5 -0.5'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23g)'/%3E%3C/svg%3E");background-size:400px 400px;border-radius:12px;opacity:.001}.work-thumb:hover:before{opacity:.35}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}ul{list-style:none}#nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:flex-start;column-gap:50px;row-gap:4px;flex-wrap:wrap;padding:16px 32px 16px 52px;background:transparent}.nav-logo-btn{position:relative;margin-left:24px}.nav-logo-btn .dymo-hover{position:absolute;top:0;left:0;opacity:0}.nav-logo-btn:hover .dymo-default{opacity:0}.nav-logo-btn:hover .dymo-hover{opacity:1}@media(max-width:768px){#nav{padding:16px}#nav.scrolled{padding:12px 16px}.filter-btn img{height:22px}.nav-logo-btn{margin-left:12px}.works-filter{gap:6px}}#works,#about,#contact{padding-top:80px}section{padding:120px 52px}@media(max-width:768px){section{padding:80px 16px}}.section-header{display:flex;align-items:baseline;gap:24px;margin-bottom:72px;padding-bottom:20px}.section-num{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--cream-dim)}.section-title{font-family:var(--display);font-size:36px;letter-spacing:.06em;flex:1}.works-filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:0;justify-content:flex-start}@media(max-width:900px){.works-filter{margin-left:0;justify-content:flex-start;width:100%}}.filter-btn{position:relative;background:none;border:none;padding:0;cursor:pointer;line-height:0}.filter-btn img{height:28px;width:auto;display:block;border-radius:0}.filter-btn:hover img,.filter-btn.active img{filter:brightness(2)}.filter-btn.hidden-filter{display:none}.works-grid{margin-bottom:24px}.works-columns{display:flex;gap:24px}.works-col{flex:1;display:flex;flex-direction:column;gap:24px}@media(max-width:600px){.works-columns{flex-direction:column}}.work-card{cursor:pointer;position:relative;color:inherit}.work-card.hidden{display:none}.work-card-note{display:flex;align-items:stretch;gap:16px;border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:12px;background:#ffffff05;position:relative}.work-card-note .work-year{display:inline-block;position:absolute;right:12px;bottom:10px;font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--cream-dim)}.work-card-note .work-thumb{flex:0 0 auto;min-height:0;border-radius:8px;background:transparent;max-width:40%}.work-card-note .work-thumb img{width:auto;height:auto;max-width:100%;max-height:160px;object-fit:contain}.work-card-note .work-thumb-placeholder{display:none}.work-card-note .work-info{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;padding:0;border-top:none;margin-top:0}.work-card-note:hover{border-color:#fff9}.work-card-note .work-thumb,.work-card-note .work-thumb img{transition:none!important;animation:none!important}.work-thumb{position:relative;overflow:hidden;background:transparent;border-radius:12px;min-height:120px}.work-thumb:after{content:"";position:absolute;inset:0;border-radius:12px;border:.8px solid transparent;pointer-events:none;z-index:5}.work-thumb:hover:after{border-color:#fff6}.work-thumb img.work-thumb-blur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:2;opacity:0;pointer-events:none}.work-thumb:hover img.work-thumb-blur{opacity:1}.work-card-note img.work-thumb-blur{display:none}.work-card[data-category~=text] .work-thumb:hover img,.work-card-note .work-thumb:hover img{filter:none}.work-card[data-category~=text] .work-thumb:before,.work-card-note .work-thumb:before{display:none}.work-card[data-category~=text] .work-thumb:hover:after,.work-card-note .work-thumb:hover:after{border-color:transparent}.work-thumb img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}.work-thumb-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;letter-spacing:.4em;color:#e4d8c433;background:var(--bg2);z-index:0}.work-info{display:flex;align-items:baseline;gap:12px;padding:12px 0 0;border-top:1px solid var(--border);margin-top:2px}.work-category{font-family:Inder,Zen Kaku Gothic New,sans-serif;font-size:9px;letter-spacing:.2em;color:var(--accent-text);flex-shrink:0}.work-title{font-family:Inder,Zen Kaku Gothic New,sans-serif;font-size:14px;font-weight:400;flex:1;white-space:pre-line}.work-year{font-family:Inder,Zen Kaku Gothic New,sans-serif;font-size:10px;color:var(--cream-dim);flex-shrink:0}#about .section-header{margin-bottom:28px}#about .section-title{color:#fff}.about-inner{display:grid;grid-template-columns:1fr .7fr;gap:60px;align-items:start}.about-image{position:relative;overflow:hidden;background:var(--bg2);margin-top:-56px}.about-image:before{display:none}.about-image:after{content:"";position:absolute;inset:0;border:.8px solid rgba(255,255,255,.4);pointer-events:none;z-index:5}.about-img-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;letter-spacing:.4em;color:#e4d8c42e;background:var(--bg2)}.about-image img{width:100%;height:auto;display:block;filter:sepia(10%) brightness(1.12)}.about-text{display:flex;flex-direction:column;gap:22px;padding-top:4px}.about-name-row{display:flex;align-items:flex-end;gap:16px}.about-name-col,.about-role-col{display:flex;flex-direction:column;flex-shrink:0}.about-name-ja-img{height:64px;width:auto;display:block;mix-blend-mode:screen;margin-left:-8px;transform:rotate(1deg)}.about-role-ja-img{height:60px;width:auto;display:block;mix-blend-mode:screen;margin-bottom:8px;transform:rotate(1deg) translateY(7px)}.about-name-en{font-family:Quicksand,sans-serif;font-size:24px;font-weight:700;color:#fff;letter-spacing:.02em;line-height:1.2;margin-left:12px}.about-role-en{font-family:Quicksand,sans-serif;font-size:15px;font-weight:700;letter-spacing:.04em;color:#ffffffb3;margin-left:24px;margin-top:4px}.about-text p{font-size:15px;color:#ffffffbf;line-height:2}.about-text p a{text-decoration:none;color:inherit;border-bottom:1px solid rgba(255,255,255,.4);padding:1px 4px}.about-text p a:hover{color:#000;border-bottom-color:var(--accent);background:var(--accent);box-shadow:0 0 0 1px var(--accent);text-shadow:.3px 0 0 currentColor,-.3px 0 0 currentColor}@media(max-width:480px){.about-text p{font-size:13px}.section-title{font-size:28px}}.about-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}.tag{font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--cream-dim);border:1px solid var(--border);padding:5px 14px;transition:border-color .3s,color .3s}.tag:hover{border-color:var(--accent);color:var(--accent)}.about-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}.link-btn{font-family:var(--mono);font-size:10px;letter-spacing:.18em;padding:9px 22px;border:1px solid var(--border);color:var(--cream-dim);transition:border-color .3s,color .3s}.link-btn:hover{border-color:var(--cream);color:var(--cream)}@media(max-width:900px){.about-inner{grid-template-columns:1fr;gap:48px}.about-image{margin-top:0!important}.about-name-row{flex-direction:column;align-items:flex-start;gap:4px}.about-name-col,.about-role-col{align-items:flex-start}.about-name-ja-img{height:44px;margin-left:-4px}.about-role-ja-img{height:36px;margin-bottom:0;transform:rotate(1deg) translateY(0);margin-left:-4px}.about-name-en{margin-left:4px;font-size:16px}.about-role-en{margin-left:4px;font-size:12px}}#contact{border-bottom:1px solid var(--border)}.contact-inner{max-width:720px}.contact-lead{font-size:clamp(18px,2.5vw,24px);font-style:normal;color:var(--cream-dim);margin-bottom:52px}.contact-form{display:flex;flex-direction:column;gap:28px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:28px}@media(max-width:600px){.form-row{grid-template-columns:1fr}}.form-group{display:flex;flex-direction:column;gap:10px}label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--cream-dim)}.required{color:var(--accent)}input,textarea{background:transparent;border:none;border-bottom:1px solid var(--border);color:var(--cream);font-family:var(--serif);font-size:16px;font-style:normal;padding:10px 0;outline:none;width:100%;transition:border-color .3s}input::placeholder,textarea::placeholder{color:#e4d8c42e;font-style:normal}input:focus,textarea:focus{border-bottom-color:var(--accent)}textarea{resize:vertical;min-height:120px}.submit-btn{display:inline-flex;align-items:center;gap:14px;background:transparent;color:var(--cream);font-family:var(--mono);font-size:11px;letter-spacing:.22em;border:1px solid var(--border);padding:15px 36px;cursor:pointer;align-self:flex-start;margin-top:8px;transition:border-color .3s,background .3s,gap .3s}.submit-btn:hover{border-color:var(--accent);background:#b8704314;gap:22px}.submit-btn svg{width:16px;height:16px}.contact-email{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:48px;font-family:var(--mono);font-size:11px;color:var(--cream-dim)}.email-link{color:#fff;font-style:normal;font-family:var(--serif);font-size:16px;border:1px solid transparent;border-bottom:1px solid rgba(255,255,255,.3);padding:1px 4px 2px;background:transparent;cursor:pointer;position:relative}.email-link:hover{color:#fff;border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 1px var(--accent);text-shadow:.3px 0 0 currentColor,-.3px 0 0 currentColor}.email-link.copied:after{content:"コピーしました";position:absolute;left:50%;bottom:calc(100% + 4px);transform:translate(-50%);font-family:var(--serif);font-size:11px;letter-spacing:.05em;color:var(--accent);white-space:nowrap;pointer-events:none}.icon-link{color:#ffffffb3;display:inline-flex}.icon-link:hover{color:var(--accent-text)}.about-email{display:flex;align-items:center;gap:12px;margin-top:16px}.about-email .vlog-entry{margin-left:48px;margin-top:0;align-items:center;transform:translateY(-6px)}.about-email .vlog-entry-label{position:relative}footer{position:fixed;bottom:0;left:0;right:0;padding:20px 52px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--cream-dim);background:transparent;pointer-events:none;z-index:100}footer a{pointer-events:auto}@media(max-width:768px){footer{padding:24px}}.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;pointer-events:none;opacity:0;transition:opacity .4s ease}.modal.open{opacity:1;pointer-events:all}.modal-backdrop{position:absolute;inset:0;background:#0095d3f5;backdrop-filter:blur(6px);cursor:pointer}.modal-content{position:relative;width:100%;max-width:960px;z-index:1;transform:scale(.96);transition:transform .4s cubic-bezier(.34,1.3,.64,1)}.modal.open .modal-content{transform:scale(1)}.modal-close{position:absolute;top:-44px;right:0;background:none;border:none;color:var(--cream-dim);cursor:pointer;padding:4px;transition:color .3s,transform .3s}.modal-close:hover{color:var(--cream);transform:rotate(90deg)}.modal-close svg{width:24px;height:24px}.modal-info{display:flex;align-items:center;gap:16px;margin-bottom:14px}.modal-label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--accent);border:1px solid var(--accent);padding:2px 8px}.modal-title{font-family:var(--serif);font-size:16px;font-weight:400}.modal-video-wrap{position:relative;padding-bottom:56.25%;height:0;background:#000}.modal-video-wrap iframe{position:absolute;inset:0;width:100%;height:100%}
