/* ZERO Labo header component for LP media. Navigation, contact motion, sizing,
   and fonts follow the Labo production fragment; only the LP title fit differs. */
.zl-header,.zl-header *,.zl-header *::before,.zl-header *::after{box-sizing:border-box}
.zl-header{position:fixed;inset:0 0 auto;z-index:1000;height:108px;margin:0;padding:0;color:#fff;background:#000}
.zl-header a{color:inherit}
.zl-header a:focus-visible,.zl-header button:focus-visible{outline:3px solid #f9d56c;outline-offset:3px}
.zl-header-eyebrow{width:min(1000px,calc(100% - 36px));margin:0 auto 10px;padding:10px 0 0;color:#fff;font:400 11px/18px "mfw-pshingopr6n-regular","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;text-align:left}
.zl-header-inner{display:flex;align-items:center;justify-content:space-between;width:min(1000px,calc(100% - 36px));height:50px;margin:0 auto;gap:0}
.zl-brand{display:flex;align-items:center;flex:0 0 290px;min-height:50px;gap:10px;text-decoration:none;white-space:nowrap}
.zl-brand-mark{display:block;width:43px;height:50px;object-fit:contain;flex:none}
.zl-brand-text{display:block;color:#fff;font:400 17px/1.3 "mfw-pshingopr6n-regular","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;letter-spacing:-.055em;font-synthesis:none}
.zl-brand-text span{display:block}
.zl-nav{display:flex;align-items:center;justify-content:flex-end;min-width:0}
.zl-nav>a:not(.zl-contact){display:flex;flex-direction:column;align-items:center;justify-content:center;width:130px;min-height:48px;border-right:1px solid #fff;text-align:center;text-decoration:none;line-height:1.25}
.zl-nav>a:not(.zl-contact):hover{opacity:.65}
.zl-nav-en{font:300 21px/1.25 "Noto Sans JP",sans-serif;letter-spacing:.09em}
.zl-nav-ja{margin-top:4px;font:300 12px/1.25 "Noto Sans JP",sans-serif;letter-spacing:.02em}
.zl-nav>a.zl-contact{display:inline-flex;align-items:center;justify-content:center;position:relative;isolation:isolate;overflow:hidden;flex:0 0 200px;width:200px;height:50px;margin-left:25px;color:#000;background:#fff;font:400 18px/1.25 "mfw-pshingopr6n-regular","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.zl-contact-content{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:14px;width:100%;height:100%}
.zl-contact::after{content:"";position:absolute;inset:0;z-index:0;background:#000;transform:translateX(-100%);pointer-events:none}
.zl-contact:hover::after,.zl-contact:focus-visible::after,.zl-contact.zl-contact-touch::after{animation:zl-contact-sweep .8s cubic-bezier(.77,0,.175,1) forwards}
.zl-contact:hover .zl-contact-content,.zl-contact:focus-visible .zl-contact-content,.zl-contact.zl-contact-touch .zl-contact-content{animation:zl-contact-ink .8s cubic-bezier(.77,0,.175,1) forwards}
@keyframes zl-contact-sweep{0%{transform:translateX(-100%)}48%,52%{transform:translateX(0)}100%{transform:translateX(100%)}}
@keyframes zl-contact-ink{0%,100%{color:#000}48%,52%{color:#fff}}
.zl-contact svg{width:30px;height:23px;flex:none;fill:none;stroke:currentColor;stroke-width:2.5}
.zl-menu{display:none}
.zl-header-spacer{display:block;width:100%;height:108px;background:#000}
.zm-skip:focus{z-index:1001}
/* The gallery detail must cover the fixed Labo header when opened. */
.zm-detail{z-index:1100}

/* Use Labo's actual Morisawa face and type rhythm for the hero heading.
   The longer LP title needs a smaller first line at phone widths. */
.zm-hero h1{font-family:"mfw-pshingopr6n-bold","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-weight:700;font-synthesis:none;line-height:1.19;letter-spacing:-.065em;font-size:clamp(44px,5.5vw,68px)}
.zm-hero h1>.zm-wipe:last-child{font-size:clamp(53px,6.35vw,78px);line-height:1.19}

@media(max-width:1100px) and (min-width:901px){
  .zl-brand{flex-basis:270px}
  .zl-brand-text{font-size:16px}
  .zl-nav>a:not(.zl-contact){width:clamp(105px,11.8vw,130px)}
  .zl-nav-en{font-size:clamp(15px,2.1vw,21px)}
  .zl-nav-ja{font-size:clamp(10px,1.2vw,12px)}
  .zl-nav>a.zl-contact{flex-basis:clamp(160px,17.5vw,190px);width:clamp(160px,17.5vw,190px);height:50px;margin-left:10px;font-size:clamp(12px,1.8vw,18px)}
  .zl-contact-content{gap:1vw}
  .zl-contact svg{width:clamp(18px,3vw,30px)}
  .zm-hero h1{font-size:clamp(42px,5.4vw,60px)}
  .zm-hero h1>.zm-wipe:last-child{font-size:clamp(50px,6.4vw,72px)}
}
@media(max-width:900px){
  .zl-header{height:56px}
  .zl-header-eyebrow{display:none}
  .zl-header-inner{width:calc(100% - 20px);height:56px}
  .zl-brand{flex:0 0 auto;min-height:56px;gap:7px}
  .zl-brand-mark{width:28px;height:36px}
  .zl-brand-text{font-size:clamp(10px,2.9vw,13px)}
  .zl-menu{display:flex;align-items:center;justify-content:center;flex:none;width:42px;height:44px;padding:0;border:0;background:transparent;color:#fff;cursor:pointer}
  .zl-bars{display:flex;flex-direction:column;gap:5px}
  .zl-bars i{display:block;width:26px;height:2px;background:#fff}
  .zl-nav>a:not(.zl-contact){display:none}
  .zl-nav>a.zl-contact{position:absolute;top:14px;right:62px;flex-basis:auto;width:108px;height:28px;margin:0;padding:0 5px;font-size:12px;letter-spacing:0}
  .zl-contact-content{gap:5px}
  .zl-nav .zl-contact svg{width:19px;height:15px;stroke-width:2}
  .zl-header.zl-open .zl-nav{position:absolute;left:0;right:0;top:56px;z-index:30;display:flex;align-items:stretch;flex-direction:column;padding:11px 18px 22px;background:#050505;box-shadow:0 12px 25px #0009}
  .zl-header.zl-open .zl-nav>a:not(.zl-contact){position:static;display:flex;align-items:flex-start;justify-content:center;width:100%;min-height:48px;border:0;border-bottom:1px solid #ffffff55;color:#fff}
  .zl-header.zl-open .zl-nav>a:not(.zl-contact):first-child{border-top:1px solid #ffffff55}
  .zl-header.zl-open .zl-nav-en{display:none}
  .zl-header.zl-open .zl-nav-ja{margin:0;font-size:15px;font-weight:400}
  .zl-header.zl-open .zl-nav>a.zl-contact{position:static;justify-content:center;width:100%;height:42px;margin-top:10px;border:0;background:#fff;color:#111}
  .zl-header-spacer{height:56px}
}
@media(max-width:767px){
  .zm-hero h1{font-size:clamp(22px,5.9vw,34px);line-height:1.18;letter-spacing:-.075em}
  .zm-hero h1>.zm-wipe:last-child{font-size:clamp(42px,11.65vw,51px);line-height:1.2}
}
@media(max-width:340px){.zl-brand-mark{display:none}.zl-brand{gap:0}}
@media(prefers-reduced-motion:reduce){
  .zl-contact:hover::after,.zl-contact:focus-visible::after,.zl-contact.zl-contact-touch::after,
  .zl-contact:hover .zl-contact-content,.zl-contact:focus-visible .zl-contact-content,.zl-contact.zl-contact-touch .zl-contact-content{animation:none}
  .zl-contact:hover,.zl-contact:focus-visible{background:#ddd}
}

/* Display-only proposal: align the LP header lockup and hero rhythm with
   ZERO Labo's downloaded production CSS. The longer LP name needs its own
   mobile size so it clears the unchanged 108px contact button. */
.zl-header .zl-brand{flex-basis:370px;gap:9px}
.zl-header .zl-brand-mark{width:42px;height:40px}
.zl-header .zl-brand-text{font-size:24px;line-height:1;letter-spacing:-.065em}
@media(min-width:1101px){
  .zl-header .zl-nav>a:not(.zl-contact){width:123px}
}
@media(max-width:1100px) and (min-width:901px){
  .zl-header .zl-brand{flex-basis:350px}
  .zl-header .zl-brand-text{font-size:24px}
}
@media(max-width:900px){
  .zl-header .zl-brand{flex:0 0 auto;max-width:calc(100vw - 180px);min-width:0;gap:7px}
  .zl-header .zl-brand-mark{width:29px;height:28px}
  .zl-header .zl-brand-text{font-size:clamp(10px,calc(8.18vw - 18.33px),22px);line-height:1.2}
}
@media(max-width:350px){
  .zl-header .zl-brand-mark{display:none}
  .zl-header .zl-brand{gap:0}
}

.zm-hero{font-synthesis:none}
.zm-hero__content{width:min(1000px,calc(100% - 36px));min-height:500px;justify-content:flex-start;padding:26px 0 44px}
.zm-hero__logo{width:82px;max-height:86px;margin-bottom:18px;object-fit:contain}
.zm-hero__band{max-width:100%;margin-bottom:22px;color:#211b18;box-shadow:0 5px 12px #0005;font-size:clamp(17px,2vw,24px)}
.zm-hero h1{gap:2px;text-shadow:0 3px 12px #000b}
.zm-hero__sub{max-width:850px;margin-top:18px;font:400 16px/1.65 "mfw-pshingopr6n-regular","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;text-shadow:0 2px 6px #000}
@media(max-width:767px){
  .zm-hero__content{width:calc(100% - 24px);min-height:450px;padding:21px 0 34px}
  .zm-hero__logo{width:66px;max-height:68px;margin-bottom:16px}
  .zm-hero__band{margin-bottom:20px;padding:8px 12px 10px;font-size:clamp(13px,3.65vw,17px);line-height:1.4;white-space:nowrap}
  .zm-hero h1{gap:8px}
  .zm-hero__sub{max-width:345px;margin-top:16px;font-size:12px;line-height:1.6;text-wrap:balance}
}
@media(max-width:360px){
  .zm-hero__band{font-size:12px}
  .zm-hero__sub{font-size:11px}
}