:root{--paper:#fafaf6;--ink:#171817;--line:#d7d7d0;--soft:#eceee8;--yellow:#ffda25;--black:#1f211e;--max:1240px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Inter","Noto Sans JP",system-ui,sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}.notice{height:24px;background:#20211f;color:#fff;text-align:center;font-size:9px;letter-spacing:.16em;line-height:24px}.site-header{height:88px;max-width:var(--max);margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line);padding:0 22px}.brand{display:flex;gap:12px;align-items:center;font-weight:800}.brand-logo{width:42px;height:42px;object-fit:cover;border-radius:12px;display:block}.brand-text{display:flex;flex-direction:column;font-size:16px;line-height:1.05}.brand-text small{font-size:8px;font-weight:600;margin-top:4px;letter-spacing:.08em}.desktop-nav{display:flex;gap:30px;font-size:9px;font-weight:700;letter-spacing:.12em}.header-cta{justify-self:end;font-size:10px;border:1px solid #bdbdb7;border-radius:999px;padding:12px 20px}.hero{max-width:var(--max);margin:auto;padding:28px 22px 28px;min-height:620px;display:flex;flex-direction:column}.hero-meta,.hero-foot{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.14em}.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:40px;align-items:center;flex:1}.hero-copy h1{font-size:clamp(54px,7.1vw,94px);line-height:1.18;letter-spacing:-.055em;margin:0 0 42px;font-weight:900}.hero-copy h1 span{position:relative;display:inline-block;z-index:0}.hero-copy h1 span:after{content:"";position:absolute;left:-2px;right:-26px;height:32px;background:var(--yellow);bottom:-6px;z-index:-1;border-radius:0}.hero-copy p{font-size:13px;margin:0}.hero-side{align-self:end;padding-bottom:50px;text-align:right;font-size:10px}.scroll-mark{width:54px;height:54px;border:1px dashed #aaa;border-radius:50%;display:grid;place-items:center;margin-left:auto;margin-bottom:38px;font-size:20px}.works-section{background:#171717;color:#f5f5f2}.section{padding:78px 22px}.section-head,.service-grid,.capabilities,.about-inner,.process-grid,.work-visual,.work-meta{max-width:var(--max);margin-left:auto;margin-right:auto}.section-head{display:grid;grid-template-columns:1fr 250px;gap:48px;align-items:start;margin-bottom:48px}.section-number{font-size:9px;letter-spacing:.16em;font-weight:700;margin:0 0 24px}.section-head h2,.about-inner h2{font-size:clamp(34px,4vw,60px);line-height:1.1;letter-spacing:-.035em;margin:0;font-weight:900}.section-head>p{font-size:11px;margin:34px 0 0}.works-section .section-head>p{color:#c8c8c2}.works-section .section-number{color:#f5f5f2}.work-visual{height:520px;position:relative;background:#1f1f1f;overflow:hidden;border:1px solid #303030}.work-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:auto;filter:saturate(.92) contrast(.98) brightness(.58)}.work-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.56),rgba(0,0,0,.08) 72%,rgba(0,0,0,.16));pointer-events:none}.work-overlay{position:absolute;inset:0;padding:28px 32px;color:#fff;z-index:2}.work-overlay h3{position:absolute;left:32px;top:50%;transform:translateY(-50%);font-family:"Rodin NTLG Pro","Rodin NTLG","FOT-ロダンNTLG Pro","FOT-RodinNTLG Pro","Helvetica Neue",Arial,sans-serif;font-size:clamp(58px,8vw,118px);line-height:.82;letter-spacing:-.025em;margin:0;font-weight:700}.work-overlay .make{color:var(--yellow)}.work-overlay .reach{color:#fff}.work-overlay .tagline{position:absolute;left:32px;bottom:28px;color:var(--yellow);font-size:12px;letter-spacing:.02em;margin:0;font-weight:700}.work-overlay .showreel-info{position:absolute;right:32px;bottom:28px;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}.work-overlay .showreel-info p{font-size:9px;letter-spacing:.14em;margin:0}.work-overlay .showreel-info a{font-size:10px;border-bottom:1px solid #fff;padding-bottom:3px}.work-meta{display:flex;justify-content:space-between;font-size:9px;margin-top:15px;color:#d6d6d1}.service-section{background:var(--paper)}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.service-grid article{padding:24px 24px 40px 0;min-height:290px;border-right:1px solid var(--line)}.service-grid article+article{padding-left:24px}.service-grid article:last-child{border-right:0}.service-grid article>span,.service-grid small,.process-grid span{font-size:9px;letter-spacing:.14em}.service-grid h3{font-size:28px;margin:28px 0 2px}.service-grid p{font-size:11px;margin-top:36px}.capabilities{display:grid;grid-template-columns:120px 1fr;padding-top:18px;font-size:10px}.about-section{background:var(--yellow)}.about-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:90px}.about-inner>div:first-child>p:last-child{font-size:11px;margin-top:32px}.profile{padding-top:20px}.profile small{font-size:9px;letter-spacing:.14em}.profile h3{font-size:28px;margin:14px 0 0}.profile>p{margin:0;font-size:11px}.profile .bio{margin-top:24px;line-height:1.9}.profile dl{margin-top:30px}.profile dl div{display:grid;grid-template-columns:80px 1fr;border-top:1px solid rgba(0,0,0,.22);padding:8px 0;font-size:10px}.profile dt{font-weight:700}.profile dd{margin:0}.process-section{background:var(--paper)}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}.process-grid article{padding:22px 18px 28px 0;border-right:1px solid var(--line);min-height:210px}.process-grid article+article{padding-left:18px}.process-grid article:last-child{border-right:0}.process-grid h3{font-size:20px;margin:22px 0 14px}.process-grid p{font-size:10px}.contact-section{background:var(--black);color:#fff;text-align:center;padding:84px 22px 92px}.contact-section>p{font-size:9px;letter-spacing:.14em;color:var(--yellow);font-weight:700}.contact-section h2{font-size:clamp(42px,5.5vw,72px);line-height:1.15;letter-spacing:-.035em;margin:20px 0 30px}.contact-section>span{display:block;font-size:11px;color:#ddd}.contact-section>a{display:inline-block;background:var(--yellow);color:#111;border-radius:999px;padding:15px 30px;margin:28px 0 12px;font-size:11px;font-weight:700;min-width:270px}.contact-section small{display:block;font-size:9px;color:#aaa}footer{max-width:var(--max);margin:auto;padding:28px 22px 56px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-size:9px}.footer-brand{font-size:13px}.footer-brand .brand-logo{width:34px;height:34px}.footer-brand .brand-text{font-size:13px}footer>span{justify-self:center}footer>a{justify-self:end}@media(max-width:800px){.notice{font-size:7px}.site-header{grid-template-columns:1fr auto;height:76px}.desktop-nav{display:none}.hero{min-height:560px}.hero-grid{grid-template-columns:1fr}.hero-side{display:none}.hero-copy h1{font-size:clamp(48px,13vw,72px)}.hero-copy h1 span:after{height:28px;right:-12px;bottom:-5px}.section-head{grid-template-columns:1fr;gap:10px}.section-head>p{margin:0}.work-visual{height:420px}.work-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(6,1fr)}.work-overlay h3{font-size:clamp(38px,10vw,66px);left:22px}.work-overlay .tagline{left:22px;bottom:22px}.work-overlay .showreel-info{right:22px;bottom:22px;max-width:48%}.service-grid,.process-grid,.about-inner{grid-template-columns:1fr}.service-grid article,.service-grid article+article,.process-grid article,.process-grid article+article{padding:22px 0;border-right:0;border-bottom:1px solid var(--line)}.about-inner{gap:50px}.work-meta{flex-direction:column;gap:6px}footer{grid-template-columns:1fr;gap:18px}footer>span,footer>a{justify-self:start}}
.hero-copy .hero-line1{white-space:nowrap;display:inline-block}
.hero-copy .hero-line2{position:relative;display:inline-block;z-index:0}
.hero-copy .hero-line2:after{content:"";position:absolute;left:-2px;right:-26px;height:32px;background:var(--yellow);bottom:-6px;z-index:-1;border-radius:0}
.hero-copy h1 span:after{content:none}
.scroll-mark{text-decoration:none;color:inherit;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.scroll-mark:hover{background:var(--yellow);border-color:var(--yellow)}
.hero-foot{min-height:0}
.showreel-label{font-size:9px;letter-spacing:.14em;margin:0;border-bottom:0!important;padding-bottom:0!important}
@media(max-width:800px){
  .hero-copy .hero-line1{white-space:normal}
  .hero-copy .hero-line2:after{height:28px;right:-12px;bottom:-5px}
}


/* 2026-09-26 layout refinement */
.desktop-nav{font-size:11px}
.header-cta{font-size:12px;transition:background .2s ease,border-color .2s ease,color .2s ease}
.header-cta:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.works-section .section-head,.process-section .section-head{grid-template-columns:1fr}
.section-lead{font-size:11px;margin:24px 0 0}
.works-section .section-lead{color:#c8c8c2}
.service-head{grid-template-columns:1fr auto;align-items:end}
.section-jump{width:54px;height:54px;border:1px dashed #aaa;border-radius:50%;display:grid;place-items:center;font-size:20px;transition:background .2s ease,border-color .2s ease}
.section-jump:hover{background:var(--yellow);border-color:var(--yellow)}
.service-note{max-width:var(--max);margin:22px auto 16px;font-size:11px;white-space:nowrap}
.process-lead{white-space:nowrap}
@media(max-width:800px){
  .desktop-nav{font-size:11px}
  .header-cta{font-size:11px;padding:11px 16px}
  .service-head{grid-template-columns:1fr auto;gap:18px}
  .section-jump{width:48px;height:48px}
  .section-lead,.service-note{white-space:normal}
  .works-lead{line-height:1.8}
}


/* 2026-09-26 copy and readability refinement */
.hero-copy p{font-size:15px;line-height:1.9}
.about-inner>div:first-child>p:last-child{font-size:14px;line-height:2;font-weight:500;margin-top:34px}
@media(max-width:800px){
  .hero-copy p{font-size:14px;line-height:1.9}
  .about-inner>div:first-child>p:last-child{font-size:14px;line-height:1.95}
}

.brand-logo{object-fit:contain}


/* 2026-09-26 service spacing and contact actions */
.service-note{margin:20px auto 0;font-size:13px;font-weight:600;line-height:1.7}
.capabilities{padding-top:4px;font-size:12px;font-weight:500;line-height:1.7}
.capabilities strong{font-weight:600}
.work-visual{cursor:pointer}
#showreel-contact{transition:background-color .2s ease,color .2s ease,padding .2s ease}
#showreel-contact.is-highlighted{background:var(--yellow);color:var(--ink);padding:4px 7px;border-bottom-color:var(--yellow)}
.contact-section .contact-phone{display:block;width:max-content;min-width:0;margin:8px auto 0;padding:2px 0;background:transparent;color:#ddd;border-radius:0;font-size:12px;font-weight:500;letter-spacing:.02em}
.contact-section .contact-phone:hover{color:var(--yellow)}
.work-visual:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
@media(max-width:800px){
  .service-note{font-size:12px;line-height:1.75}
  .capabilities{font-size:11px;padding-top:6px}
  .contact-section .contact-phone{font-size:12px}
}


/* 2026-09-26 mobile layout pass */
@media(max-width:800px){
  .site-header{padding:0 18px}
  .brand{gap:9px}
  .brand-logo{width:38px;height:38px}
  .brand-text{font-size:14px}
  .header-cta{font-size:12px;padding:10px 14px}
  .hero{min-height:540px;padding:24px 20px 34px}
  .hero-meta{font-size:8px}
  .hero-copy h1{font-size:clamp(42px,12vw,52px);line-height:1.16;margin-bottom:30px}
  .hero-copy .hero-line1>span{display:block}
  .hero-copy p{font-size:14px;line-height:1.9}
  .section{padding:64px 20px}
  .section-number{font-size:10px;margin-bottom:20px}
  .section-head h2,.about-inner h2{font-size:clamp(34px,10vw,44px)}
  .section-lead{font-size:12px;line-height:1.8;margin-top:18px}
  .work-visual{height:auto;aspect-ratio:1/1}
  .work-overlay{padding:22px}
  .work-overlay h3{left:22px;top:47%;font-size:clamp(40px,13vw,56px)}
  .work-overlay .tagline{font-size:10px}
  .work-overlay .showreel-info p{font-size:8px}
  .work-overlay .showreel-info a{font-size:9px}
  .service-head{align-items:end}
  .service-grid article,.service-grid article+article{min-height:0;padding:30px 0 34px}
  .service-grid article>span,.service-grid small,.process-grid span{font-size:10px}
  .service-grid h3{font-size:30px;margin:18px 0 0}
  .service-grid p{font-size:13px;line-height:1.9;margin-top:20px}
  .service-note{margin-top:24px;font-size:13px;line-height:1.8}
  .capabilities{grid-template-columns:1fr;gap:4px;padding-top:10px;font-size:12px;line-height:1.8}
  .about-inner>div:first-child>p:last-child{font-size:14px;line-height:2;margin-top:28px}
  .profile{padding-top:0}
  .profile small{font-size:10px}
  .profile h3{font-size:30px}
  .profile>p{font-size:12px}
  .profile .bio{font-size:13px;line-height:1.9}
  .profile dl div{grid-template-columns:76px 1fr;padding:10px 0;font-size:12px}
  .process-grid article,.process-grid article+article{min-height:0;padding:28px 0 30px}
  .process-grid h3{font-size:23px;margin:16px 0 10px}
  .process-grid p{font-size:12px;line-height:1.8}
  .contact-section{padding:68px 20px 74px}
  .contact-section h2{font-size:30px;line-height:1.3;letter-spacing:-.025em;margin:18px auto 26px}
  .contact-section>span{font-size:13px;line-height:1.9}
  .contact-section>a:not(.contact-phone){font-size:14px;padding:15px 26px}
  .contact-section small{font-size:11px}
  footer{padding:26px 20px 44px}
}


/* Film 2026: retain the existing works design and inquiry links. */
.studio-film{max-width:var(--max);margin:0 auto 48px;padding-bottom:28px;border-bottom:1px solid #454545}
.studio-film-heading{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:16px}
.studio-film-heading h3{margin:0;color:var(--yellow);font-size:12px;letter-spacing:.12em;line-height:1.6}
.studio-film-heading p{margin:0;font-size:12px;color:#d6d6d1}
.studio-film-player{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#000}
.studio-film-player:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.studio-film-fallback{margin:12px 0 0;font-size:11px;text-align:right;color:#d6d6d1}
.studio-film-fallback a{text-decoration:underline;text-underline-offset:4px}
@media(max-width:800px){
  .studio-film{margin-bottom:32px;padding-bottom:24px}
  .studio-film-heading{display:block}
  .studio-film-heading p{margin-top:8px}
  .studio-film-fallback{font-size:11px;text-align:left}
}
