/* Local portability and accessibility only; visual baseline lives in assets/. */
:root{--ja_sans:'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;--en_sans:Arial,'Helvetica Neue',sans-serif;--en_mds_sans:Arial,'Hiragino Kaku Gothic ProN',sans-serif}
.video-placeholder{width:100%;height:100%;background:#a7ada8}
.local-logo-fallback{position:absolute;inset:45% 0 auto;width:100%;height:auto;transform:translateY(-50%);pointer-events:none}
.local-autoplay{position:absolute;right:0;bottom:-48px;border:1px solid currentColor;border-radius:30px;padding:6px 14px;font:inherit;font-size:12px;background:white;color:#262627;cursor:pointer}
:focus-visible{outline:2px solid #748b98;outline-offset:5px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important}.splash{display:none!important}.waitInview{opacity:1!important;translate:none!important;visibility:visible!important}.service_part{transform:none!important}.firstview_canvas{display:none}}
.project_carousel_cntnr{position:relative}
.local-autoplay{position:relative;right:auto;bottom:auto;display:block;margin:20px 0 0 auto;z-index:12}
/* A generic img {display:block} overrides the browser's [hidden] rule.
   Never composite the sharp fallback beneath the moving WebGL texture. */
.local-logo-fallback[hidden]{display:none}

/* Slightly smaller corner brand lockup; hero and footer sizes stay independent. */
.header_logo .qando_logo{transform:scale(.74);transform-origin:left center}

/* No entrance fade or delayed reveal on the first screen. */
body.no_splash .firstview_topic_cntnr,body.no_splash .cookiePopup{transition:none}

/* Two illustrated pairs lead the gallery, followed by the original-work mosaic. */
.works_item_link{display:block}
.works_item_thumbnail{width:100%;height:100%}
.works_item_thumbnail img{display:block;width:100%;height:100%;object-fit:cover}
@media(min-width:769px){
  .works_list{grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(2,calc(100vw / 3)) repeat(2,calc(100vw * 2 / 9))}
  .works_item{min-height:0;overflow:hidden}
  .works_item:nth-child(1){grid-column:1/4;grid-row:1/2}
  .works_item:nth-child(2){grid-column:4/13;grid-row:1/2}
  .works_item:nth-child(3){grid-column:1/10;grid-row:2/3}
  .works_item:nth-child(4){grid-column:10/13;grid-row:2/3}
  .works_item:nth-child(5){grid-column:1/5;grid-row:3/4}
  .works_item:nth-child(6){grid-column:5/9;grid-row:3/4}
  .works_item:nth-child(7){grid-column:9/13;grid-row:3/4}
  .works_item:nth-child(8){grid-column:1/9;grid-row:4/5}
  .works_item:nth-child(9){grid-column:9/13;grid-row:4/5}
  .works_item .works_item_link{height:100%;aspect-ratio:auto}
  .works_item_thumbnail{position:absolute;inset:0}
}
@media(max-width:768px){.works_item_thumbnail{height:auto}.works_item_thumbnail img{height:auto}}

/* Display-only artwork cards retain hover styling without link affordance. */
#works_list .works_item_link{cursor:default}

/* Equal-sized feature cards, with a partially visible next card inviting a swipe. */
#project{padding-bottom:64px}
#project .project_inner{margin-left:clamp(24px,6vw,86px);padding:0;width:calc(100% - clamp(24px,6vw,86px));max-width:none}
#project .project_carousel_cntnr{width:100%;margin:0}
#project .project_carousel{height:auto;margin:0;overflow:hidden}
#project .project_carousel_slide,#project .project_carousel_slide.swiper-slide-active{width:calc((100% - 72px) / 3.5)!important;padding:0;transition:none}
#project .project_carousel_slide .project_carousel_slide_thumbnail{scale:1;transform:none;transition:none}
#project .feature_archive{width:100%;aspect-ratio:1;background:#fff}
#project .feature_archive img{display:block;width:100%;height:100%;object-fit:contain;transform:none;scale:1}
#project .project_carousel_slide_link{display:block;width:100%;cursor:grab}
#project .project_carousel_slide_title{font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;font-weight:700}
#project .project_carousel_slide_detail{opacity:1;pointer-events:auto;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;line-height:1.75}
#project_carousel:focus-visible{outline:2px solid #252525;outline-offset:4px}
@media(max-width:768px){#project .project_carousel_slide,#project .project_carousel_slide.swiper-slide-active{width:72vw!important}}

.header_nav_static{cursor:default}

@media(min-width:769px){.header_nav_cntnr{margin-left:auto;margin-right:clamp(24px,5.55556vw,80px)}}

/* Original subtitle layout and sans-serif family, with Chinese fallbacks. */
.homepage-slogan{display:flex;justify-content:space-between;font-family:aktiv-grotesk,'Midashi Go MB31','Noto Sans JP','PingFang SC','Microsoft YaHei',sans-serif;font-size:clamp(18px,2.569444vw,64px);font-weight:700;line-height:1;letter-spacing:0;text-align:right}
.homepage-slogan>span{display:inline-flex;justify-content:space-between;width:45%}
.homepage-slogan i{font-style:normal}
@media(max-width:768px){.homepage-slogan{display:flex;flex-direction:column;gap:12px;text-align:left;font-size:clamp(16px,4.5vw,28px)}.homepage-slogan>span{display:flex;width:100%}}

/* Right-aligned comparison; preserve the current width and spacing. */
.firstview_subhead .homepage-slogan{margin-left:auto;margin-right:2.642857vw}

/* Slightly smaller headings with tighter subtitle tracking. */
.firstview_subhead .homepage-slogan{font-size:clamp(17px,2.361111vw,59px)}
@media(min-width:769px){.firstview_subhead .homepage-slogan{width:34.722222vw}}
@media(max-width:768px){.firstview_subhead .homepage-slogan{width:40vw;font-size:clamp(15px,4.2vw,26px)}}
.home-language{font:inherit;font-size:13px;white-space:nowrap;border:0;background:transparent;color:inherit;cursor:pointer;padding:8px}
html[lang=en] .homepage-slogan>span,html[lang=en] .section_head[data-en]>span{display:none}
html[lang=en] .homepage-slogan:after{content:attr(data-en);display:block;font:500 clamp(18px,2.5vw,36px)/1.35 sans-serif;letter-spacing:-.025em;max-width:24ch;text-align:left}
html[lang=en] .section_head[data-en]:after{content:attr(data-en);font-size:clamp(28px,4vw,56px);letter-spacing:-.035em}
html[lang=en] .project_carousel_slide_detail{line-height:1.6;word-break:normal}
html[lang=en] .login-password button{min-width:48px}