/* Company UI v2: action affordance is visible without hover, mouse or prior web knowledge. */
:root{--action-bg:#dcf6ff;--action-ink:#071626;--action-border:#adeaff}
:is(a.button,button.service-detail-action,a.case-link,button.plain-button,.case-dialog-content a,.case-route-close){display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:52px;max-width:100%;padding:14px 18px;border:1px solid var(--action-border);border-radius:6px;background:linear-gradient(120deg,#effbff,#c6edff);color:var(--action-ink);font-size:15px;font-weight:700;line-height:1.65;letter-spacing:0;text-decoration:none;text-align:left;box-shadow:0 3px 0 #4a7890,0 8px 24px #0004;cursor:pointer;overflow-wrap:anywhere;transition:background .16s,box-shadow .16s}
:is(a.button,button.service-detail-action,a.case-link,button.plain-button,.case-dialog-content a,.case-route-close):hover{background:#fff;color:#071626;box-shadow:0 3px 0 #6393a9,0 8px 26px #91dfff38}
:is(a.button,button.service-detail-action,a.case-link,button.plain-button,.case-dialog-content a,.case-route-close):active{background:#addff4;box-shadow:0 1px 0 #4a7890,inset 0 2px 5px #284e6633;transform:none}
.action-arrow{font-size:22px;line-height:1;flex:none}
:is(a.case-link,button.plain-button,.case-dialog-content a,.case-route-close):after{content:'→';font-size:21px;line-height:1;flex:none}
.case-card .case-link{display:flex;text-decoration:none;min-height:52px;color:var(--action-ink);padding:14px 18px;line-height:1.65}
.service-detail-action{align-self:flex-start;margin-top:28px}
.hero .button{width:min(100%,500px);font-size:16px}.relationship .button{font-size:15px}
.scene-detail-copy .scene-detail-note{padding:0;border:0;background:none;box-shadow:none;cursor:default}
.desktop-nav{gap:8px}.desktop-nav a,.mobile-nav a,.footer-nav a{min-height:46px;padding:9px 13px;border:1px solid #c4e8ff65;border-radius:5px;background:#0c2135;color:#e7f7ff;line-height:1.7;font-size:13px;text-decoration:none}
.desktop-nav a:after,.mobile-nav a:after,.footer-nav a:after{content:' →';color:#adeaff;white-space:nowrap}
.desktop-nav a:hover,.mobile-nav a:hover,.footer-nav a:hover{background:#1d3c53;color:#fff}.desktop-nav a:active,.mobile-nav a:active,.footer-nav a:active{background:#2b5067}
.menu-toggle{border:1px solid #afdfff;border-radius:5px;background:#e1f5ff;color:#092035;font-weight:700;letter-spacing:0;min-height:46px;padding:8px 12px;min-width:80px;font-size:13px;box-shadow:0 2px 0 #547f98}
.menu-toggle[aria-expanded=true]{background:#a9dced}.menu-toggle:active{box-shadow:inset 0 2px 5px #20445644}
.mobile-nav{max-height:calc(100dvh - var(--header-space,var(--header)));overflow:auto;overscroll-behavior:contain}.mobile-nav a{display:flex;justify-content:space-between;margin:9px 0;padding:13px 16px}
.filter-bar{gap:10px}.filter-bar button{border:1px solid #a8cce06b;border-radius:5px;background:#102338;padding:10px 16px;min-height:46px;color:#d0e6f4;font-weight:650}.filter-bar button[aria-pressed=true]{background:#d6f2ff;border-color:#e9faff;color:#092236;box-shadow:inset 0 -3px 0 #77afc8}.filter-bar button[aria-pressed=true]:before{content:'✓ ';font-weight:800}
.footer-nav{gap:12px}.footer-nav button.plain-button{background:#10283c;color:#e7f7ff;border-color:#c4e8ff65;box-shadow:none;font-size:13px;min-height:46px;padding:9px 13px}.footer-nav button.plain-button:after{font-size:17px}.footer-nav a{display:inline-flex;align-items:center}
a.brand{position:relative;padding-block:5px}.brand-return{font-size:10px;letter-spacing:0;font-weight:600;line-height:1.5;border:1px solid #b8d8ea7a;border-radius:3px;padding:3px 5px;color:#c7eaff;background:#102338;margin-left:4px;white-space:nowrap}
:is(a,button):focus-visible{outline:3px solid #fff;outline-offset:4px;box-shadow:0 0 0 7px #0863a2;scroll-margin:18px}.skip:focus{z-index:1000;background:#e5f8ff;color:#092236;border-radius:5px}
.scene-action{border-radius:6px;border-color:#dcf9ff;box-shadow:0 3px 0 #487c99,0 8px 25px #0005}.scene-action:active{transform:none;background:#bceeff;box-shadow:inset 0 2px 5px #28526a44}.motion-toggle{border-color:#aecfe3aa;border-radius:5px;background:#0b2138e8;font-weight:650;font-size:12px}.motion-toggle:hover{background:#183c59}
/* Art lives behind the entire native dialog, not in a disappearing header thumbnail. */
dialog.cinematic-dialog{--scene-a:#56d7ff;--scene-b:#a6a2ff;width:min(1120px,calc(100% - 48px));max-width:1120px;height:min(880px,calc(100svh - 48px));max-height:calc(100svh - 48px);padding:0;border:1px solid color-mix(in srgb,var(--scene-a) 65%,#ffffff 20%);border-radius:14px;background:#07101e;overflow:hidden;isolation:isolate;box-shadow:0 0 0 5px #8ddfff0d,0 28px 110px #000c,0 0 65px color-mix(in srgb,var(--scene-a) 15%,transparent)}
dialog.cinematic-dialog[open]{display:flex;flex-direction:column}
dialog.cinematic-dialog::backdrop{background:#01040cd9;backdrop-filter:blur(8px)}
.cinematic-dialog>.scene-detail-visual{position:absolute;inset:0;z-index:-2;width:100%;height:100%;margin:0;border:0;background:radial-gradient(ellipse at 75% 30%,#17364c,#050b17 75%);pointer-events:none;overflow:hidden}
.cinematic-dialog>.scene-detail-visual:after{content:'';position:absolute;inset:0;border:10px solid #c8efff08;box-shadow:inset 0 0 0 1px #cdf1ff1a;background:linear-gradient(90deg,#02091450,transparent 62%),linear-gradient(0deg,#03081688,transparent 35%);pointer-events:none}
.cinematic-dialog>.scene-detail-visual:before{content:'';position:absolute;z-index:1;inset:20px;border:1px solid #c9eaff21;border-radius:3px;clip-path:polygon(0 0,35% 0,35% 1%,1% 1%,1% 35%,0 35%,0 0,100% 100%,65% 100%,65% 99%,99% 99%,99% 65%,100% 65%,100% 100%);pointer-events:none}
.cinematic-dialog>.scene-detail-tools{position:relative;z-index:4;flex:none;min-height:70px;padding:12px 20px;margin:0;background:#061121e8;border-bottom:1px solid #c7eaff3b;box-shadow:0 10px 30px #0002}
.cinematic-dialog .dialog-motion-toggle,.cinematic-dialog .close{font-size:13px;min-height:44px;border:1px solid #c7eaff91;border-radius:5px;line-height:1.5;background:#19354a;color:#f0faff;padding:11px 14px;font-weight:650;box-shadow:0 2px 0 #020713}
.cinematic-dialog .close{background:#e0f5ff;color:#082039;border-color:#f4fcff;min-width:94px}
.cinematic-dialog .close:before{content:'×';font-size:18px;margin-right:9px;vertical-align:-1px}.cinematic-dialog :is(.close,.dialog-motion-toggle):active{box-shadow:inset 0 2px 5px #15384a77}
.cinematic-dialog .scene-detail-scroll{position:relative;z-index:1;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-color:var(--scene-a) #0a1729;scrollbar-gutter:stable;padding:0 34px 46px;scroll-padding:22px}
.scene-detail-intro{min-height:156px;padding:27px 0 24px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:7px;color:#e5f8ff;text-shadow:0 2px 12px #020712}
.modal-art-kicker{font-size:10px;letter-spacing:.16em;line-height:1.6;color:#ccdeed}.modal-art-name{font-size:clamp(20px,3vw,32px);letter-spacing:.05em;line-height:1.25;font-weight:500}.modal-art-index{font-size:12px;letter-spacing:.14em;color:var(--scene-a);border-top:1px solid var(--scene-a);padding-top:9px;min-width:80px;margin-top:4px}
.scene-detail-surface{position:relative;width:66%;padding:26px 30px 32px;background:linear-gradient(135deg,#071122ed,#061021d9);border:1px solid #d0edff40;border-top:2px solid var(--scene-a);border-radius:8px;box-shadow:0 14px 44px #02040c55;overflow-wrap:anywhere}
.scene-detail-surface>h2,.scene-detail-surface h1,.scene-detail-surface .case-dialog-content h2{margin:0 0 22px;font-size:clamp(24px,3.2vw,34px);line-height:1.6;letter-spacing:-.025em;color:#f6fbff}
.scene-detail-surface p,.scene-detail-copy p,.scene-detail-copy .service-card p{font-size:16px;line-height:2.05;color:#dae4f2}
.scene-detail-surface :is(p,dl){margin:18px 0}.scene-detail-copy .service-card{padding:28px 0;min-height:0;border-color:#cbeaff38}.scene-detail-copy .service-card:first-child{margin-top:25px}.scene-detail-copy .service-card h3{font-size:23px;line-height:1.6;color:#f4faff}.scene-detail-copy .local-web-copy{padding:16px 0 0}.scene-detail-copy .local-web-copy h3{font-size:22px}
.scene-detail-copy .case-grid{gap:18px}.scene-detail-copy .case-card{padding:20px;background:#0b192bdd;border-color:#c9eeff45}.scene-detail-copy .case-card h3{font-size:22px}.scene-detail-copy .projects-scroll{overflow:visible;max-height:none;height:auto;min-height:0;padding:0;background:none}.scene-detail-copy .project-card{background:#0b192bdb}.scene-detail-copy .project-content{padding:20px}.scene-detail-copy .scene-detail-note{color:#bfd6e9;font-size:13px;margin-top:16px}
.scene-detail-surface .case-dialog-content .case-actions{display:grid;gap:14px}.scene-detail-surface .case-dialog-content a{font-size:14px;margin:4px 0}.scene-detail-copy dl{grid-template-columns:90px minmax(0,1fr)}.scene-detail-copy dd{color:#e2ebf7}.scene-detail-surface .pill{font-size:12px;background:#081526cc}
/* Keep non-interactive status labels visually distinct from actionable links. */
.cinematic-dialog span.text-link{display:block;min-height:0;padding:14px 0;margin:0;border:0;border-bottom:1px solid #bddeef28;background:none;box-shadow:none;color:#cbd9e8;font-size:15px;cursor:default}
.case-route-page .case-route-close{position:relative;color:#092238;background:#dff6ff}.case-route-page .case-dialog-content a{font-size:14px}
@media(max-width:1050px){.desktop-nav a{font-size:12px;padding:9px}.desktop-nav{gap:6px}.site-header{gap:14px}.site-header .brand-return{display:none}.scene-detail-surface{width:72%}}
@media(max-width:760px){
 .site-header{padding-inline:18px;gap:12px}.site-header .brand{font-size:20px}.site-header .brand-icon{width:30px;height:30px}.site-header .brand small{font-size:6px;letter-spacing:.08em}.site-header .brand-return{display:none}.menu-toggle{min-width:76px;font-size:12px;padding:9px}
 .hero .button,.relationship .button{width:100%;font-size:15px;gap:14px}.case-card .case-link{font-size:14px}.service-detail-action{width:100%;font-size:14px}.footer-nav a,.footer-nav button.plain-button{font-size:13px}
 dialog.cinematic-dialog{width:calc(100% - 24px);height:calc(100svh - 24px);max-height:calc(100svh - 24px);border-radius:10px}
 .cinematic-dialog>.scene-detail-tools{min-height:68px;padding:10px 14px;gap:9px;flex-wrap:nowrap}.cinematic-dialog .dialog-motion-toggle,.cinematic-dialog .close{font-size:12px;padding:10px 12px}.cinematic-dialog .close{min-width:84px}
 .cinematic-dialog .scene-detail-scroll{padding:0 15px 28px;scrollbar-gutter:auto}.scene-detail-intro{min-height:200px;padding:25px 4px 20px;justify-content:space-between;gap:10px}.modal-art-name{font-size:23px;max-width:260px}.modal-art-index{align-self:flex-end;text-align:right;min-width:66px}.modal-art-kicker{font-size:9px;letter-spacing:.12em}
 .scene-detail-surface{width:100%;padding:22px 19px 27px;background:linear-gradient(135deg,#071122e6,#061021d4);border-radius:7px}.scene-detail-surface>h2,.scene-detail-surface .case-dialog-content h2{font-size:25px;line-height:1.6;margin-bottom:20px}.scene-detail-surface p,.scene-detail-copy p,.scene-detail-copy .service-card p{font-size:16px;line-height:2}
 .scene-detail-copy .service-card h3{font-size:23px}.scene-detail-copy .service-card{padding:25px 0}.scene-detail-copy .case-card{padding:16px}.scene-detail-copy .local-web-copy h3{font-size:21px}.scene-detail-copy dl{grid-template-columns:72px minmax(0,1fr);gap:0 10px}.scene-detail-copy dd{font-size:14px}.scene-detail-copy dt{font-size:12px}
 .cinematic-dialog>.scene-detail-visual:after{border-width:6px}.cinematic-dialog>.scene-detail-visual:before{inset:12px}
}
@media(max-width:360px){.site-header{padding-inline:13px;gap:8px}.site-header .brand{font-size:17px;gap:7px}.site-header .brand small{font-size:5px}.menu-toggle{min-width:70px;font-size:11px}.cinematic-dialog>.scene-detail-tools{padding-inline:10px;gap:8px}.cinematic-dialog .dialog-motion-toggle,.cinematic-dialog .close{font-size:11px;padding:10px}.scene-detail-surface{padding:20px 15px}.cinematic-dialog .scene-detail-scroll{padding-inline:11px}.modal-art-name{font-size:21px}.scene-detail-copy dl{display:block}.scene-detail-copy dt{padding-bottom:0;border-top:1px solid #cbeaff38}.scene-detail-copy dd{border-top:0;padding-top:5px}}
@media(prefers-reduced-motion:reduce){:is(a,button){transition:none!important}.cinematic-dialog::backdrop{backdrop-filter:none}}

.footer-nav a[href^="https:"]:after{content:" ↗"}.case-dialog-content a[href^="https:"]:not([href^="https://tokotoko.gizumo.net/"]):after{content:"↗"}
/* The actual Japanese subject leads. Art labels never delay understanding. */
.scene-detail-intro{min-height:0;padding:25px 0 22px;gap:14px;justify-content:flex-start}
.scene-detail-intro>h2{margin:0;max-width:680px;font-size:clamp(26px,3.4vw,38px);line-height:1.55;letter-spacing:-.025em;background:linear-gradient(90deg,#071121e8,#071121bc);padding:17px 21px;border-left:3px solid var(--scene-a);border-radius:3px;color:#f6fbff}
.modal-art-caption{display:flex;flex-wrap:wrap;align-items:center;gap:18px;color:var(--scene-a);padding:0 3px}.modal-art-name{font-size:11px;letter-spacing:.11em;line-height:1.7}.modal-art-index{align-self:auto;min-width:0;font-size:10px;border:0;padding:0;margin:0;line-height:1.7;letter-spacing:.08em}
@media(max-width:760px){.scene-detail-intro{padding:21px 0 20px;min-height:0;gap:11px}.scene-detail-intro>h2{font-size:25px;padding:16px 17px;line-height:1.6}.modal-art-name{font-size:10px;max-width:none}.modal-art-index{font-size:10px}.modal-art-caption{gap:12px}.cinematic-dialog>.scene-detail-tools{flex-wrap:wrap}.cinematic-dialog .dialog-motion-toggle{max-width:100%}}

.brand>span:nth-child(2){min-width:0;overflow-wrap:anywhere}.brand-return{flex-shrink:0}.site-header .brand>span:nth-child(2){min-width:0;overflow-wrap:anywhere}