*{box-sizing:border-box}body{margin:0;background:#efefeb;font-family:Arial,sans-serif;color:#111}header{position:fixed;z-index:20;width:100%;padding:20px 4vw;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.12em}.hero{min-height:65vh;padding:15vh 4vw 5vw;display:flex;flex-direction:column;justify-content:end}.hero h1,.head h2{font-size:clamp(80px,15vw,210px);line-height:.68;letter-spacing:-.09em;margin:25px 0}.works{padding:7vw 4vw}.head{border-bottom:1px solid;margin-bottom:25px}.head h2{font-size:clamp(60px,9vw,120px)}.row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.banner{height:250px;background:#222;color:#fff;border:0;font-size:clamp(38px,6vw,75px);font-weight:bold;text-align:left;padding:20px;cursor:pointer;transition:.3s}.banner:hover{background:#444;padding-left:38px}.banner.on{outline:3px solid #111}.panel{grid-column:1/-1;background:#151515;color:white;padding:28px}.subs{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0 22px}.subs button{border:1px solid #777;background:none;color:white;padding:8px 11px;font-size:9px}.subs .on{background:white;color:#111}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{border:0;background:none;color:white;text-align:left;cursor:pointer}.pic{aspect-ratio:16/9;background:#555}.card strong{display:block;margin-top:8px}.card small{color:#999}.modal,.zoommodal{display:none;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;padding:20px}.show{display:flex}.shade{position:absolute;inset:0;background:rgba(0,0,0,.52);backdrop-filter:blur(5px)}.box{position:relative;z-index:1;width:min(1280px,97vw);max-height:95vh;overflow:auto;background:#f2f2ee;padding:35px}.x{position:absolute;right:15px;top:8px;border:0;background:none;font-size:40px}.box h3{font-size:42px;margin:6px 0 20px}.copy{display:grid;grid-template-columns:1.6fr .8fr 1.3fr;gap:35px;border-top:1px solid #bbb;border-bottom:1px solid #bbb;padding:25px 0}.copy p{font-size:13px;line-height:1.8}.pair{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:30px 7vw}.pair figure{margin:0}.pair button{border:0;padding:0;cursor:zoom-in}.pair img{width:100%;display:block}.yt{aspect-ratio:16/9;background:#111;margin-top:28px}.yt iframe{width:100%;height:100%;border:0}.zoommodal{z-index:120}.zoommodal img{position:relative;z-index:1;max-width:92vw;max-height:92vh}.zx{position:absolute;z-index:2;right:20px;top:10px;color:white;background:none;border:0;font-size:42px}@media(max-width:700px){.row{grid-template-columns:1fr}.panel{grid-column:1}.cards{grid-template-columns:1fr 1fr}.copy,.pair{grid-template-columns:1fr}.pair{gap:35px}}
.flier-thumb{
 background-image:url("../images/thumbs/graphic/flier.webp");
 background-size:cover;
 background-position:center top;
 aspect-ratio:4/3;
}
.cards .card .pic{aspect-ratio:16/9!important;width:100%;background-size:cover}.flier-thumb{background-position:center 18%}.pamphlet-thumb{background-image:url("../images/thumbs/graphic/pamphlet.webp")}.pamphlet-box{width:min(1320px,97vw)}.ptool,.pnav{display:flex;justify-content:space-between;padding:22px 0}.pstage{padding:10px 5vw}.pslide{display:none;grid-template-columns:1fr 1fr;gap:65px}.pslide.active{display:grid}.pslide figure{margin:0}.pzoom{border:0;background:none;padding:0;cursor:zoom-in;width:100%}.pzoom img{width:100%;max-height:62vh;object-fit:contain;display:block}.pnav button{border:0;background:none;cursor:pointer}@media(max-width:700px){.pslide,.pslide.active{grid-template-columns:1fr;gap:30px}.pstage{padding:10px 0}.pzoom img{max-height:none}}
/* v13 — more compact project viewers */
.pamphlet-box,
#graphicModal .box{
  width:min(1120px,94vw);
  padding:28px 34px 32px;
}
.pamphlet-box h3,
#graphicModal .box h3{
  font-size:34px;
  margin-bottom:14px;
}
.pamphlet-box .copy,
#graphicModal .copy{
  gap:26px;
  padding:18px 0;
}
.pamphlet-box .copy p,
#graphicModal .copy p{
  font-size:12px;
  line-height:1.65;
}
.ptool{padding:16px 0 8px}
.pviewer{
  position:relative;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  align-items:center;
  gap:12px;
}
.pstage{
  padding:12px 1vw 4px;
  min-width:0;
}
.pslide{
  gap:42px;
  max-width:850px;
  margin:0 auto;
}
.pzoom img{
  max-height:49vh;
}
.parrow{
  width:42px;height:42px;border:1px solid #aaa;border-radius:50%;
  background:rgba(255,255,255,.75);font-size:29px;line-height:1;
  cursor:pointer;display:grid;place-items:center;transition:.2s;
}
.parrow:hover{background:#111;color:#fff;border-color:#111}
.pindicator{
  display:flex;justify-content:center;gap:9px;padding:14px 0 2px;
}
.pdot{
  width:7px;height:7px;border:0;border-radius:50%;
  padding:0;background:#bbb;cursor:pointer;
}
.pdot.active{background:#222;transform:scale(1.3)}

/* Flyer detail: same visual scale as pamphlet */
#graphicModal .pair{
  max-width:850px;
  margin:0 auto;
  gap:42px;
  padding:22px 1vw 4px;
}
#graphicModal .pair img{
  max-height:49vh;
  object-fit:contain;
}
@media(max-width:700px){
 .pamphlet-box,#graphicModal .box{width:96vw;padding:22px 18px 28px}
 .pviewer{grid-template-columns:34px minmax(0,1fr) 34px;gap:5px}
 .parrow{width:32px;height:32px;font-size:23px}
 .pslide,.pslide.active{grid-template-columns:1fr;gap:24px}
 .pzoom img,#graphicModal .pair img{max-height:58vh}
 #graphicModal .pair{gap:28px}
}

/* v14 definitive compact pamphlet + flyer viewer */
.pamphlet-box,#graphicModal .box{
  width:min(1060px,92vw)!important;
  padding:26px 32px 30px!important;
}
.pamphlet-box h3,#graphicModal .box h3{font-size:32px!important;margin:5px 0 12px!important}
.pamphlet-box .copy,#graphicModal .copy{gap:22px!important;padding:16px 0!important}
.pamphlet-box .copy p,#graphicModal .copy p{font-size:11px!important;line-height:1.6!important}
.ptool{display:flex!important;justify-content:space-between!important;padding:14px 0 8px!important}
.pviewer{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) 42px!important;
  align-items:center!important;
  gap:14px!important;
}
.pstage{padding:8px 0 2px!important;min-width:0!important}
.pslide{display:none!important;grid-template-columns:1fr 1fr!important;gap:34px!important;max-width:780px!important;margin:0 auto!important}
.pslide.active{display:grid!important}
.pslide figure{margin:0!important}
.pzoom{width:100%!important;border:0!important;background:none!important;padding:0!important;cursor:zoom-in!important}
.pzoom img{width:100%!important;height:44vh!important;max-height:430px!important;object-fit:contain!important;display:block!important}
.parrow{
  display:grid!important;place-items:center!important;
  width:40px!important;height:40px!important;border-radius:50%!important;
  border:1px solid #999!important;background:#f7f7f3!important;
  font-size:28px!important;line-height:1!important;cursor:pointer!important;
  padding:0!important;
}
.parrow:hover{background:#111!important;color:#fff!important;border-color:#111!important}
.pindicator{display:flex!important;justify-content:center!important;align-items:center!important;gap:10px!important;padding:14px 0 0!important}
.pdot{display:block!important;width:8px!important;height:8px!important;border:0!important;border-radius:50%!important;background:#bbb!important;padding:0!important;cursor:pointer!important}
.pdot.active{background:#222!important;transform:scale(1.35)!important}

/* Restaurant flyer uses the same compact image scale */
#graphicModal .pair{max-width:780px!important;margin:0 auto!important;gap:34px!important;padding:18px 0 2px!important}
#graphicModal .pair img{width:100%!important;height:44vh!important;max-height:430px!important;object-fit:contain!important}

@media(max-width:700px){
 .pamphlet-box,#graphicModal .box{width:96vw!important;padding:20px 16px 24px!important}
 .pviewer{grid-template-columns:32px minmax(0,1fr) 32px!important;gap:5px!important}
 .parrow{width:30px!important;height:30px!important;font-size:22px!important}
 .pslide,.pslide.active{grid-template-columns:1fr!important;gap:22px!important}
 .pzoom img,#graphicModal .pair img{height:auto!important;max-height:55vh!important}
 #graphicModal .pair{grid-template-columns:1fr!important;gap:24px!important}
}

/* v15 motion polish */

/* WORKS content expands vertically */
.panel{
  transform-origin:top center;
  animation:panelOpen .46s cubic-bezier(.22,.8,.28,1) both;
  overflow:hidden;
}
@keyframes panelOpen{
  0%{opacity:0;transform:scaleY(.06) translateY(-10px);max-height:0}
  55%{opacity:.7}
  100%{opacity:1;transform:scaleY(1) translateY(0);max-height:10000px}
}

/* modal backdrop + panel entrance */
.modal.show .shade{animation:shadeIn .28s ease both}
.modal.show .box{animation:modalIn .38s cubic-bezier(.2,.8,.25,1) both}
@keyframes shadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{
  from{opacity:0;transform:translateY(18px) scale(.975)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* image zoom viewer */
.zoommodal.show .shade{animation:shadeIn .24s ease both}
.zoommodal.show #zoomImg{
  animation:imageZoomIn .38s cubic-bezier(.18,.8,.25,1) both;
  transform-origin:center;
}
@keyframes imageZoomIn{
  from{opacity:0;transform:scale(.72)}
  to{opacity:1;transform:scale(1)}
}

/* pamphlet slide movement */
.pstage{overflow:hidden!important}
.pslide{
  display:grid!important;
  position:absolute!important;
  inset:8px 0 2px!important;
  opacity:0!important;
  pointer-events:none!important;
  transform:translateX(9%)!important;
  transition:transform .46s cubic-bezier(.22,.8,.28,1),opacity .32s ease!important;
}
.pstage{
  position:relative!important;
  min-height:min(49vh,430px)!important;
}
.pslide.active{
  position:relative!important;
  inset:auto!important;
  opacity:1!important;
  pointer-events:auto!important;
  transform:translateX(0)!important;
}
.pslide.slide-from-left{transform:translateX(-9%)!important}
.pslide.slide-from-right{transform:translateX(9%)!important}
.pslide.slide-out-left{transform:translateX(-9%)!important;opacity:0!important}
.pslide.slide-out-right{transform:translateX(9%)!important;opacity:0!important}
.pdot{transition:transform .22s ease,background .22s ease!important}

@media (prefers-reduced-motion:reduce){
 .panel,.modal.show .shade,.modal.show .box,.zoommodal.show #zoomImg{animation:none!important}
 .pslide{transition:none!important}
}

/* v16 */
.parrow{border:0!important;background:transparent!important;border-radius:0!important;width:42px!important;height:52px!important;font-size:0!important;position:relative!important}.parrow::before{content:""!important;display:block!important;width:0!important;height:0!important;border-top:11px solid transparent!important;border-bottom:11px solid transparent!important}.parrow.prev::before{border-right:16px solid #222!important;margin-left:9px!important}.parrow.next::before{border-left:16px solid #222!important;margin-left:15px!important}.parrow:hover{background:transparent!important}.parrow.prev:hover::before{border-right-color:#777!important}.parrow.next:hover::before{border-left-color:#777!important}.pic{position:relative}.playmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.5);color:#fff;border:1px solid rgba(255,255,255,.8)}.mobile-major{margin-bottom:16px}@media(max-width:700px){#mount>.mobile-major>.banner{width:100%;display:block}#mount>.mobile-major>.panel{width:100%;margin-top:0}}

/* v17 interaction + PACKAGE */
.parrow{transition:background .2s ease!important}
.parrow::before{transition:border-color .2s ease!important}
.parrow:hover{background:#222!important}
.parrow.prev:hover::before{border-right-color:#f2f2ee!important}
.parrow.next:hover::before{border-left-color:#f2f2ee!important}
.card .pic{overflow:hidden}
.card .pic::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .28s ease;pointer-events:none}
.card:hover .pic::after{background:rgba(0,0,0,.28)}
.package-thumb{background-image:url("../images/thumbs/graphic/package.webp")!important;background-position:center!important}
.panel.panel-closing{animation:panelClose .38s cubic-bezier(.55,0,.78,.2) both!important;pointer-events:none}
@keyframes panelClose{from{opacity:1;transform:scaleY(1);max-height:10000px}to{opacity:0;transform:scaleY(.06) translateY(-8px);max-height:0;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0}}
.package-box{width:min(1180px,96vw)}
.package-viewer{align-items:center}
.pkgstage{position:relative;overflow:hidden;width:min(820px,76vw);min-height:min(56vh,570px);margin:0 auto}
.pkgslide{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none;transform:translateX(9%);transition:transform .46s cubic-bezier(.22,.8,.28,1),opacity .32s ease;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pkgslide.active{position:relative;opacity:1;pointer-events:auto;transform:translateX(0)}
.pkgslide.slide-from-left{transform:translateX(-9%)}.pkgslide.slide-from-right{transform:translateX(9%)}.pkgslide.slide-out-left{transform:translateX(-9%);opacity:0}.pkgslide.slide-out-right{transform:translateX(9%);opacity:0}
.pkgzoom{border:0;background:none;padding:0;cursor:zoom-in;width:100%}.pkgzoom img{display:block;width:100%;max-height:55vh;object-fit:contain}.pkgslide figcaption{text-align:center;margin-top:10px;font-size:12px;letter-spacing:.08em}
.pkgindicator{display:flex;justify-content:center;gap:9px;padding:16px 0 4px}.pkgdot{width:7px;height:7px;border:0;border-radius:50%;background:#aaa;padding:0;cursor:pointer;transition:transform .2s,background .2s}.pkgdot.active{background:#111;transform:scale(1.45)}
@media(max-width:700px){.pkgstage{width:min(76vw,520px);min-height:48vh}.pkgzoom img{max-height:48vh}.parrow{width:34px!important;height:46px!important}}
@media(prefers-reduced-motion:reduce){.panel.panel-closing{animation:none!important}.pkgslide{transition:none!important}}

/* v18: GRAPHIC responsive 4:3 grid + LOGO viewer */
.panel .cards{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.cards .card .pic{aspect-ratio:4/3!important}
.logo-thumb{background-image:url("../images/thumbs/graphic/logo.webp")!important;background-position:center!important;background-size:cover!important}
.logostage{position:relative;overflow:hidden;width:min(72vw,920px);min-height:52vh;margin:0 auto}
.logoslide{display:none;margin:0;position:absolute;inset:0;transition:transform .46s cubic-bezier(.22,.61,.36,1),opacity .46s ease}
.logoslide.active{display:flex;flex-direction:column;align-items:center;justify-content:center}
.logozoom{border:0;background:none;padding:0;cursor:zoom-in;width:100%}
.logozoom img{display:block;width:100%;height:46vh;object-fit:contain}
.logoslide figcaption{text-align:center;margin-top:12px;font-size:13px}
@media(max-width:1100px){.panel .cards{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:700px){.panel .cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}.logostage{width:min(76vw,520px);min-height:44vh}.logozoom img{height:38vh}}

/* v19: GRAPHIC-only 4:3 / video sections remain 16:9 */
.graphic-panel .cards{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.graphic-panel .cards .card .pic{aspect-ratio:4/3!important}
.video-panel .cards{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.video-panel .cards .card .pic{aspect-ratio:16/9!important}
.infographic-thumb{background-image:url("../images/thumbs/graphic/infographic.webp")!important;background-position:center!important;background-size:cover!important}
.infostage{position:relative;overflow:hidden;width:min(72vw,920px);min-height:52vh;margin:0 auto}
.infoslide{display:none;margin:0;position:absolute;inset:0;transition:transform .46s cubic-bezier(.22,.61,.36,1),opacity .46s ease}
.infoslide.active{display:flex;flex-direction:column;align-items:center;justify-content:center}
.infozoom{border:0;background:none;padding:0;cursor:zoom-in;width:100%}.infozoom img{display:block;width:100%;height:46vh;object-fit:contain}.infoslide figcaption{text-align:center;margin-top:12px;font-size:13px}
.infoindicator{display:flex;justify-content:center;gap:9px;padding:16px 0 4px}.infodot{width:7px;height:7px;border:0;border-radius:50%;background:#aaa;padding:0;cursor:pointer;transition:transform .2s,background .2s}.infodot.active{background:#111;transform:scale(1.45)}
@media(max-width:1100px){.graphic-panel .cards{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:700px){.graphic-panel .cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}.video-panel .cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}.infostage{width:min(76vw,520px);min-height:44vh}.infozoom img{height:38vh}}


/* v20: workwear flier + detail image hover */
.workwear-thumb{background-image:url("../images/thumbs/graphic/workwear.webp")!important;background-position:center!important;background-size:cover!important}
.wwstage{position:relative;overflow:hidden;width:min(72vw,920px);min-height:56vh;margin:0 auto}
.wwslide{display:none;margin:0;position:absolute;inset:0}.wwslide.active{display:flex;flex-direction:column;align-items:center;justify-content:center}
.wwzoom{border:0;background:none;padding:0;cursor:zoom-in;width:100%}.wwzoom img{display:block;width:100%;height:50vh;object-fit:contain}.wwslide figcaption{text-align:center;margin-top:12px;font-size:13px}
.wwindicator{display:flex;justify-content:center;gap:9px;padding:16px 0 4px}.wwdot{width:7px;height:7px;border:0;border-radius:50%;background:#aaa;padding:0;cursor:pointer;transition:transform .2s,background .2s}.wwdot.active{background:#111;transform:scale(1.45)}
/* detail-view images subtly darken on hover */
.modal .zoom img,.modal .pzoom img,.modal .pkgzoom img,.modal .logozoom img,.modal .infozoom img,.modal .wwzoom img{transition:filter .22s ease,opacity .22s ease}
.modal .zoom:hover img,.modal .pzoom:hover img,.modal .pkgzoom:hover img,.modal .logozoom:hover img,.modal .infozoom:hover img,.modal .wwzoom:hover img{filter:brightness(.78)}
@media(max-width:700px){.wwstage{width:min(76vw,520px);min-height:48vh}.wwzoom img{height:42vh}}

/* v21 */
.panel.panel-instant{animation:none!important}
.contractor-pamphlet-thumb{background-image:url("../images/thumbs/graphic/contractor-pamphlet.webp")!important;background-position:center!important}
.cpstage{position:relative;width:min(78vw,1050px);min-height:58vh;overflow:hidden}
.cpslide{position:absolute;inset:0;margin:0;display:none;align-items:center;justify-content:center;flex-direction:column}.cpslide.active{display:flex}.cpslide button{border:0;background:none;padding:0;cursor:zoom-in;max-width:100%;max-height:54vh}.cpslide img{display:block;max-width:100%;max-height:51vh;object-fit:contain}.cpslide figcaption{margin-top:10px}.cpdot{width:8px;height:8px;border-radius:50%;border:0;background:#aaa;margin:0 5px}.cpdot.active{background:#111}
@media(max-width:700px){.cpstage{width:min(76vw,520px);min-height:44vh}.cpslide img{max-height:38vh}}


/* v22: dark translucent detail windows + stable card rows + beauty pamphlet */
.modal .box{background:rgba(10,10,10,.88)!important;color:#fff!important;border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.modal .box h3,.modal .box p,.modal .box small,.modal .box figcaption,.modal .x{color:#fff!important}
.modal .copy{border-color:rgba(255,255,255,.38)!important}
.modal .ptool{border-color:rgba(255,255,255,.28)!important;color:#fff!important}
.modal .parrow.prev::before{border-right-color:#fff!important}.modal .parrow.next::before{border-left-color:#fff!important}.modal .parrow.prev:hover::before{border-right-color:#aaa!important}.modal .parrow.next:hover::before{border-left-color:#aaa!important}
.modal .pdot,.modal .pkgdot,.modal .logodot,.modal .infodot,.modal .wwdot,.modal .cpdot,.modal .bpdot{background:#777!important}.modal .pdot.active,.modal .pkgdot.active,.modal .logodot.active,.modal .infodot.active,.modal .wwdot.active,.modal .cpdot.active,.modal .bpdot.active{background:#fff!important}
.beauty-pamphlet-thumb{background-image:url("../images/thumbs/graphic/beauty-pamphlet.webp")!important;background-position:center!important;background-size:cover!important}
.bpstage{position:relative;width:min(82vw,1120px);min-height:56vh;overflow:hidden}.bpslide{position:absolute;inset:0;margin:0;display:none;align-items:center;justify-content:center;flex-direction:column}.bpslide.active{display:flex}.bpzoom{border:0;background:none;padding:0;cursor:zoom-in;width:100%}.bpzoom img{display:block;width:100%;max-height:50vh;object-fit:contain}.bpslide figcaption{margin-top:12px;font-size:13px}.bpindicator{display:flex;justify-content:center;gap:9px;padding:16px 0 4px}.bpdot{width:8px;height:8px;border:0;border-radius:50%;padding:0;cursor:pointer}
.modal .bpzoom img{transition:filter .22s ease}.modal .bpzoom:hover img{filter:brightness(.78)}
/* Keep thumbnail text baselines aligned even when titles wrap */
.graphic-panel .card,.video-panel .card{display:grid;grid-template-rows:auto minmax(2.6em,auto) auto;align-content:start}.graphic-panel .card strong,.video-panel .card strong{line-height:1.3;margin-top:8px}.graphic-panel .card small,.video-panel .card small{align-self:end}
@media(max-width:700px){.bpstage{width:min(78vw,560px);min-height:42vh}.bpzoom img{max-height:36vh}}

/* v23 fix: truly translucent detail window + preserve full tri-fold artwork */
.modal .box{
  background:rgba(8,8,8,.68)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.28)!important;
  box-shadow:0 24px 80px rgba(0,0,0,.34)!important;
  backdrop-filter:blur(10px) saturate(.85)!important;
  -webkit-backdrop-filter:blur(10px) saturate(.85)!important;
}
.modal .shade{background:rgba(0,0,0,.30)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.beauty-box{width:min(1500px,98vw)!important}
.beauty-box .pviewer{grid-template-columns:44px minmax(0,1fr) 44px!important;align-items:center!important}
.beauty-box .bpstage{width:100%!important;max-width:none!important;height:min(57vw,66vh)!important;min-height:0!important;overflow:hidden!important}
.beauty-box .bpslide{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;padding:0!important}
.beauty-box .bpslide.active{display:flex!important}
.beauty-box .bpzoom{width:100%!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
.beauty-box .bpzoom img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important}
@media(max-width:700px){.beauty-box .bpstage{height:min(64vw,46vh)!important}.beauty-box .pviewer{grid-template-columns:30px minmax(0,1fr) 30px!important}}

/* v24: requested refinements + WEB work viewer */
/* Beauty pamphlet: deliberately smaller preview; click still opens full zoom. */
.beauty-box{width:min(1120px,92vw)!important}
.beauty-box .bpstage{width:min(76vw,900px)!important;height:min(32vw,390px)!important;margin:0 auto!important}
.beauty-box .bpzoom img{width:88%!important;height:88%!important;object-fit:contain!important}
@media(max-width:700px){.beauty-box{width:94vw!important}.beauty-box .bpstage{width:100%!important;height:min(46vw,300px)!important}.beauty-box .bpzoom img{width:90%!important;height:90%!important}}

/* Unify logo indicator with the other slider indicators. */
.logoindicator{display:flex!important;justify-content:center!important;align-items:center!important;gap:9px!important;padding:16px 0 4px!important}
.logodot{width:7px!important;height:7px!important;min-width:7px!important;border:0!important;border-radius:50%!important;padding:0!important;margin:0!important;transform:none!important}
.logodot.active{transform:scale(1.45)!important}

.medical-web-thumb{background-image:url("../images/thumbs/web/medical-app-web-thumb.webp")!important;background-size:cover!important;background-position:center top!important}
.webdesign-box{width:min(1120px,94vw)!important}
.webtool{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.28);padding:14px 0 10px;margin-top:8px}
.webtool button{border:1px solid rgba(255,255,255,.72);background:transparent;color:#fff;padding:8px 14px;font:inherit;font-size:11px;letter-spacing:.12em;cursor:pointer;transition:.2s}
.webtool button:hover{background:#fff;color:#111}
.webviewport{width:min(78vw,880px);aspect-ratio:4/3;margin:0 auto;overflow-y:auto;overflow-x:hidden;background:#eee;overscroll-behavior:contain;scrollbar-width:thin;border:1px solid rgba(255,255,255,.22)}
.webviewport img{display:block;width:100%;height:auto}
.webscrollhint{text-align:center;font-size:10px;letter-spacing:.16em;margin-top:9px;color:rgba(255,255,255,.72)}
@media(max-width:700px){.webdesign-box{width:94vw!important}.webviewport{width:100%;aspect-ratio:4/3}.webdesign-box .copy{grid-template-columns:1fr!important}.webtool{margin-top:4px}}


/* v26: browser-style WEB work preview */
.browser-shell{width:min(72vw,780px);margin:0 auto;border:1px solid rgba(255,255,255,.28);border-radius:12px;overflow:hidden;background:#d8d8d8;box-shadow:0 18px 48px rgba(0,0,0,.28)}
.browser-chrome{height:44px;display:grid;grid-template-columns:72px 1fr 52px;align-items:center;gap:10px;padding:0 12px;background:#ececec;border-bottom:1px solid #c8c8c8;color:#555}
.browser-dots{display:flex;gap:7px;align-items:center}.browser-dots i{display:block;width:10px;height:10px;border-radius:50%;background:#aaa}.browser-dots i:nth-child(2){opacity:.75}.browser-dots i:nth-child(3){opacity:.5}
.browser-address{height:27px;border:1px solid #d0d0d0;border-radius:7px;background:#fff;display:flex;align-items:center;justify-content:center;gap:7px;font-size:10px;letter-spacing:.04em;color:#777;box-shadow:inset 0 1px 1px rgba(0,0,0,.03)}
.browser-lock{font-size:8px;opacity:.55}.browser-menu{text-align:right;font-size:14px;letter-spacing:2px;color:#888}
.browser-shell .webviewport{width:100%;aspect-ratio:4/3;margin:0;border:0;background:#fff;scrollbar-color:#9b9b9b #ececec;scrollbar-width:thin}
.browser-shell .webviewport::-webkit-scrollbar{width:10px}.browser-shell .webviewport::-webkit-scrollbar-track{background:#ececec}.browser-shell .webviewport::-webkit-scrollbar-thumb{background:#aaa;border:2px solid #ececec;border-radius:10px}
.browser-status{height:28px;background:#ececec;border-top:1px solid #c8c8c8;color:#777;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:9px;letter-spacing:.13em}
.webscrollhint{display:none}
@media(max-width:700px){.browser-shell{width:100%;border-radius:8px}.browser-chrome{height:38px;grid-template-columns:52px 1fr 34px;padding:0 8px;gap:6px}.browser-dots{gap:5px}.browser-dots i{width:8px;height:8px}.browser-address{height:24px;font-size:9px}.browser-status{height:25px;font-size:8px;padding:0 9px}}

/* v28 added works */
.realestate-thumb{background-image:url("../images/thumbs/graphic/realestate.webp")!important;background-size:cover!important;background-position:center!important}
.ramenmenu-thumb{background-image:url("../images/thumbs/graphic/ramenmenu.webp")!important;background-size:cover!important;background-position:center!important}
.earphone-thumb{background-image:url("../images/thumbs/graphic/earphone.webp")!important;background-size:cover!important;background-position:center!important}
.newstage{position:relative;width:min(920px,78vw);min-height:min(58vh,610px);overflow:hidden;margin:0 auto}.newslide{position:absolute;inset:0;margin:0;display:none;align-items:center;justify-content:center;flex-direction:column}.newslide.active{display:flex}.newslide figure{margin:0}.newzoom{border:0;background:none;padding:0;cursor:zoom-in;max-width:100%}.newzoom img{display:block;max-width:100%;max-height:52vh;object-fit:contain}.newslide figcaption,.ramen-pair figcaption{margin-top:10px;text-align:center;font-size:13px}.newdot{width:8px;height:8px;border:0;border-radius:50%;padding:0;margin:0 5px;background:rgba(255,255,255,.38);cursor:pointer}.newdot.active{background:#fff}.ramen-pair{grid-template-columns:1fr 1fr!important;gap:28px;padding:0 4vw}.ramen-pair.active{display:grid!important;align-items:center}.ramen-pair figure{min-width:0}.ramen-pair .newzoom img{max-height:50vh}
@media(max-width:700px){.newstage{width:min(78vw,520px);min-height:48vh}.newzoom img{max-height:43vh}.ramen-pair{gap:12px;padding:0}.ramen-pair .newzoom img{max-height:40vh}}

/* v30 DESIGN & CODING live preview */
.burger-web-thumb{background-image:url("../images/thumbs/web/burger-samune.webp")!important;background-size:cover!important;background-position:center!important}
.beauty-web-thumb{background-image:url("../images/thumbs/web/beauty-web-top.webp")!important;background-size:cover!important;background-position:center top!important}
.hooter-web-thumb{background-image:url("../images/thumbs/web/hooter-samune.webp")!important;background-size:cover!important;background-position:center!important}
.liveweb-tool{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.liveweb-tool>small{margin-right:auto}.device-switch{display:flex;gap:5px}.device-switch button,.liveweb-tool>button{border:1px solid rgba(255,255,255,.45);background:transparent;color:#fff;padding:8px 11px;font:inherit;font-size:10px;letter-spacing:.08em;cursor:pointer}.device-switch button.on,.device-switch button:hover,.liveweb-tool>button:hover{background:#fff;color:#111}.live-browser{width:min(86vw,1040px)}.live-frame-wrap{height:min(66vh,650px);background:#bbb;overflow:auto;display:flex;justify-content:center;align-items:flex-start;transition:.25s ease}.live-frame-wrap iframe{display:block;height:100%;border:0;background:#fff;transition:.25s ease}.live-frame-wrap[data-device="desktop"] iframe{width:100%}.live-frame-wrap[data-device="tablet"] iframe{width:768px;max-width:100%}.live-frame-wrap[data-device="mobile"] iframe{width:390px;max-width:100%}@media(max-width:700px){.liveweb-tool{align-items:flex-start}.device-switch{order:3;width:100%}.device-switch button{flex:1;padding:7px 4px;font-size:8px}.live-frame-wrap{height:58vh}.liveweb-tool>button{font-size:8px}}

/* v31 WEB design multi-page tabs */
.web-page-switch{display:flex;gap:5px;flex-wrap:wrap}.web-page-switch button{border:1px solid rgba(255,255,255,.45);background:transparent;color:#fff;padding:8px 12px;font:inherit;font-size:10px;letter-spacing:.08em;cursor:pointer}.web-page-switch button.on,.web-page-switch button:hover{background:#fff;color:#111}.webtool.multi-page-tool{gap:12px;align-items:center}.multi-page-tool>small{margin-right:auto}.multi-page-tool [data-beautyfull][hidden]{display:none}.beauty-browser{width:min(78vw,820px)}.beauty-browser .webviewport{aspect-ratio:4/3;height:auto;max-height:66vh}.beauty-browser .webviewport img{width:100%;height:auto;display:block}
@media(max-width:700px){.web-page-switch{order:3;width:100%}.web-page-switch button{flex:1;padding:7px 3px;font-size:8px}.beauty-browser{width:100%}}
/* v33 WEB additions */
.dental-web-thumb{background-image:url("../images/thumbs/web/dental-clinic-web-thumb.webp")!important;background-size:cover!important;background-position:center top!important}
.chefcook-web-thumb{background-image:url("../images/thumbs/web/chefcook-web-thumb.webp")!important;background-size:cover!important;background-position:center top!important}
.megatrend-web-thumb{background-image:url("../images/thumbs/web/megatrend-web-thumb.webp")!important;background-size:cover!important;background-position:center!important}
.naya-web-thumb{background-image:url("../images/thumbs/web/naya-web-thumb.webp")!important;background-size:cover!important;background-position:center top!important}

/* v35: sharper static WEB preview. Long pages are rendered as 2x tiles so the browser
   does not downsample one huge texture; tiles join with zero gap. */
.webviewport .web-tiled{width:100%;margin:0;padding:0;line-height:0;background:#fff}
.webviewport .web-tiled img{display:block;width:100%;height:auto;margin:0;padding:0;border:0;vertical-align:top}
.browser-shell .webviewport{contain:layout paint;transform:translateZ(0)}


/* v36: original-pixel WEB preview test. No AI upscale, no JPEG tiles. */
.webdesign-box{width:min(1480px,97vw)!important;max-height:96vh;overflow-y:auto}
.webdesign-box .browser-shell:not(.live-browser){width:min(1320px,92vw)!important}
.webdesign-box .webviewport{height:min(68vh,760px)!important;aspect-ratio:auto!important;background:#d7d7d7;overflow:auto!important}
.original-web-page{min-width:100%;min-height:100%;display:flex;flex-direction:column;align-items:center;background:#d7d7d7;line-height:0}
.original-web-page>img{display:block!important;width:auto!important;max-width:none!important;height:auto!important;flex:0 0 auto;image-rendering:auto}
.dental-original>img{width:410px!important;max-width:none!important;margin:0!important}
@media(max-width:700px){.webdesign-box .browser-shell:not(.live-browser){width:100%!important}.webdesign-box .webviewport{height:60vh!important}.original-web-page{align-items:flex-start}.original-web-page>img{max-width:none!important}}


/* v37 — true 1:1 pixel test, medical WEB design only.
   The preview viewport is exactly the source image width (500 px) on desktop.
   No width:100%, transform, zoom, filter, tile, or upscaling is applied. */
@media (min-width:701px){
  .pixel-test-modal .webdesign-box{width:min(900px,96vw)!important;}
  .pixel-test-modal .pixel-browser{width:500px!important;max-width:calc(96vw - 48px)!important;margin-left:auto!important;margin-right:auto!important;}
  .pixel-test-modal .pixel-viewport{width:500px!important;max-width:100%!important;height:min(68vh,760px)!important;overflow-y:auto!important;overflow-x:auto!important;background:#fff!important;}
  .pixel-test-modal .pixel-page{display:block!important;width:500px!important;min-width:500px!important;min-height:0!important;margin:0!important;padding:0!important;background:#fff!important;line-height:0!important;}
  .pixel-test-modal .pixel-page>img{display:block!important;width:500px!important;min-width:500px!important;max-width:none!important;height:auto!important;margin:0!important;padding:0!important;transform:none!important;filter:none!important;image-rendering:auto!important;}
}
@media (max-width:700px){
  .pixel-test-modal .pixel-browser{width:100%!important;overflow:hidden!important;}
  .pixel-test-modal .pixel-viewport{width:100%!important;overflow:auto!important;}
  .pixel-test-modal .pixel-page{display:block!important;width:500px!important;min-width:500px!important;align-items:initial!important;}
  .pixel-test-modal .pixel-page>img{width:500px!important;min-width:500px!important;max-width:none!important;height:auto!important;}
}

/* v40: high-DPI WEB image rendering fix.
   Do NOT force huge vertical images into their own GPU/composited layer. */
.browser-shell .webviewport{
  contain:none!important;
  transform:none!important;
  will-change:auto!important;
}
.pixel-test-modal .pixel-page{
  width:800px!important;
  min-width:800px!important;
}
.pixel-test-modal .pixel-page>img{
  width:800px!important;
  min-width:800px!important;
  max-width:800px!important;
  height:auto!important;
  transform:none!important;
  filter:none!important;
}
/* High-res originals are intentionally displayed below source pixel width. */
#beautyWebModal .original-web-page>img,
#dentalWebModal .original-web-page>img,
#nayaWebModal .original-web-page>img{
  width:min(100%,960px)!important;
  min-width:0!important;
  max-width:960px!important;
}
#chefcookWebModal .original-web-page>img{
  width:min(100%,1100px)!important;
  min-width:0!important;
  max-width:1100px!important;
}
#dentalWebModal .dental-original>img{
  width:min(100%,960px)!important;
  min-width:0!important;
  max-width:960px!important;
}
@media(max-width:900px){
  .pixel-test-modal .pixel-page,
  .pixel-test-modal .pixel-page>img{width:100%!important;min-width:0!important;max-width:100%!important;}
}

/* v41 diagnostic-B transplant: medical preview uses the exact simple structure/rules
   proven sharp in kyoritsu-render-test. Scoped so no legacy WEB preview CSS can affect it. */
#webDesignModal .webdesign-box{width:min(980px,96vw)!important;}
#webDesignModal .diagnostic-browser-wrap{overflow:auto!important;background:#262626!important;padding:18px!important;}
#webDesignModal .diagnostic-browser{box-sizing:border-box!important;width:836px!important;max-width:none!important;margin:0 auto!important;border:1px solid #555!important;border-radius:12px!important;overflow:hidden!important;background:#fff!important;transform:none!important;filter:none!important;contain:none!important;will-change:auto!important;}
#webDesignModal .diagnostic-chrome{box-sizing:border-box!important;height:42px!important;background:#e9e9e9!important;display:flex!important;align-items:center!important;gap:7px!important;padding:0 14px!important;color:#555!important;font-size:11px!important;line-height:normal!important;}
#webDesignModal .diagnostic-dot{display:block!important;width:9px!important;height:9px!important;min-width:9px!important;border-radius:50%!important;background:#aaa!important;}
#webDesignModal .diagnostic-address{margin-left:8px!important;background:#fff!important;border-radius:5px!important;padding:6px 12px!important;flex:1!important;color:#555!important;line-height:normal!important;}
#webDesignModal .diagnostic-scroll{box-sizing:border-box!important;width:834px!important;height:700px!important;overflow:auto!important;background:#fff!important;transform:none!important;filter:none!important;contain:none!important;will-change:auto!important;line-height:0!important;}
#webDesignModal .diagnostic-scroll>img{display:block!important;width:800px!important;min-width:800px!important;max-width:none!important;height:auto!important;margin:0 auto!important;padding:0!important;border:0!important;transform:none!important;filter:none!important;image-rendering:auto!important;}
@media(max-width:900px){#webDesignModal .diagnostic-browser-wrap{overflow:auto!important}#webDesignModal .diagnostic-browser{width:836px!important}#webDesignModal .diagnostic-scroll{width:834px!important}#webDesignModal .diagnostic-scroll>img{width:800px!important;min-width:800px!important}}

/* v42 medical render fix: keep the successful diagnostic rendering path intact.
   The portfolio modal previously applied backdrop-filter and modal transform animation
   to an ancestor of the preview, forcing the whole modal into a composited surface. */
#webDesignModal.show .box,
#webDesignModal .box{
  animation:none!important;
  transform:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  will-change:auto!important;
  contain:none!important;
  background:rgba(10,10,10,.96)!important;
}
#webDesignModal,
#webDesignModal.show{
  transform:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  contain:none!important;
}
#webDesignModal .diagnostic-browser-wrap,
#webDesignModal .diagnostic-browser,
#webDesignModal .diagnostic-scroll,
#webDesignModal .diagnostic-scroll>img{
  animation:none!important;
  transform:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  will-change:auto!important;
  contain:none!important;
}
/* v45 GRAPHIC additions + indicator normalization */
.modal .pindicator button,.modal .cpdot,.modal .newdot{width:8px!important;height:8px!important;min-width:8px!important;max-width:8px!important;flex:0 0 8px!important;aspect-ratio:1/1!important;border-radius:50%!important;padding:0!important}
.meiki-thumb{background-image:url("../images/thumbs/graphic/meiki.webp")!important;background-size:cover!important;background-position:center!important}
.netz-thumb{background-image:url("../images/thumbs/graphic/netz.webp")!important;background-size:cover!important;background-position:center!important}
.biima-thumb{background-image:url("../images/thumbs/graphic/biima.webp")!important;background-size:cover!important;background-position:center top!important}
.iunit-thumb{background-image:url("../images/thumbs/graphic/iunit.webp")!important;background-size:cover!important;background-position:center!important}
.single-work{display:flex;justify-content:center;margin-top:28px}.single-work figure{margin:0;text-align:center;max-width:1100px}.single-work button{border:0;background:none;padding:0;cursor:zoom-in}.single-work img{display:block;max-width:100%;max-height:68vh;object-fit:contain}.single-work figcaption{margin-top:10px}

/* v46: all paired GRAPHIC flyers use the same detail scale as restaurant flyer */
#biimaModal .box{width:min(1060px,92vw)!important;padding:26px 32px 30px!important}
#biimaModal .box h3{font-size:32px!important;margin:5px 0 12px!important}
#biimaModal .copy{gap:22px!important;padding:16px 0!important}
#biimaModal .copy p{font-size:11px!important;line-height:1.6!important}
#biimaModal .pair{max-width:780px!important;margin:0 auto!important;gap:34px!important;padding:18px 0 2px!important}
#biimaModal .pair img{width:100%!important;height:44vh!important;max-height:430px!important;object-fit:contain!important}
@media(max-width:700px){
 #biimaModal .box{width:96vw!important;padding:20px 16px 24px!important}
 #biimaModal .pair{grid-template-columns:1fr!important;gap:24px!important}
 #biimaModal .pair img{height:auto!important;max-height:55vh!important}
}

/* v47 reset: normalize newly added GRAPHIC detail viewers to existing baselines */
/* Single-page FLIER follows the established compact FLIER modal scale. */
#netzModal .box{
  width:min(1060px,92vw)!important;
  padding:26px 32px 30px!important;
}
#netzModal .box h3{font-size:32px!important;margin:5px 0 12px!important}
#netzModal .copy{gap:22px!important;padding:16px 0!important}
#netzModal .copy p{font-size:11px!important;line-height:1.6!important}
#netzModal .single-work{margin:18px auto 2px!important;max-width:780px!important}
#netzModal .single-work figure{width:100%!important;max-width:780px!important}
#netzModal .single-work button{display:block!important;width:100%!important}
#netzModal .single-work img{
  width:100%!important;
  height:44vh!important;
  max-height:430px!important;
  object-fit:contain!important;
  margin:0 auto!important;
}
/* Metal-processing logo follows the established LOGO viewer scale. */
#meikiModal .newstage{
  width:min(72vw,920px)!important;
  min-height:52vh!important;
  margin:0 auto!important;
}
#meikiModal .newzoom{width:100%!important}
#meikiModal .newzoom img{
  display:block!important;
  width:100%!important;
  height:46vh!important;
  max-height:none!important;
  object-fit:contain!important;
}
@media(max-width:700px){
  #netzModal .box{width:96vw!important;padding:20px 16px 24px!important}
  #netzModal .single-work img{height:auto!important;max-height:55vh!important}
  #meikiModal .newstage{width:min(76vw,520px)!important;min-height:44vh!important}
  #meikiModal .newzoom img{height:38vh!important}
}

.takuwa-thumb{background-image:url("../images/thumbs/graphic/takuwa.webp")!important;background-size:cover!important;background-position:center!important}

.pk-thumb{background-image:url("../images/thumbs/graphic/pk.webp")!important;background-size:cover!important;background-position:center!important}.eos-thumb{background-image:url("../images/thumbs/graphic/eos.webp")!important;background-size:cover!important;background-position:center!important}.comdec-thumb{background-image:url("../images/thumbs/graphic/comdec.webp")!important;background-size:cover!important;background-position:center!important}.club-thumb{background-image:url("../images/thumbs/graphic/club.webp")!important;background-size:cover!important;background-position:center!important}.host-thumb{background-image:url("../images/thumbs/graphic/host.webp")!important;background-size:cover!important;background-position:center!important}

/* FIX — new single-page FLIERs match the confirmed restaurant flyer viewer */
#eosModal .box,
#comdecModal .box,
#hostModal .box{
  width:min(1060px,92vw)!important;
  padding:26px 32px 30px!important;
}
#eosModal .box h3,
#comdecModal .box h3,
#hostModal .box h3{
  font-size:32px!important;
  margin:5px 0 12px!important;
}
#eosModal .copy,
#comdecModal .copy,
#hostModal .copy{
  gap:22px!important;
  padding:16px 0!important;
}
#eosModal .copy p,
#comdecModal .copy p,
#hostModal .copy p{
  font-size:11px!important;
  line-height:1.6!important;
}
/* Remove package-viewer's 3-column offset for these one-image flyers */
#eosModal .pviewer,
#comdecModal .pviewer,
#hostModal .pviewer{
  display:block!important;
  width:100%!important;
  padding:0!important;
}
#eosModal .newstage,
#comdecModal .newstage,
#hostModal .newstage{
  position:relative!important;
  width:100%!important;
  max-width:780px!important;
  min-height:0!important;
  height:calc(44vh + 18px)!important;
  margin:0 auto!important;
  overflow:visible!important;
}
#eosModal .newslide,
#comdecModal .newslide,
#hostModal .newslide{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
}
#eosModal .newzoom,
#comdecModal .newzoom,
#hostModal .newzoom{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  border:0!important;
  padding:0!important;
  background:none!important;
}
#eosModal .newzoom img,
#comdecModal .newzoom img,
#hostModal .newzoom img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:44vh!important;
  object-fit:contain!important;
  margin:0 auto!important;
}
/* Host is especially tall: always show the complete artwork rather than cropping */
#hostModal .newzoom img{
  max-height:44vh!important;
  object-fit:contain!important;
}
@media(max-width:700px){
  #eosModal .box,#comdecModal .box,#hostModal .box{
    width:96vw!important;padding:20px 16px 24px!important;
  }
  #eosModal .newstage,#comdecModal .newstage,#hostModal .newstage{
    max-width:100%!important;height:calc(55vh + 12px)!important;
  }
  #eosModal .newzoom img,#comdecModal .newzoom img,#hostModal .newzoom img{
    max-height:55vh!important;
  }
}

/* HOST LIST ONLY — full portrait thumbnail, no crop */
.host-thumb-full{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:none!important;
  overflow:hidden!important;
}
.host-thumb-full img{
  display:block!important;
  width:auto!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
}

/* v35 GRAPHIC additions */
.eos-thumb{background-position:center top!important}.comdec-thumb{background-position:center top!important}
.joeij-thumb{background-image:url("../images/thumbs/graphic/joeij.webp")!important;background-size:cover!important;background-position:center top!important}
.jb-thumb{background-image:url("../images/thumbs/graphic/jb.webp")!important;background-size:cover!important;background-position:center!important}
.shopcard-thumb{background-image:url("../images/thumbs/graphic/shopcard.webp")!important;background-size:cover!important;background-position:center!important}
.sinsei-thumb{background-image:url("../images/thumbs/graphic/sinsei.webp")!important;background-size:cover!important;background-position:center!important}
.manabi-thumb{background-image:url("../images/thumbs/graphic/manabi.webp")!important;background-size:cover!important;background-position:center!important}
/* joeij follows confirmed single-page FLIER display */
#joeijModal .box{width:min(1060px,92vw)!important;padding:26px 32px 30px!important}#joeijModal .box h3{font-size:32px!important;margin:5px 0 12px!important}#joeijModal .copy{gap:22px!important;padding:16px 0!important}#joeijModal .copy p{font-size:11px!important;line-height:1.6!important}#joeijModal .pviewer{display:block!important;width:100%!important;padding:0!important}#joeijModal .newstage{position:relative!important;width:100%!important;max-width:780px!important;min-height:0!important;height:calc(44vh + 18px)!important;margin:0 auto!important;overflow:visible!important}#joeijModal .newslide{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important}#joeijModal .newzoom{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important;border:0!important;padding:0!important;background:none!important}#joeijModal .newzoom img{display:block!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:44vh!important;object-fit:contain!important;margin:0 auto!important}
/* sinsei display scale = contractor pamphlet */
#sinseiModal .newstage{position:relative!important;width:min(78vw,1050px)!important;min-height:58vh!important;overflow:hidden!important}#sinseiModal .newslide{position:absolute!important;inset:0!important;margin:0!important;display:none!important;align-items:center!important;justify-content:center!important;flex-direction:column!important}#sinseiModal .newslide.active{display:flex!important}#sinseiModal .newzoom{border:0!important;background:none!important;padding:0!important;cursor:zoom-in!important;max-width:100%!important;max-height:54vh!important}#sinseiModal .newzoom img{display:block!important;max-width:100%!important;max-height:51vh!important;object-fit:contain!important}
@media(max-width:700px){#joeijModal .box{width:96vw!important;padding:20px 16px 24px!important}#joeijModal .newstage{max-width:100%!important;height:calc(55vh + 12px)!important}#joeijModal .newzoom img{max-height:55vh!important}#sinseiModal .newstage{width:min(76vw,520px)!important;min-height:44vh!important}#sinseiModal .newzoom img{max-height:38vh!important}}

/* v36 fix: GRAPHIC list must never clip as works are appended; Host uses normal cropped thumbnail */
.graphic-panel{max-height:none!important;overflow:visible!important;}
.host-thumb-full{display:block!important;background-image:url("../images/thumbs/graphic/host.webp")!important;background-size:cover!important;background-position:center!important;overflow:hidden!important;}
.host-thumb-full img{display:none!important;}

/* v37 GRAPHIC viewer normalization — 2026-09-19
   One visual system for GRAPHIC filters, artwork height and indicators. */
/* All genre/filter controls are visibly interactive. */
.subs button{cursor:pointer!important;}

/* Common GRAPHIC modal panel rhythm. Keep artwork aspect ratios; normalize visual height. */
#graphicModal .box,
.pamphlet-box,
#biimaModal .box,#netzModal .box,#eosModal .box,#comdecModal .box,#hostModal .box,#joeijModal .box,
#meikiModal .box,#takuwaModal .box,#pkModal .box,#clubModal .box,#sinseiModal .box,#jbModal .box,#shopcardModal .box,#manabiModal .box{
  width:min(1120px,94vw)!important;
  padding:24px 30px 26px!important;
}

/* Paired / early GRAPHIC viewers: same target artwork height. */
#graphicModal .pair img,
#biimaModal .pair img,
.pzoom img{
  height:50vh!important;
  max-height:500px!important;
  object-fit:contain!important;
}

/* New-style GRAPHIC galleries: reserve the same visual artwork zone. */
#eosModal .newstage,#comdecModal .newstage,#hostModal .newstage,#joeijModal .newstage,
#meikiModal .newstage,#takuwaModal .newstage,#pkModal .newstage,#clubModal .newstage,
#sinseiModal .newstage,#jbModal .newstage,#shopcardModal .newstage,#manabiModal .newstage{
  width:min(900px,80vw)!important;
  height:54vh!important;
  min-height:0!important;
  max-height:540px!important;
  margin:0 auto!important;
  overflow:hidden!important;
}
#eosModal .newzoom img,#comdecModal .newzoom img,#hostModal .newzoom img,#joeijModal .newzoom img,
#meikiModal .newzoom img,#takuwaModal .newzoom img,#pkModal .newzoom img,#clubModal .newzoom img,
#sinseiModal .newzoom img,#jbModal .newzoom img,#shopcardModal .newzoom img,#manabiModal .newzoom img{
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:50vh!important;
  object-fit:contain!important;
  margin:0 auto!important;
}

/* One indicator spec for old and new GRAPHIC implementations. */
.modal .pindicator,.modal .pkgindicator,.modal .logoindicator,.modal .infoindicator,
.modal .wwindicator,.modal .bpindicator,.modal .newindicator{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:10px!important;
  min-height:24px!important;
  padding:10px 0 2px!important;
  margin:0!important;
}
.modal .pdot,.modal .pkgdot,.modal .logodot,.modal .infodot,.modal .wwdot,
.modal .cpdot,.modal .bpdot,.modal .newdot{
  width:8px!important;height:8px!important;min-width:8px!important;max-width:8px!important;
  flex:0 0 8px!important;border-radius:50%!important;padding:0!important;margin:0!important;
}

@media(max-width:700px){
  #graphicModal .box,.pamphlet-box,
  #biimaModal .box,#netzModal .box,#eosModal .box,#comdecModal .box,#hostModal .box,#joeijModal .box,
  #meikiModal .box,#takuwaModal .box,#pkModal .box,#clubModal .box,#sinseiModal .box,#jbModal .box,#shopcardModal .box,#manabiModal .box{
    width:96vw!important;padding:20px 16px 22px!important;
  }
  #graphicModal .pair img,#biimaModal .pair img,.pzoom img{height:auto!important;max-height:55vh!important;}
  #eosModal .newstage,#comdecModal .newstage,#hostModal .newstage,#joeijModal .newstage,
  #meikiModal .newstage,#takuwaModal .newstage,#pkModal .newstage,#clubModal .newstage,
  #sinseiModal .newstage,#jbModal .newstage,#shopcardModal .newstage,#manabiModal .newstage{
    width:100%!important;height:57vh!important;max-height:none!important;
  }
  #eosModal .newzoom img,#comdecModal .newzoom img,#hostModal .newzoom img,#joeijModal .newzoom img,
  #meikiModal .newzoom img,#takuwaModal .newzoom img,#pkModal .newzoom img,#clubModal .newzoom img,
  #sinseiModal .newzoom img,#jbModal .newzoom img,#shopcardModal .newzoom img,#manabiModal .newzoom img{max-height:55vh!important;}
}

/* v38 fine tuning — automobile flier + tri-fold beauty pamphlet */
/* Automobile flier was still using the older compact 44vh rule. Match the unified artwork height. */
#netzModal .single-work{max-width:900px!important;}
#netzModal .single-work figure{max-width:900px!important;}
#netzModal .single-work img{
  width:auto!important;
  height:50vh!important;
  max-width:100%!important;
  max-height:500px!important;
  object-fit:contain!important;
}

/* Beauty pamphlet is a very wide tri-fold spread. Give it the width required to reach the same visual height
   without cropping or distorting the artwork. */
#beautyPamphletModal .box{
  width:min(1480px,97vw)!important;
  padding:24px 30px 26px!important;
}
#beautyPamphletModal .pviewer{
  grid-template-columns:44px minmax(0,1fr) 44px!important;
  align-items:center!important;
}
#beautyPamphletModal .bpstage{
  width:min(1320px,88vw)!important;
  height:50vh!important;
  max-height:500px!important;
  min-height:0!important;
  margin:0 auto!important;
  overflow:hidden!important;
}
#beautyPamphletModal .bpzoom img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:500px!important;
  object-fit:contain!important;
  object-position:center!important;
}
@media(max-width:700px){
  #netzModal .single-work img{height:auto!important;max-height:55vh!important;}
  #beautyPamphletModal .box{width:96vw!important;padding:20px 16px 22px!important;}
  #beautyPamphletModal .pviewer{grid-template-columns:30px minmax(0,1fr) 30px!important;}
  #beautyPamphletModal .bpstage{width:100%!important;height:46vw!important;max-height:300px!important;}
  #beautyPamphletModal .bpzoom img{max-height:300px!important;}
}

/* v39 responsive centering — keep GRAPHIC artwork centered on narrower viewports */
@media (max-width:1100px){
  /* Arrow columns belong to the viewer, not to the artwork width. */
  .modal .pviewer{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    min-width:0!important;
  }
  .modal .pviewer > *{min-width:0!important;}

  /* Galleries must size from the center grid column, never from viewport width. */
  #eosModal .newstage,#comdecModal .newstage,#hostModal .newstage,#joeijModal .newstage,
  #meikiModal .newstage,#takuwaModal .newstage,#pkModal .newstage,#clubModal .newstage,
  #sinseiModal .newstage,#jbModal .newstage,#shopcardModal .newstage,#manabiModal .newstage,
  #beautyPamphletModal .bpstage{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Keep the actual artwork centered independently of its aspect ratio. */
  .modal .newslide,.modal .newzoom,.modal .bpzoom{
    justify-content:center!important;
    align-items:center!important;
  }
  .modal .newzoom img,.modal .bpzoom img,
  #netzModal .single-work img{
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Old paired / horizontal works also stay centered when their available width contracts. */
  #graphicModal .pair,#biimaModal .pair,#netzModal .single-work{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* v40 true responsive centering — 2026-09-19
   Every GRAPHIC stage must size from the CENTER grid track, not from vw.
   This fixes horizontal works drifting right when the modal gets narrow. */
@media (max-width:1100px){
  .modal .pviewer{
    grid-template-columns:42px minmax(0,1fr) 42px!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
  }
  .modal .pstage,
  .modal .pkgstage,
  .modal .cpstage,
  .modal .logostage,
  .modal .infostage,
  .modal .wwstage,
  .modal .bpstage,
  .modal .newstage{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .modal .cpslide,
  .modal .pkgslide,
  .modal .logoslide,
  .modal .infoslide,
  .modal .wwslide,
  .modal .bpslide,
  .modal .newslide{
    width:100%!important;
    max-width:100%!important;
    left:0!important;
    right:0!important;
  }
  .modal .cpzoom,
  .modal .pkgzoom,
  .modal .logozoom,
  .modal .infozoom,
  .modal .wwzoom,
  .modal .bpzoom,
  .modal .newzoom{
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
  }
  .modal .cpzoom img,
  .modal .pkgzoom img,
  .modal .logozoom img,
  .modal .infozoom img,
  .modal .wwzoom img,
  .modal .bpzoom img,
  .modal .newzoom img{
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}
@media (max-width:700px){
  .modal .pviewer{
    grid-template-columns:30px minmax(0,1fr) 30px!important;
    gap:4px!important;
  }
}

/* v36: added GRAPHIC works */
.rinfo-thumb{background-image:url("../images/thumbs/graphic/rinfo.webp");background-size:cover;background-position:center}.akanban-thumb{background-image:url("../images/thumbs/graphic/akanban.webp");background-size:cover;background-position:center}.beer-thumb{background-image:url("../images/thumbs/graphic/beer.webp");background-size:cover;background-position:center}.pbl-thumb{background-image:url("../images/thumbs/graphic/pbl.webp");background-size:cover;background-position:center}.marusan-thumb{background-image:url("../images/thumbs/graphic/marusan.webp");background-size:cover;background-position:center top}.stsk-thumb{background-image:url("../images/thumbs/graphic/stsk.webp");background-size:cover;background-position:center top}.hige-thumb{background-image:url("../images/thumbs/graphic/hige.webp");background-size:cover;background-position:center}

/* v41 — new-work modal consistency fix
   New FRONT/BACK fliers must inherit the same visual-height rules as the established food flier.
   New signboard/info galleries are also part of the unified GRAPHIC modal family. */
#marusanModal .box,#stskModal .box,#rinfoModal .box,#akanbanModal .box,#beerModal .box,#pblModal .box,#higeModal .box{
  width:min(1120px,94vw)!important;
  padding:24px 30px 26px!important;
}
#marusanModal .pair,#stskModal .pair{
  width:100%!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  justify-content:center!important;
  align-items:center!important;
}
#marusanModal .pair img,#stskModal .pair img{
  width:auto!important;
  height:50vh!important;
  max-width:100%!important;
  max-height:500px!important;
  object-fit:contain!important;
}
#rinfoModal .newstage,#akanbanModal .newstage,#beerModal .newstage,#pblModal .newstage,#higeModal .newstage{
  width:min(900px,80vw)!important;
  height:54vh!important;
  min-height:0!important;
  max-height:540px!important;
  margin:0 auto!important;
  overflow:hidden!important;
}
#rinfoModal .newzoom img,#akanbanModal .newzoom img,#beerModal .newzoom img,#pblModal .newzoom img,#higeModal .newzoom img{
  width:auto!important;height:auto!important;max-width:100%!important;max-height:50vh!important;object-fit:contain!important;margin:0 auto!important;
}
@media(max-width:1100px){
  #rinfoModal .newstage,#akanbanModal .newstage,#beerModal .newstage,#pblModal .newstage,#higeModal .newstage{width:100%!important;max-width:100%!important;}
}
@media(max-width:700px){
  #marusanModal .box,#stskModal .box,#rinfoModal .box,#akanbanModal .box,#beerModal .box,#pblModal .box,#higeModal .box{width:96vw!important;padding:20px 16px 22px!important;}
  #marusanModal .pair img,#stskModal .pair img{height:auto!important;max-height:55vh!important;}
  #rinfoModal .newstage,#akanbanModal .newstage,#beerModal .newstage,#pblModal .newstage,#higeModal .newstage{width:100%!important;height:57vh!important;max-height:none!important;}
  #rinfoModal .newzoom img,#akanbanModal .newzoom img,#beerModal .newzoom img,#pblModal .newzoom img,#higeModal .newzoom img{max-height:55vh!important;}
}

/* 2026-09-20 GRAPHIC additions */
.reito-thumb{background-image:url("../images/thumbs/graphic/reito.webp");background-size:cover;background-position:center}
.carmafia-thumb{background-image:url("../images/thumbs/graphic/carmafia.webp");background-size:cover;background-position:center}
.kanazawa-thumb{background-image:url("../images/thumbs/graphic/kanazawa.webp");background-size:cover;background-position:center}
.n0-thumb{background-image:url("../images/thumbs/graphic/n0.webp");background-size:cover;background-position:center top}
.hashi-thumb{background-image:url("../images/thumbs/graphic/hashi.webp");background-size:cover;background-position:center}
.lillinser-thumb{background-image:url("../images/thumbs/graphic/lillinser.webp");background-size:cover;background-position:center}
.bonsai-thumb{background-image:url("../images/thumbs/graphic/bonsai.webp");background-size:cover;background-position:center center}
.dog-thumb{background-image:url("../images/thumbs/graphic/dog.webp");background-size:cover;background-position:center}
.gatener-thumb{background-image:url("../images/thumbs/graphic/gatener.webp");background-size:cover;background-position:center center}
#reitoModal .box,#kanazawaModal .box,#carmafiaModal .box,#n0Modal .box,#hashiModal .box,#lillinserModal .box,#dogModal .box,#bonsaiModal .box,#gatenerModal .box{width:min(1060px,92vw)!important;padding:26px 32px 30px!important}
#reitoModal .newstage,#kanazawaModal .newstage{width:min(900px,80vw)!important;height:54vh!important;max-height:540px!important;margin:0 auto!important;overflow:hidden!important}
#reitoModal .newzoom img,#kanazawaModal .newzoom img{width:auto!important;height:auto!important;max-width:100%!important;max-height:50vh!important;object-fit:contain!important;margin:0 auto!important}
#carmafiaModal .newstage,#hashiModal .newstage,#dogModal .newstage,#n0Modal .newstage,#lillinserModal .newstage{width:min(900px,80vw)!important;height:54vh!important;max-height:540px!important;margin:0 auto!important;overflow:hidden!important}
#carmafiaModal .newzoom img,#hashiModal .newzoom img,#dogModal .newzoom img,#n0Modal .newzoom img,#lillinserModal .newzoom img{width:auto!important;height:auto!important;max-width:100%!important;max-height:50vh!important;object-fit:contain!important;margin:0 auto!important}
.duo-inline{display:flex;align-items:center;justify-content:center;gap:22px;width:100%;height:100%}.duo-inline>div{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;height:100%}.duo-inline .newzoom{display:flex;align-items:center;justify-content:center;min-width:0;height:calc(100% - 28px)}.duo-inline img{max-height:46vh!important;max-width:100%!important;width:auto!important;height:auto!important;object-fit:contain!important}.duo-inline figcaption{margin-top:8px}
#bonsaiModal .pair,#gatenerModal .pair{display:flex!important;justify-content:center!important;align-items:flex-start!important;gap:24px!important}#bonsaiModal .pair figure,#gatenerModal .pair figure{flex:0 1 auto!important}#bonsaiModal .pair img,#gatenerModal .pair img{width:auto!important;height:50vh!important;max-width:100%!important;max-height:500px!important;object-fit:contain!important}
@media(max-width:700px){#reitoModal .box,#kanazawaModal .box,#carmafiaModal .box,#n0Modal .box,#hashiModal .box,#lillinserModal .box,#dogModal .box,#bonsaiModal .box,#gatenerModal .box{width:96vw!important;padding:20px 16px 22px!important}#reitoModal .newstage,#kanazawaModal .newstage,#carmafiaModal .newstage,#n0Modal .newstage,#hashiModal .newstage,#lillinserModal .newstage,#dogModal .newstage{width:100%!important;height:57vh!important;max-height:none!important}.duo-inline{gap:10px}.duo-inline img{max-height:50vh!important}#bonsaiModal .pair img,#gatenerModal .pair img{height:auto!important;max-height:55vh!important}}

/* Single-image works: no slide controls / indicators */
.single-static-view{display:flex;justify-content:center;align-items:center;width:100%;margin:28px auto 8px;text-align:center}
.single-static-view .newzoom{display:block;margin:0 auto;border:0;background:transparent;padding:0;cursor:zoom-in}
.single-static-view img{display:block;margin:0 auto;max-width:min(100%,760px);max-height:min(50vh,500px);width:auto;height:auto;object-fit:contain}
@media (max-width:700px){.single-static-view{margin-top:22px}.single-static-view img{max-width:100%;max-height:50vh}}

/* Performance pass: avoid layout-heavy max-height animation as WORKS grows. */
@keyframes panelOpen{
  0%{opacity:0;transform:scaleY(.985) translateY(-10px)}
  55%{opacity:.72}
  100%{opacity:1;transform:scaleY(1) translateY(0)}
}
/* Let the browser skip painting off-screen work cards until they approach the viewport. */
.cards .card{content-visibility:auto;contain-intrinsic-size:260px 320px}

/* 2026-09-20 corrective pass
   PAGE/IMAGE VIEW counter strips were an unintended addition and are removed from HTML.
   Keep captions only below artwork and reserve enough vertical room so they cannot be clipped. */
.modal .ptool{display:none!important;}

#clubModal .newslide figcaption,
#sinseiModal .newslide figcaption,
#manabiModal .newslide figcaption,
#akanbanModal .newslide figcaption,
#pblModal .newslide figcaption,
#higeModal .newslide figcaption{
  position:static!important;
  display:block!important;
  flex:0 0 auto!important;
  width:100%!important;
  min-height:1.6em!important;
  margin:10px 0 0!important;
  padding:0 8px!important;
  box-sizing:border-box!important;
  text-align:center!important;
  line-height:1.6!important;
  white-space:normal!important;
  overflow:visible!important;
}
#clubModal .newstage,
#sinseiModal .newstage,
#manabiModal .newstage,
#akanbanModal .newstage,
#pblModal .newstage,
#higeModal .newstage{
  min-height:58vh!important;
}
#clubModal .newzoom img,
#sinseiModal .newzoom img,
#manabiModal .newzoom img,
#akanbanModal .newzoom img,
#pblModal .newzoom img,
#higeModal .newzoom img{
  max-height:49vh!important;
}

/* Ramen menu: first view is two portrait pages side-by-side; later views are single pages. */
#ramenMenuModal .newstage{min-height:58vh!important;}
#ramenMenuModal .ramen-pair{
  width:100%!important;
  height:100%!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:28px!important;
  padding:0 18px!important;
  box-sizing:border-box!important;
  align-items:center!important;
  justify-items:center!important;
}
#ramenMenuModal .ramen-pair figure{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}
#ramenMenuModal .ramen-pair .newzoom{
  width:100%!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
#ramenMenuModal .ramen-pair .newzoom img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:49vh!important;
  object-fit:contain!important;
}
#ramenMenuModal .ramen-pair figcaption{
  position:static!important;
  width:100%!important;
  min-height:1.6em!important;
  margin-top:8px!important;
  text-align:center!important;
  line-height:1.6!important;
  overflow:visible!important;
}
@media(max-width:700px){
  #clubModal .newstage,#sinseiModal .newstage,#manabiModal .newstage,
  #akanbanModal .newstage,#pblModal .newstage,#higeModal .newstage,
  #ramenMenuModal .newstage{min-height:48vh!important;}
  #clubModal .newzoom img,#sinseiModal .newzoom img,#manabiModal .newzoom img,
  #akanbanModal .newzoom img,#pblModal .newzoom img,#higeModal .newzoom img{max-height:39vh!important;}
  #ramenMenuModal .ramen-pair{gap:10px!important;padding:0 4px!important;}
  #ramenMenuModal .ramen-pair .newzoom img{max-height:39vh!important;}
}

/* 2026-09-20 caption containment — targeted only to confirmed affected galleries.
   Keep the original gallery layout; reserve vertical room for captions below artwork. */
#meikiModal .newslide figcaption,
#takuwaModal .newslide figcaption,
#pkModal .newslide figcaption,
#shopcardModal .newslide figcaption{
  position:static!important;
  display:block!important;
  flex:0 0 auto!important;
  width:100%!important;
  min-height:1.6em!important;
  margin:10px 0 0!important;
  padding:0 8px!important;
  box-sizing:border-box!important;
  text-align:center!important;
  line-height:1.6!important;
  white-space:normal!important;
  overflow:visible!important;
}
#meikiModal .newstage,
#takuwaModal .newstage,
#pkModal .newstage,
#shopcardModal .newstage{
  min-height:58vh!important;
}
#meikiModal .newzoom img,
#takuwaModal .newzoom img,
#pkModal .newzoom img,
#shopcardModal .newzoom img{
  max-height:49vh!important;
}
@media(max-width:700px){
  #meikiModal .newstage,#takuwaModal .newstage,#pkModal .newstage,#shopcardModal .newstage{min-height:48vh!important;}
  #meikiModal .newzoom img,#takuwaModal .newzoom img,#pkModal .newzoom img,#shopcardModal .newzoom img{max-height:39vh!important;}
}

/* WEB modal viewport fit v2 — preserve browser mockup proportions.
   The modal stays inside the viewport; only the page area inside the mock browser scrolls. */
#webDesignModal .webdesign-box,
#beautyWebModal .webdesign-box,
#burgerWebModal .webdesign-box,
#hooterWebModal .webdesign-box,
#dentalWebModal .webdesign-box,
#chefcookWebModal .webdesign-box,
#megatrendWebModal .webdesign-box,
#nayaWebModal .webdesign-box{
  box-sizing:border-box!important;
  max-height:96dvh!important;
  overflow:hidden!important;
}

/* Keep the established fake-browser layout. Only give its content window a
   viewport-aware height; do not flex/stretch the browser shell itself. */
#beautyWebModal .webviewport,
#dentalWebModal .webviewport,
#chefcookWebModal .webviewport,
#nayaWebModal .webviewport{
  height:min(64dvh,700px)!important;
  max-height:min(64dvh,700px)!important;
  aspect-ratio:auto!important;
  overflow-y:auto!important;
  overflow-x:auto!important;
}
#burgerWebModal .live-frame-wrap,
#hooterWebModal .live-frame-wrap,
#megatrendWebModal .live-frame-wrap{
  height:min(64dvh,700px)!important;
  max-height:min(64dvh,700px)!important;
  overflow:auto!important;
}
#webDesignModal .diagnostic-browser-wrap{
  max-height:min(70dvh,760px)!important;
  overflow:auto!important;
}
#webDesignModal .diagnostic-scroll{
  height:min(64dvh,700px)!important;
  max-height:min(64dvh,700px)!important;
  overflow:auto!important;
}

/* Use the available height a little more aggressively on tall desktop screens. */
@media (min-width:701px) and (min-height:900px){
  #beautyWebModal .webviewport,
  #dentalWebModal .webviewport,
  #chefcookWebModal .webviewport,
  #nayaWebModal .webviewport,
  #burgerWebModal .live-frame-wrap,
  #hooterWebModal .live-frame-wrap,
  #megatrendWebModal .live-frame-wrap{
    height:min(68dvh,760px)!important;
    max-height:min(68dvh,760px)!important;
  }
  #webDesignModal .diagnostic-scroll{
    height:min(68dvh,760px)!important;
    max-height:min(68dvh,760px)!important;
  }
}

@media(max-width:700px){
  #webDesignModal .webdesign-box,
  #beautyWebModal .webdesign-box,
  #burgerWebModal .webdesign-box,
  #hooterWebModal .webdesign-box,
  #dentalWebModal .webdesign-box,
  #chefcookWebModal .webdesign-box,
  #megatrendWebModal .webdesign-box,
  #nayaWebModal .webdesign-box{
    max-height:96dvh!important;
    overflow:hidden!important;
  }
  #beautyWebModal .webviewport,
  #dentalWebModal .webviewport,
  #chefcookWebModal .webviewport,
  #nayaWebModal .webviewport,
  #burgerWebModal .live-frame-wrap,
  #hooterWebModal .live-frame-wrap,
  #megatrendWebModal .live-frame-wrap,
  #webDesignModal .diagnostic-scroll{
    height:min(56dvh,560px)!important;
    max-height:min(56dvh,560px)!important;
  }
}

/* 2026-09-20 — WORKS category image banners */
.banner[data-major]{
  position:relative;
  overflow:hidden;
  background-color:#151515;
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% auto;
  background-blend-mode:normal;
  text-shadow:0 2px 12px rgba(0,0,0,.75);
  transition:background-size .45s cubic-bezier(.2,.8,.25,1), filter .3s ease, padding-left .3s ease;
}
.banner[data-major="GRAPHIC"]{background-image:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.46)),url("../images/menu/graphic.webp")}
.banner[data-major="WEB"]{background-image:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.46)),url("../images/menu/web.webp")}
.banner[data-major="MOVIE"]{background-image:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.46)),url("../images/menu/movie.webp")}
.banner[data-major="MOTION"]{background-image:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.46)),url("../images/menu/motion.webp")}
.banner[data-major]:hover{
  background-size:108% auto;
  filter:brightness(1.22) contrast(1.04);
  padding-left:38px;
}
.banner[data-major].on{
  outline:3px solid #111;
  filter:brightness(1.08);
}
@media(max-width:700px){
  .banner[data-major]{background-size:cover;background-position:center}
  .banner[data-major]:hover{background-size:cover}
}
@media(prefers-reduced-motion:reduce){
  .banner[data-major]{transition:none}
}

/* 2026-09-20 — Shared modal information typography
   Scope: text/information area only across GRAPHIC / WEB / MOVIE / MOTION.
   Gallery, browser preview, video, modal dimensions and controls are untouched. */
.modal .box > h3{
  font-size:32px!important;
  margin:5px 0 12px!important;
}
.modal .box > .copy{
  gap:22px!important;
  padding:16px 0!important;
}
.modal .box > .copy p{
  font-size:11px!important;
  line-height:1.6!important;
}



/* BANNER — dedicated visual wall */
.banner-panel .banner-wall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:18px}
.banner-tile{display:block;width:100%;aspect-ratio:1/1;padding:0;border:0;background:#eee;overflow:hidden;cursor:zoom-in}
.banner-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:filter .22s ease,transform .28s ease}
.banner-tile:hover img{filter:brightness(.78);transform:scale(1.018)}
.banner-viewer{position:fixed;inset:0;z-index:10020;display:none;align-items:center;justify-content:center}
.banner-viewer.show{display:flex}
.banner-viewer-shade{position:absolute;inset:0;background:rgba(0,0,0,.84);backdrop-filter:blur(3px)}
.banner-viewer-stage{position:relative;z-index:1;width:min(78vh,78vw);height:min(78vh,78vw);display:flex;align-items:center;justify-content:center}
.banner-viewer-stage img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 14px 44px rgba(0,0,0,.28)}
.banner-viewer-close,.banner-viewer-arrow{position:fixed;z-index:2;border:0;background:transparent;color:#fff;cursor:pointer;line-height:1}
.banner-viewer-close{right:28px;top:22px;font-size:38px;font-weight:200}
.banner-viewer-arrow{top:50%;transform:translateY(-50%);font-size:64px;padding:18px 22px}
.banner-viewer-arrow.prev{left:24px}.banner-viewer-arrow.next{right:24px}
.banner-viewer-arrow:hover,.banner-viewer-close:hover{opacity:.55}
@media(max-width:1100px){.banner-panel .banner-wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:820px){.banner-panel .banner-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}
@media(max-width:700px){.banner-panel .banner-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:12px}.banner-viewer-stage{width:88vw;height:88vw}.banner-viewer-arrow{font-size:48px;padding:14px 10px}.banner-viewer-arrow.prev{left:2px}.banner-viewer-arrow.next{right:2px}.banner-viewer-close{right:14px;top:14px;font-size:34px}}
@media(prefers-reduced-motion:reduce){.banner-tile img{transition:none}}

/* BANNER gallery refinements */
.banner-gallery-thumb{background-image:url("../images/thumbs/graphic/banner-gallery.webp");background-size:cover;background-position:center}
.banner-tile{overflow:hidden}
.banner-tile img{transition:filter .22s ease,transform .22s ease}
.banner-tile:hover img{filter:brightness(.78)}
@media (hover:hover){.banner-tile:hover img{transform:scale(1.015)}}
@media (prefers-reduced-motion:reduce){.banner-tile img{transition:none}.banner-tile:hover img{transform:none}}


/* MAP — dedicated 4:3 gallery */
.map-panel .map-wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.map-tile{display:block;width:100%;aspect-ratio:4/3;padding:0;border:0;background:#eee;overflow:hidden;cursor:zoom-in}
.map-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:filter .22s ease,transform .22s ease}
.map-tile:hover img{filter:brightness(.78)}
.map-gallery-thumb{background-image:url("../images/thumbs/graphic/map-gallery.webp");background-size:cover;background-position:center}
@media (hover:hover){.map-tile:hover img{transform:scale(1.015)}}
@media(max-width:1100px){.map-panel .map-wall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.map-panel .map-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:12px}}
@media(prefers-reduced-motion:reduce){.map-tile img{transition:none}.map-tile:hover img{transform:none}}

/* MOVIE / MOTION thumbnail images */
.video-panel .card .pic{overflow:hidden}
.video-panel .card .pic .video-thumb{width:100%;height:100%;display:block;object-fit:cover;transition:filter .22s ease,transform .22s ease}
.video-panel .card:hover .pic .video-thumb{filter:brightness(.82)}
@media (hover:hover){.video-panel .card:hover .pic .video-thumb{transform:scale(1.015)}}
@media (prefers-reduced-motion:reduce){.video-panel .card .pic .video-thumb{transition:none}.video-panel .card:hover .pic .video-thumb{transform:none}}

/* 2026-09-21 — SVG arrow controls: GRAPHIC modal + BANNER / MAP viewer */
.modal .parrow,
.banner-viewer-arrow{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent url("../images/ui/yazirusi.svg") center/contain no-repeat!important;
  color:transparent!important;
  font-size:0!important;
  cursor:pointer!important;
  transition:filter .2s ease, transform .2s ease!important;
}
.modal .parrow::before,
.banner-viewer-arrow::before{content:none!important;display:none!important}
.modal .parrow.prev{transform:rotate(180deg)!important}
.modal .parrow.next{transform:none!important}
@media (hover:hover){
  .modal .parrow:hover,
  .banner-viewer-arrow:hover{
    background-color:transparent!important;
    filter:invert(1)!important;
    opacity:1!important;
  }
}
.banner-viewer-arrow{
  position:fixed!important;
  top:50%!important;
  z-index:2!important;
}
.banner-viewer-arrow.prev{
  left:24px!important;
  transform:translateY(-50%) rotate(180deg)!important;
}
.banner-viewer-arrow.next{
  right:24px!important;
  transform:translateY(-50%)!important;
}
@media(max-width:700px){
  .modal .parrow,
  .banner-viewer-arrow{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
  }
  .banner-viewer-arrow.prev{left:8px!important}
  .banner-viewer-arrow.next{right:8px!important}
}
@media(prefers-reduced-motion:reduce){
  .modal .parrow,
  .banner-viewer-arrow{transition:none!important}
}

/* 2026-09-21 — BANNER / MAP viewer arrows closer to displayed image */
.banner-viewer-arrow.prev{
  left:max(14px, calc(50% - min(39vh, 39vw) - 58px))!important;
}
.banner-viewer-arrow.next{
  right:max(14px, calc(50% - min(39vh, 39vw) - 58px))!important;
}
@media(max-width:700px){
  .banner-viewer-arrow.prev{
    left:max(6px, calc(50% - 44vw - 42px))!important;
  }
  .banner-viewer-arrow.next{
    right:max(6px, calc(50% - 44vw - 42px))!important;
  }
}

/* 2026-09-21 — BANNER / MAP viewer arrows: approx. 70px gap from image edge */
.banner-viewer-arrow.prev{
  left:max(14px, calc(50% - min(39vh, 39vw) - 116px))!important;
}
.banner-viewer-arrow.next{
  right:max(14px, calc(50% - min(39vh, 39vw) - 116px))!important;
}
@media(max-width:700px){
  .banner-viewer-arrow.prev{
    left:max(6px, calc(50% - 44vw - 108px))!important;
  }
  .banner-viewer-arrow.next{
    right:max(6px, calc(50% - 44vw - 108px))!important;
  }
}

/* ABOUT section — integrated 2026-09-21 */
.about-section{background:#111;color:#f5f5f5;padding:0 4vw;font-family:Arial,"Noto Sans JP",sans-serif}
.about-inner{width:min(1320px,100%);margin:0 auto}.about-eyebrow{font-size:11px;letter-spacing:.28em;margin:0 0 22px;color:#929292}.about-hero{min-height:82vh;padding:110px 0 64px;display:flex;flex-direction:column;justify-content:flex-end}.about-hero h2{font-size:clamp(72px,10.2vw,154px);line-height:.79;letter-spacing:-.072em;margin:0;font-weight:800}.about-hero-bottom{margin-top:56px;padding-top:24px;border-top:1px solid #3a3a3a;display:flex;justify-content:space-between;gap:40px}.about-lead{font-size:13px;line-height:2;color:#bbb;margin:0}.about-role{font-size:10px;line-height:1.75;letter-spacing:.12em;color:#777;margin:0;text-align:right}.about-block{display:grid;grid-template-columns:320px 1fr;gap:80px;padding:110px 0;border-top:1px solid #3a3a3a}.about-title h3{font-size:48px;line-height:.9;letter-spacing:-.05em;margin:0}.about-photo{width:210px;aspect-ratio:1;margin-top:42px;border:1px solid #444;border-radius:50%;overflow:hidden;background:#181818}.about-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}.about-profile-copy{padding-top:2px;max-width:820px}.about-bigcopy{font-size:clamp(27px,3.2vw,46px)!important;line-height:1.4!important;letter-spacing:-.035em;color:#f5f5f5!important;margin:0 0 52px!important}.about-profile-copy>p:not(.about-bigcopy){max-width:690px;font-size:12px;line-height:2.15;color:#aaa;margin:0}.about-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:44px}.about-tags span{border:1px solid #fff;border-radius:0;background:transparent;color:#fff;padding:8px 11px;font-size:9px;letter-spacing:.12em}.about-timeline{border-top:1px solid #444}.about-timeline article{display:grid;grid-template-columns:100px 1fr;gap:24px;padding:27px 0;border-bottom:1px solid #333}.about-timeline time{font-size:26px;font-weight:700;letter-spacing:-.04em}.about-timeline h4{font-size:11px;letter-spacing:.13em;margin:2px 0 10px}.about-timeline p{font-size:11px;line-height:1.9;color:#999;margin:0;max-width:650px}.about-skills .about-title{position:sticky;top:40px;align-self:start}.about-note{font-size:11px;line-height:1.8;color:#888;margin-top:28px}.about-fields{border-top:1px solid #444}.about-field-row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #333}.about-field{padding:30px 26px 32px 0;min-width:0}.about-field+.about-field{border-left:1px solid #333;padding-left:30px}.about-field h4{font-size:13px;letter-spacing:.16em;margin:0 0 24px;text-align:left}.about-icons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 10px;align-items:start}.about-icons figure{margin:0;text-align:center}.about-icons figure img{display:block;width:72px;max-width:100%;aspect-ratio:1;margin:0 auto 10px;transition:transform .25s ease;backface-visibility:hidden;transform:translateZ(0)}.about-icons figure:hover img{transform:translateZ(0) scale(1.08)}.about-icons figcaption{font-size:9px;color:#aaa;line-height:1.35}.about-contact{padding:120px 0 100px;border-top:1px solid #3a3a3a}.about-contact h3{font-size:clamp(70px,10vw,150px);line-height:.8;letter-spacing:-.07em;margin:0}.about-contact-bottom{margin-top:60px;padding-top:24px;border-top:1px solid #3a3a3a;display:flex;justify-content:space-between;align-items:flex-end}.about-contact-bottom p{font-size:11px;line-height:1.9;color:#999;margin:0}.about-contact-bottom a{font-size:16px;color:#fff;text-decoration:none;border-bottom:1px solid #777;padding-bottom:8px}
@media(max-width:900px){.about-section{padding:0 18px}.about-inner{width:min(100%,700px)}.about-hero{min-height:72vh;padding:76px 0 52px}.about-hero h2{font-size:clamp(58px,16vw,100px)}.about-hero-bottom{display:block}.about-role{text-align:left;margin-top:28px}.about-block{grid-template-columns:1fr;gap:48px;padding:76px 0}.about-title h3{font-size:42px}.about-photo{width:180px;margin-top:30px}.about-skills .about-title{position:static}.about-field{padding:26px 18px 28px 0}.about-field+.about-field{padding-left:20px}.about-icons{grid-template-columns:repeat(2,1fr);gap:16px 8px}.about-icons figure img{width:66px}.about-contact{padding:80px 0}.about-contact-bottom{display:block}.about-contact-bottom a{display:inline-block;margin-top:30px}}
@media(max-width:560px){.about-hero h2{font-size:15.5vw}.about-lead{font-size:11px}.about-bigcopy{font-size:26px!important}.about-photo{width:150px;margin-top:26px}.about-timeline article{grid-template-columns:70px 1fr}.about-timeline time{font-size:20px}.about-field-row{grid-template-columns:1fr 1fr}.about-field h4{font-size:10px;letter-spacing:.1em}.about-field{padding-right:10px}.about-field+.about-field{padding-left:12px}.about-icons{grid-template-columns:repeat(2,1fr)}.about-icons figure img{width:58px}.about-icons figcaption{font-size:8px}.about-contact h3{font-size:16vw}}


/* ABOUT SKILL / FIELD — portfolio integration layout fix */
.about-block.about-skills{
  display:grid!important;
  grid-template-columns:300px minmax(0,1fr)!important;
  column-gap:72px!important;
  align-items:start!important;
}
.about-skills .about-title{
  position:sticky!important;
  top:40px!important;
  width:300px!important;
  min-width:300px!important;
  max-width:300px!important;
  overflow:visible!important;
}
.about-skills .about-title h3{
  display:block!important;
  width:300px!important;
  max-width:300px!important;
  margin:0!important;
  font-size:40px!important;
  line-height:.92!important;
  letter-spacing:-.05em!important;
  white-space:normal!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
}
.about-skills .about-note{
  display:block!important;
  position:static!important;
  width:300px!important;
  max-width:300px!important;
  margin:28px 0 0!important;
  writing-mode:horizontal-tb!important;
  white-space:normal!important;
  word-break:normal!important;
}
.about-skills .about-fields{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}
@media(max-width:1050px){
  .about-block.about-skills{
    grid-template-columns:1fr!important;
    row-gap:48px!important;
  }
  .about-skills .about-title{
    position:static!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
  }
  .about-skills .about-title h3,
  .about-skills .about-note{
    width:auto!important;
    max-width:none!important;
  }
}

/* vANIM — site-wide entrance motion; existing interaction animations untouched */
@media (prefers-reduced-motion:no-preference){
 html.motion-ready .hero>small,html.motion-ready .hero>h1{opacity:0;transform:translateY(34px)}
 html.motion-ready.motion-loaded .hero>small,html.motion-ready.motion-loaded .hero>h1{opacity:1;transform:none;transition:opacity .75s ease,transform .9s cubic-bezier(.2,.75,.2,1)}
 html.motion-ready.motion-loaded .hero>h1{transition-delay:.12s}
 html.motion-ready .works .head,html.motion-ready .about-hero,html.motion-ready .about-profile>*,html.motion-ready .about-career>*,html.motion-ready .about-skills>*,html.motion-ready .about-contact>*{opacity:0;transform:translateY(34px)}
 html.motion-ready .motion-in{opacity:1!important;transform:none!important;transition:opacity .72s ease,transform .82s cubic-bezier(.2,.75,.2,1)}
 html.motion-ready .banner.motion-watch{opacity:0;transform:translateY(24px)}
 html.motion-ready .banner.motion-watch.motion-in{opacity:1;transform:none;transition:opacity .55s ease,transform .68s cubic-bezier(.2,.75,.2,1),background .3s,padding-left .3s}
 html.motion-ready .card.motion-watch{opacity:0;transform:translateY(22px)}
 html.motion-ready .card.motion-watch.motion-in{opacity:1;transform:none;transition:opacity .48s ease,transform .62s cubic-bezier(.2,.75,.2,1)}
 html.motion-ready .about-timeline::before{transform:scaleY(0);transform-origin:top;transition:transform 1.15s cubic-bezier(.2,.75,.2,1)}
 html.motion-ready .about-career.motion-section-in .about-timeline::before{transform:scaleY(1)}
 html.motion-ready .about-timeline article{opacity:0;transform:translateX(18px)}
 html.motion-ready .about-career.motion-section-in .about-timeline article{opacity:1;transform:none;transition:opacity .55s ease,transform .65s ease}
 html.motion-ready .about-career.motion-section-in .about-timeline article:nth-child(2){transition-delay:.08s}
 html.motion-ready .about-career.motion-section-in .about-timeline article:nth-child(3){transition-delay:.16s}
 html.motion-ready .about-career.motion-section-in .about-timeline article:nth-child(4){transition-delay:.24s}
 html.motion-ready .about-career.motion-section-in .about-timeline article:nth-child(5){transition-delay:.32s}
 html.motion-ready .about-career.motion-section-in .about-timeline article:nth-child(6){transition-delay:.40s}
 html.motion-ready .about-icons figure{opacity:0;transform:translateY(16px) scale(.96)}
 html.motion-ready .about-skills.motion-section-in .about-icons figure{opacity:1;transform:none;transition:opacity .46s ease,transform .58s cubic-bezier(.2,.75,.2,1)}
 html.motion-ready .about-skills.motion-section-in .about-icons figure:nth-child(2){transition-delay:.06s}
 html.motion-ready .about-skills.motion-section-in .about-icons figure:nth-child(3){transition-delay:.12s}
 html.motion-ready .about-skills.motion-section-in .about-icons figure:nth-child(4){transition-delay:.18s}
 html.motion-ready .about-photo img{transform:scale(1.055);transition:transform 1.15s cubic-bezier(.2,.75,.2,1)}
 html.motion-ready .about-profile.motion-section-in .about-photo img{transform:scale(1)}
}


/* vANIM HERO IMPACT — first view only */
@media (prefers-reduced-motion:no-preference){
  html.motion-ready .hero > h1{
    display:flex!important;
    align-items:baseline;
    overflow:visible;
    opacity:1!important;
    transform:none!important;
  }
  html.motion-ready .hero > h1 .hero-port,
  html.motion-ready .hero > h1 .hero-folio{
    display:inline-block;
    opacity:0;
    filter:blur(7px);
    will-change:transform,opacity,filter,letter-spacing;
  }
  html.motion-ready .hero > h1 .hero-port{
    transform:translate3d(-22vw,0,0) scale(.88);
    letter-spacing:-.12em;
  }
  html.motion-ready .hero > h1 .hero-folio{
    transform:translate3d(22vw,0,0) scale(.88);
    letter-spacing:-.12em;
  }
  html.motion-ready.motion-loaded .hero > h1 .hero-port,
  html.motion-ready.motion-loaded .hero > h1 .hero-folio{
    opacity:1;
    filter:blur(0);
    transform:translate3d(0,0,0) scale(1);
    letter-spacing:inherit;
    transition:
      transform 1.05s cubic-bezier(.16,1.18,.28,1),
      opacity .42s ease,
      filter .58s ease,
      letter-spacing 1.05s cubic-bezier(.16,1.18,.28,1);
  }
  html.motion-ready.motion-loaded .hero > h1 .hero-folio{transition-delay:.07s}
  html.motion-ready.motion-loaded .hero > h1{
    animation:hero-impact-settle .52s cubic-bezier(.2,.8,.2,1) 1.02s both;
  }
  html.motion-ready .hero > small{
    transform:translateY(20px);
  }
  html.motion-ready.motion-loaded .hero > small{
    transition-delay:1.02s!important;
  }
  @keyframes hero-impact-settle{
    0%{transform:scale(1)}
    42%{transform:scale(1.025)}
    100%{transform:scale(1)}
  }
}


/* HERO IMPACT v2 — keep PORT / FOLIO. on two lines */
@media (prefers-reduced-motion:no-preference){
  html.motion-ready .hero > h1{
    display:block!important;
  }
  html.motion-ready .hero > h1 .hero-port,
  html.motion-ready .hero > h1 .hero-folio{
    display:block!important;
    width:max-content;
  }
  html.motion-ready .hero > h1 .hero-port{
    transform:translate3d(-22vw,0,0) scale(.88);
  }
  html.motion-ready .hero > h1 .hero-folio{
    transform:translate3d(22vw,0,0) scale(.88);
  }
  html.motion-ready.motion-loaded .hero > h1 .hero-port,
  html.motion-ready.motion-loaded .hero > h1 .hero-folio{
    transform:translate3d(0,0,0) scale(1);
  }
}


/* BANNER / MAP hover — match standard portfolio cards: darken only, no zoom */
.banner-gallery img,
.banner-wall img,
.banner-grid img,
.map-gallery img,
.map-wall img,
.map-grid img{
  transform:none!important;
}
.banner-gallery a:hover img,
.banner-wall a:hover img,
.banner-grid a:hover img,
.map-gallery a:hover img,
.map-wall a:hover img,
.map-grid a:hover img,
.banner-gallery .item:hover img,
.banner-wall .item:hover img,
.banner-grid .item:hover img,
.map-gallery .item:hover img,
.map-wall .item:hover img,
.map-grid .item:hover img{
  transform:none!important;
}


/* GRAPHIC modal image hover — unified across every gallery implementation */
.modal .zoom img,
.modal .pzoom img,
.modal .pkgzoom img,
.modal .logozoom img,
.modal .infozoom img,
.modal .wwzoom img,
.modal .bpzoom img,
.modal .cpzoom img,
.modal .newzoom img{
  transition:filter .22s ease!important;
}
.modal .zoom:hover img,
.modal .pzoom:hover img,
.modal .pkgzoom:hover img,
.modal .logozoom:hover img,
.modal .infozoom:hover img,
.modal .wwzoom:hover img,
.modal .bpzoom:hover img,
.modal .cpzoom:hover img,
.modal .newzoom:hover img{
  filter:brightness(.78)!important;
}


/* GRAPHIC modal zoom controls — remove native button line/border */
.modal button.zoom,
.modal button.pzoom,
.modal button.pkgzoom,
.modal button.logozoom,
.modal button.infozoom,
.modal button.wwzoom,
.modal button.bpzoom,
.modal button.cpzoom,
.modal button.newzoom{
  border:0!important;
  outline:0!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  box-shadow:none!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}


/* WEB DESIGN fake browser — match medical app (#webDesignModal) */
#beautyWebModal .webviewport,
#burgerWebModal .webviewport,
#dentalWebModal .webviewport,
#chefcookWebModal .webviewport,
#nayaWebModal .webviewport,
#megatrendWebModal .webviewport,
#hooterWebModal .webviewport{
  height:520px!important;
  max-height:52dvh!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
@media(max-width:700px){
  #beautyWebModal .webviewport,
  #burgerWebModal .webviewport,
  #dentalWebModal .webviewport,
  #chefcookWebModal .webviewport,
  #nayaWebModal .webviewport,
  #megatrendWebModal .webviewport,
  #hooterWebModal .webviewport{
    height:46dvh!important;
    max-height:46dvh!important;
  }
}


/* WEB / DESIGN — fake browser dimensions matched to medical app */
#beautyWebModal .webdesign-box,
#dentalWebModal .webdesign-box,
#chefcookWebModal .webdesign-box,
#nayaWebModal .webdesign-box{
  width:min(980px,96vw)!important;
}

/* Medical browser outer width = 836px */
#beautyWebModal .browser-shell,
#dentalWebModal .browser-shell,
#chefcookWebModal .browser-shell,
#nayaWebModal .browser-shell{
  box-sizing:border-box!important;
  width:836px!important;
  max-width:calc(96vw - 36px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Medical content viewport = 834px / same height behavior */
#beautyWebModal .webviewport,
#dentalWebModal .webviewport,
#chefcookWebModal .webviewport,
#nayaWebModal .webviewport{
  box-sizing:border-box!important;
  width:100%!important;
  height:min(64dvh,700px)!important;
  max-height:min(64dvh,700px)!important;
  aspect-ratio:auto!important;
  overflow-y:auto!important;
  overflow-x:auto!important;
}

/* Medical artwork display width = 800px, centered */
#beautyWebModal .original-web-page,
#dentalWebModal .original-web-page,
#chefcookWebModal .original-web-page,
#nayaWebModal .original-web-page{
  min-width:0!important;
  width:100%!important;
  align-items:center!important;
}
#beautyWebModal .original-web-page>img,
#dentalWebModal .original-web-page>img,
#chefcookWebModal .original-web-page>img,
#nayaWebModal .original-web-page>img,
#dentalWebModal .dental-original>img{
  display:block!important;
  width:800px!important;
  min-width:800px!important;
  max-width:800px!important;
  height:auto!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

@media (min-width:701px) and (min-height:900px){
  #beautyWebModal .webviewport,
  #dentalWebModal .webviewport,
  #chefcookWebModal .webviewport,
  #nayaWebModal .webviewport{
    height:min(68dvh,760px)!important;
    max-height:min(68dvh,760px)!important;
  }
}

@media(max-width:900px){
  #beautyWebModal .browser-shell,
  #dentalWebModal .browser-shell,
  #chefcookWebModal .browser-shell,
  #nayaWebModal .browser-shell{
    width:100%!important;
    max-width:100%!important;
  }
  #beautyWebModal .original-web-page>img,
  #dentalWebModal .original-web-page>img,
  #chefcookWebModal .original-web-page>img,
  #nayaWebModal .original-web-page>img,
  #dentalWebModal .dental-original>img{
    width:100%!important;
    min-width:0!important;
    max-width:800px!important;
  }
}

/* MOBILE ABOUT GAP FIX — remove only the viewport-height spacer before ABOUT content */
@media(max-width:700px){
  .about-hero{
    min-height:0!important;
  }
}

/* PORTFOLIO HERO TITLE — larger continuous scale from desktop to mobile */
.hero h1{
  font-size:clamp(100px,19vw,210px);
}

/* 2026-09-23 — 各種モーションロゴ thumbnail */
.video-panel .card[data-video="2g-IqC_1Zf4"] .pic{
  background-image:url("../images/thumbs/motion/motion-logo-various.webp")!important;
  background-size:cover!important;
  background-position:center!important;
}

/* 2026-09-23 — iPhone real-device responsive pass */
@media(max-width:700px){
  /* Header: keep navigation usable without letting it visually swallow the page. */
  body>header{
    height:48px!important;
    padding:0 16px!important;
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
    font-size:9px!important;
    letter-spacing:.11em!important;
    background:rgba(17,17,17,.78)!important;
    -webkit-backdrop-filter:blur(10px)!important;
    backdrop-filter:blur(10px)!important;
    mix-blend-mode:normal!important;
    color:#fff!important;
  }
  body>header .site-brand{flex:0 0 auto!important;white-space:nowrap!important}
  body>header nav{margin-left:auto!important;display:flex!important;align-items:center!important;gap:15px!important;white-space:nowrap!important}
  body>header nav a{color:#fff!important}

  /* Anchor destinations must clear the fixed mobile header. */
  #works,#about,#contact{scroll-margin-top:48px!important}

  /* WORKS category cards: retain one-column mobile behavior but remove the oversized blocks. */
  #mount>.mobile-major{margin-bottom:12px!important}
  #mount>.mobile-major>.banner,
  .banner[data-major]{
    height:clamp(150px,42vw,180px)!important;
    min-height:0!important;
    padding:18px!important;
    font-size:clamp(38px,12vw,58px)!important;
    line-height:.9!important;
  }
  .banner[data-major]:hover{padding-left:18px!important}

  /* Work grids: keep the approved two-column GRAPHIC layout, but improve mobile text fit. */
  .panel{padding:18px 12px!important}
  .graphic-panel .cards{gap:18px 12px!important}
  .graphic-panel .card strong{font-size:12px!important;line-height:1.35!important;margin-top:7px!important}
  .graphic-panel .card small{font-size:9px!important;line-height:1.3!important}

  /* ABOUT / SKILL: remove the desktop-scale vertical rhythm on phones. */
  .about-section{padding-left:18px!important;padding-right:18px!important}
  .about-hero{min-height:0!important;padding:88px 0 52px!important}
  .about-block{padding:64px 0!important;gap:38px!important}
  .about-block.about-skills{row-gap:36px!important}
  .about-skills .about-title h3{font-size:38px!important;line-height:.9!important}
  .about-field{padding-top:24px!important;padding-bottom:26px!important}
  .about-icons{gap:18px 8px!important}
  .about-icons figure img{width:54px!important}
  .about-icons figcaption{font-size:8px!important}

  /* CONTACT should follow SKILL without the large empty black buffer seen on iPhone. */
  .contact-v2{margin-top:40px!important}

  /* All modals: mobile is a reading layout, not a shrunken desktop panel. */
  .modal{padding:8px!important;align-items:flex-start!important}
  .modal.show{overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}
  .modal .box,
  .modal .webdesign-box,
  #webDesignModal .webdesign-box,
  #beautyWebModal .webdesign-box,
  #burgerWebModal .webdesign-box,
  #hooterWebModal .webdesign-box,
  #dentalWebModal .webdesign-box,
  #chefcookWebModal .webdesign-box,
  #megatrendWebModal .webdesign-box,
  #nayaWebModal .webdesign-box{
    width:calc(100vw - 16px)!important;
    max-width:none!important;
    max-height:none!important;
    min-height:0!important;
    margin:8px auto!important;
    padding:24px 18px 22px!important;
    overflow:visible!important;
  }
  .modal .box>.x{position:sticky!important;float:right!important;right:0!important;top:0!important;z-index:20!important;width:38px!important;height:38px!important;margin:-8px -6px 0 8px!important;font-size:38px!important;line-height:1!important}
  .modal .box>small{display:block!important;padding-top:6px!important;font-size:9px!important;letter-spacing:.08em!important}
  .modal .box>h3{
    clear:both!important;
    font-size:clamp(28px,9vw,38px)!important;
    line-height:1.08!important;
    letter-spacing:-.035em!important;
    margin:14px 0 20px!important;
    overflow-wrap:anywhere!important;
  }
  .modal .box>.copy{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    padding:18px 0!important;
  }
  .modal .box>.copy b{font-size:11px!important}
  .modal .box>.copy p{font-size:11px!important;line-height:1.75!important;margin:8px 0 0!important}

  /* WEB preview: compact information first, then a usable internal browser window. */
  .webtool{gap:8px!important;flex-wrap:wrap!important;padding:12px 0 8px!important}
  .webtool button{padding:7px 10px!important;font-size:9px!important}
  .browser-shell{width:100%!important;border-radius:7px!important}
  #beautyWebModal .webviewport,
  #dentalWebModal .webviewport,
  #chefcookWebModal .webviewport,
  #nayaWebModal .webviewport,
  #burgerWebModal .live-frame-wrap,
  #hooterWebModal .live-frame-wrap,
  #megatrendWebModal .live-frame-wrap,
  #webDesignModal .diagnostic-scroll{
    height:48dvh!important;
    max-height:48dvh!important;
    min-height:280px!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
}

@media(max-width:430px){
  body>header{padding:0 12px!important;font-size:8px!important;gap:9px!important}
  body>header nav{gap:10px!important}
  .about-field-row{grid-template-columns:1fr!important}
  .about-field+.about-field{border-left:0!important;border-top:1px solid #333!important;padding-left:0!important}
  .about-field{padding-left:0!important;padding-right:0!important}
  .about-icons{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .about-icons figure img{width:52px!important}
}

/* 2026-09-23 — iOS modal isolation: WEB modal scrolls, page behind it never does */
html.modal-page-locked,
body.modal-page-locked{
  overscroll-behavior:none!important;
}
body.modal-page-locked{
  position:fixed!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  overflow:hidden!important;
}
@media(max-width:700px){
  #webDesignModal,
  #beautyWebModal,
  #burgerWebModal,
  #hooterWebModal,
  #dentalWebModal,
  #chefcookWebModal,
  #megatrendWebModal,
  #nayaWebModal{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
  }
  #webDesignModal .shade,
  #beautyWebModal .shade,
  #burgerWebModal .shade,
  #hooterWebModal .shade,
  #dentalWebModal .shade,
  #chefcookWebModal .shade,
  #megatrendWebModal .shade,
  #nayaWebModal .shade{
    position:fixed!important;
    inset:0!important;
  }
}