:root{--blob:62vmin;--irid:.92;--grid:1;--a1:#7cc8ff;--a2:#b79dff;--a3:#ff9ecb;--a4:#9df7d8;--ink:#0d1117} *{box-sizing:border-box} html{scroll-behavior:smooth} /* the grey OS bar reads as browser chrome inside this palette. Hidden where CSS can do it safely (WebKit/Firefox); iOS overlay indicators stay native — no hacks. Scrolling itself is never touched: no overflow:hidden anywhere. */ html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0} html::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{background:transparent} html{scrollbar-width:none} body{-ms-overflow-style:none} body{margin:0;background:#f4f6fa;color:var(--ink);font-family:"Zen Kaku Gothic New",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:#2a3570;text-decoration:none} a:hover{color:#7059b3} header nav a:hover{background:rgba(255,255,255,.85)} [data-pcard] a:hover{background:rgba(255,255,255,.6)} [data-pcard] button:hover{background:#fff} @keyframes flowLeft{from{transform:translate3d(2%,0,0)}to{transform:translate3d(-52%,0,0)}} @keyframes flowRight{from{transform:translate3d(-52%,0,0)}to{transform:translate3d(2%,0,0)}} @keyframes creepL{0%{translate:0 0}100%{translate:-50% 0}} @keyframes creepR{0%{translate:-50% 0}100%{translate:0 0}} @keyframes fadeUp{from{opacity:0;transform:translate3d(0,64px,0)}to{opacity:1;transform:translate3d(0,0,0)}} @keyframes orbA{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(12%,-8%,0) scale(1.18)}100%{transform:translate3d(0,0,0) scale(1)}} @keyframes orbB{0%{transform:translate3d(0,0,0) scale(1.1)}50%{transform:translate3d(-14%,10%,0) scale(.9)}100%{transform:translate3d(0,0,0) scale(1.1)}} @keyframes spinR{to{rotate:360deg}} @keyframes orbitGlow{from{offset-distance:0%}to{offset-distance:100%}} @keyframes spinSlow{to{transform:rotate(360deg)}} @keyframes ozGrid{from{background-position:0 0}to{background-position:0 240px}} @keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}} @keyframes bobY{0%{translate:0 10px}50%{translate:0 -10px}100%{translate:0 10px}} @keyframes bobY2{0%{translate:0 -8px}50%{translate:0 12px}100%{translate:0 -8px}} @keyframes sheen{0%{translate:-120% 0}100%{translate:220% 0}} @keyframes paneFly{0%{opacity:0;transform:translateZ(-2400px)}18%{opacity:1}72%{opacity:1}100%{opacity:0;transform:translateZ(700px)}} @keyframes paneText{0%{opacity:0;transform:translate3d(0,18px,0);filter:blur(6px)}16%,84%{opacity:1;transform:none;filter:blur(0)}100%{opacity:0;transform:translate3d(0,-14px,0);filter:blur(5px)}} @keyframes coreGlow{0%{opacity:0;scale:.5}40%,70%{opacity:.9;scale:1}100%{opacity:0;scale:1.9}} @keyframes hueDrift{to{filter:hue-rotate(360deg)}} @keyframes ozOrbit{to{rotate:360deg}} @keyframes ozTick{0%,88%{opacity:.25}92%{opacity:1}100%{opacity:.25}} @keyframes ozEdge{0%{background-position:0% 50%}100%{background-position:300% 50%}} @keyframes gateGrid{to{background-position:0 6vmin}} @keyframes gateSpinR{to{rotate:-360deg}} @keyframes dustDrift{0%,100%{transform:translate3d(0,0,0);opacity:.28}50%{transform:translate3d(6px,-22px,0);opacity:.7}} @keyframes shaftBreathe{0%,100%{opacity:.55;transform:scaleY(1)}50%{opacity:.9;transform:scaleY(1.06)}} @keyframes gateBurst{from{opacity:.85;scale:1}to{opacity:0;scale:1.7}} @keyframes filmShift{0%,100%{transform:translate3d(-6%,-4%,0) scale(1.18)}50%{transform:translate3d(6%,5%,0) scale(1.3)}} @keyframes chromeTurn{to{rotate:360deg}} @keyframes lineIn{from{opacity:0;transform:translate3d(0,105%,0)}to{opacity:1;transform:translate3d(0,0,0)}} @keyframes maskIn{from{opacity:0;transform:translate3d(-30px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}} @keyframes ruleIn{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes ruleWide{0%{opacity:1;transform:scaleX(1)}70%{opacity:.5}100%{opacity:0;transform:scaleX(2.4)}} @keyframes upFar{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(0,-30svh,0)}} @keyframes upMid{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(0,-20svh,0)}} @keyframes upNear{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(0,-12svh,0)}} @keyframes voyLife{0%,96%{opacity:1}99%{opacity:.7}100%{opacity:0}} @keyframes voyage{ 0%{transform:translate3d(15vw,1svh,0) scale(.95) rotate(0deg)} 12%{transform:translate3d(2vw,-3svh,0) scale(1.02) rotate(40deg)} 18%{transform:translate3d(-24vw,20svh,0) scale(.86) rotate(72deg)} 23%{transform:translate3d(-38vw,-14svh,0) scale(.34) rotate(108deg)} 27%{transform:translate3d(-6vw,-26svh,0) scale(.2) rotate(146deg)} 31%{transform:translate3d(30vw,-8svh,0) scale(.46) rotate(182deg)} 35%{transform:translate3d(34vw,18svh,0) scale(1.02) rotate(214deg)} 39%{transform:translate3d(6vw,28svh,0) scale(1.28) rotate(238deg)} 43%{transform:translate3d(-18vw,4svh,0) scale(.9) rotate(262deg)} 48%{transform:translate3d(-30vw,-14svh,0) scale(1.06) rotate(284deg)} 55%{transform:translate3d(4vw,-9svh,0) scale(1.05) rotate(304deg)} 63%{transform:translate3d(-22vw,-20svh,0) scale(.92) rotate(322deg)} 69%{transform:translate3d(-42vw,-30svh,0) scale(.82) rotate(338deg)} 76%{transform:translate3d(-12vw,-3svh,0) scale(.42) rotate(356deg)} 82%{transform:translate3d(0vw,6svh,0) scale(.14) rotate(378deg)} 90%{transform:translate3d(0vw,6svh,0) scale(.14) rotate(404deg)} 93%{transform:translate3d(0vw,4.2svh,0) scale(.128) rotate(420deg)} 95.5%{transform:translate3d(0vw,1.6svh,0) scale(.105) rotate(440deg)} 97.5%{transform:translate3d(0vw,-1svh,0) scale(.072) rotate(466deg)} 99%{transform:translate3d(0vw,-2.4svh,0) scale(.034) rotate(500deg)} 100%{transform:translate3d(0vw,-3svh,0) scale(0) rotate(536deg)} } /* phones: one blob travels the whole site — same element, same timeline, never reset per section. Fewer, wider keys than the PC path: bigger sweeps, gentle scale, a slow turn, and it deliberately leaves the viewport on both sides (body keeps overflow-x hidden). */ @keyframes voyageM{ 0%{transform:translate3d(12vw,14svh,0) scale(1) rotate(0deg)} 10%{transform:translate3d(-16vw,-8svh,0) scale(1.12) rotate(16deg)} 20%{transform:translate3d(-52vw,18svh,0) scale(.92) rotate(38deg)} 30%{transform:translate3d(-8vw,-38svh,0) scale(.62) rotate(62deg)} 40%{transform:translate3d(48vw,-12svh,0) scale(1.06) rotate(92deg)} 50%{transform:translate3d(22vw,38svh,0) scale(1.38) rotate(122deg)} 60%{transform:translate3d(-40vw,12svh,0) scale(1.14) rotate(152deg)} 70%{transform:translate3d(-56vw,-28svh,0) scale(.96) rotate(182deg)} 78%{transform:translate3d(-12vw,-6svh,0) scale(.5) rotate(212deg)} 84%{transform:translate3d(0,6svh,0) scale(.14) rotate(240deg)} 90%{transform:translate3d(0,6svh,0) scale(.14) rotate(268deg)} 95%{transform:translate3d(0,2svh,0) scale(.1) rotate(300deg)} 98%{transform:translate3d(0,-1svh,0) scale(.06) rotate(332deg)} 100%{transform:translate3d(0,-3svh,0) scale(0) rotate(360deg)} } /* GLOBAL BLOB: position/scale/rotation come from one scroll-driven transform only. A second translate animation previously moved the blob by up to ±70vw/±46svh and PARTNERS overwrote that same translate property with !important, causing visible jumps. */ @keyframes panelIn{from{opacity:0;transform:translate3d(0,34px,0) scale(.92)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}} @keyframes glowPulse{0%,100%{opacity:.16;transform:scale(1)}50%{opacity:.3;transform:scale(1.16)}} @keyframes cue{0%{transform:translate3d(0,-6px,0);opacity:0}40%{opacity:1}100%{transform:translate3d(0,14px,0);opacity:0}} /* PC only: CONTACT is content-sized and tight enough that the title through the copyright reads as one composition at the page's last viewport (it used to force 100vh and push "By referral only." off the top edge). Horizontal padding untouched. */ @media (min-width: 721px){ #contact{min-height:auto!important;padding-top:clamp(20px,3.4vh,64px)!important;padding-bottom:clamp(14px,2vh,40px)!important} #contact > div:nth-of-type(2){gap:clamp(10px,1.4vh,24px)!important} #contact [data-gate]{margin:clamp(10px,1.6vh,32px) 0 clamp(6px,1vh,14px)!important} #contact [data-gate-hint]{margin-top:clamp(6px,1vh,20px)!important} #contact > div:nth-of-type(3){padding-top:clamp(14px,2.4vh,48px)!important;gap:clamp(6px,1.1vh,18px)!important} footer{padding-top:clamp(10px,1.5vh,28px)!important;padding-bottom:clamp(10px,1.5vh,28px)!important;gap:10px!important} } /* Phones use ONE vertical basis: the small viewport (svh). It never changes when the iOS toolbar slides, it matches what a plain iframe preview reports, and the script measures the same 100svh probe for its scroll maths. safe-area insets are deliberately NOT part of any layout coordinate. */ @media (max-width: 720px){ header nav{display:none!important} header{padding:96px 20px 14px!important;align-items:flex-start!important} header > a{gap:8px!important} #top{height:180svh!important} :root{--blob:40vmin!important} /* the drift animation runs continuously; its amplitude (--drift) is what fades in and out with MESSAGE, so there is no jump at the section handover */ [data-voyager]{animation-name:voyageM,voyLife!important;animation-timeline:scroll(root block),scroll(root block)!important;animation-duration:1s,1s!important;animation-timing-function:linear,linear!important;animation-iteration-count:1,1!important;animation-fill-mode:both,both!important;translate:0 0!important;transition:none!important} [data-voyager]{margin-top:calc(var(--blob) / -2)!important;margin-left:calc(var(--blob) / -2)!important} /* HERO iridescent film layer: mix-blend-mode makes it a composited layer, and iOS Safari does not apply the round clip of its border-radius/overflow:hidden parent to it, so its 235x235 box shows as a rectangle around the 143px sphere. Confirmed on device by toggling blend off. hue-rotate, the conic-gradient and the animations stay. */ [data-voyager] > div:nth-of-type(2) > div:nth-of-type(2){mix-blend-mode:normal!important} #top h1{font-size:clamp(30px,9.6vw,42px)!important;line-height:1.1!important} #top [data-pin] > div:nth-of-type(4){padding:10svh 20px 9svh!important;gap:12px!important} #top [data-pin] > div:nth-of-type(4) > div:first-of-type{margin-bottom:32px!important} [data-track="hero"] [data-pin] > div[aria-hidden]{display:none!important} /* TOP meta block: its own phone layout — fluid right offset inside the page's side padding, a width cap so it can never reach the viewport edge, and gentler tracking so the coordinate line stays on one uncut line */ /* its own layer at the very top of the safe area: the pin's shared padding is dropped here and the exit animation starts later, so the resting position is deterministic and always sits clear above the YAYOI DESIGN mark */ #top [data-pin] > div:nth-of-type(3){top:132px!important;right:max(20px,5vw)!important;left:auto!important;max-width:calc(100% - 32px)!important;padding:0!important;align-items:flex-end!important;text-align:right!important;gap:6px!important;animation-range:normal,cover 46% cover 72%!important} #top [data-pin] > div:nth-of-type(3) span{font-size:11.5px!important;letter-spacing:.18em!important;white-space:nowrap!important} [data-track="bridge"]{height:190svh!important} [data-track="bridge"] [data-pin]{padding:0 20px!important;gap:14px!important} [data-track="bridge"] p{padding:0!important} #message{height:190svh!important;--scene:60svh;--scene-top:calc((100svh - 60svh) / 2)} /* every pinned frame follows the cached viewport reference, so the address bar sliding in and out cannot re-lay-out the section mid-scroll */ [data-pin]{height:100svh!important} /* MESSAGE SCENE = the top ~62% of the frame. Inside it the vertical hierarchy is kept intact — chapter meta at the top, English + Japanese copy above centre, chapter graphic behind the lower half, chapter navigation at the scene's bottom edge — so the scene reads as one finished composition. Below it the chapter world simply ends and the site's own background (grid, glow, iridescent blob) shows through: no card, no border, no second background colour. */ [data-msgrow]{inset:calc(var(--scene-top) + min(140px,10svh)) 0 calc(100svh - var(--scene-top) - var(--scene) + 58px)!important;height:auto!important;max-height:none!important;overflow:visible!important;padding:0 22px 0 34px!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;text-align:left!important;gap:0!important;z-index:2!important} /* Chapter meta is scene header information, not part of the copy group: it is lifted out of the flow to the top edge of the scene, and the main copy centres on its own */ [data-msgkey]{flex:0 0 auto!important;flex-direction:row!important;align-items:baseline!important;align-self:flex-start!important;text-align:left!important;gap:10px!important;width:auto!important} [data-msgkey] > span[aria-hidden]{display:none!important} /* the side labels must stay on one line at 375px; only they shrink, never the title */ [data-msgkey]{justify-content:space-between!important;gap:8px!important;width:100%!important} [data-msgkey] > div:first-of-type,[data-msgkey] > div:last-of-type{flex:0 0 auto!important;white-space:nowrap!important} [data-msgkey] > div:first-of-type *,[data-msgkey] > div:last-of-type *{white-space:nowrap!important;font-size:9.5px!important;letter-spacing:.14em!important} /* the giant chapter word drops to its own row so it can crop on purpose without ever colliding with the meta line, which stays fully legible on top */ [data-msgkey]{flex-wrap:wrap!important} /* only three text layers on phones: chapter meta, main message, japanese copy. The old giant decorative word (CHANGE / SIMPLE / GROW / HUMAN) is switched off here so nothing overlaps the copy. */ [data-msgkey] > div:nth-of-type(2){display:none!important} #message [data-keyghost]{display:none!important} /* declared after every other [data-msgkey] rule so the header coordinates win: one line, inside the side padding, 32px clear above the copy block */ [data-msgkey]{position:absolute!important;left:34px!important;right:22px!important;top:-76px!important;bottom:auto!important;width:auto!important;flex-wrap:nowrap!important;align-items:baseline!important} /* phone header: "03 / GROWTH & TURNING" on the left, "03 / 04" on the right, decorative rule dropped — whitespace and legibility over ornament */ [data-msgkey] [data-chnumsp],[data-msgkey] [data-chslash]{display:inline!important} [data-msgkey] [data-chword]{display:none!important} [data-msgkey] [data-keyline]{display:none!important} [data-msgkey] > div:first-of-type{gap:6px!important} [data-msgkey] > div:last-of-type{gap:0!important} [data-msgstage]{flex:0 0 auto!important;width:100%!important;max-width:none!important;min-height:0!important;align-items:flex-start!important} [data-msgstage] > div{width:100%!important;min-height:0!important;justify-content:flex-start!important;gap:10px!important} [data-msgstage] > div > div{min-height:0!important;flex:0 1 auto!important} [data-msgstage] > div > *{min-height:0!important} /* chapter 04's signature sits at the bottom of the scene, centred */ [data-msgstage]{flex:1 1 auto!important;align-self:stretch!important} #message [data-msgstage] > div{height:auto!important;min-height:0!important;display:flex!important;flex-direction:column!important} #message [data-msgstage] > div > p:last-of-type{margin:10px auto 0!important;align-self:center!important;text-align:center!important;font-size:12px!important;letter-spacing:.18em!important;line-height:1.6!important} #message [data-rail]{display:none!important} /* the world stays full-bleed; only a feathered scrim sits behind the copy, so MESSAGE reads as a typographic layer floating on the same moving background — never a card */ /* the chapter graphic belongs to the scene, not to the viewport: it is clipped to the scene height and feathered out at its lower edge, so no ring keeps growing into the bottom 40% of the screen */ [data-msgpanel]{inset:var(--scene-top) 0 auto!important;height:var(--scene)!important;border:none!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;overflow:hidden!important;-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 7%,#000 18%,#000 78%,rgba(0,0,0,.5) 92%,transparent 100%)!important;mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 7%,#000 18%,#000 78%,rgba(0,0,0,.5) 92%,transparent 100%)!important} [data-msgpanel] > div:nth-of-type(8){display:none!important} [data-msgpanel] > div:nth-of-type(9){opacity:.2!important} [data-msgscrim]{display:block!important;position:absolute!important;left:0;right:0;top:var(--scene-top);height:var(--scene);pointer-events:none;z-index:1;background:linear-gradient(180deg,transparent,rgba(255,255,255,.6) 12%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.18) 84%,transparent)} #message h3{font-size:clamp(17px,5.2vw,23px)!important;line-height:1.3!important;min-height:0!important} #message h2{font-size:clamp(19px,5.4vw,24px)!important;line-height:1.32!important} #message p:not([data-enline]){font-size:13px!important;line-height:1.78!important;letter-spacing:.03em!important;max-width:none!important;min-height:0!important;color:#2a3570!important} /* grid sits last in the density order — present, never competing with the copy */ #message [data-floor],#message [data-ceil]{opacity:.6!important} #message [data-msgstage] p:not([data-enline]){text-wrap:normal!important;word-break:keep-all!important;overflow-wrap:normal!important;line-break:strict!important} /* the English headline is a

on non-title chapters — it must not inherit body size */ #message [data-enline]{font-size:clamp(19px,5.3vw,25px)!important;line-height:1.32!important;letter-spacing:.015em!important;min-height:0!important} #message [data-msgstage] > div > span{margin:min(24px,2.4svh) 0 min(22px,2.2svh)!important} /* chapter navigation sits at the bottom edge of the MESSAGE SCENE — part of the chapter UI, never lifted towards the middle of the screen */ #message [data-pin] > div:last-of-type{left:16px!important;right:16px!important;top:auto!important;bottom:calc(var(--scene-top) + 10px)!important;z-index:2!important;align-items:center!important;gap:10px!important} [data-track="flow"]{height:140svh!important} [data-flow] span{font-size:34px!important;padding-right:18px!important;letter-spacing:.01em!important} /* a phone flick covers less ground than a mouse wheel, so every pinned track is shorter here than on desktop */ #partner{height:150svh!important} #partner [data-pin]{padding-top:8svh!important} #partner [data-pin] > div{margin-top:0!important} #partner [data-stage]{transform:none!important} #partner [data-pin] > div:first-of-type{left:20px!important;top:104px!important} #partner [data-pin] > div:first-of-type h2{display:none!important} #partner [data-orb]{width:clamp(72px,24vw,100px)!important} #partner [data-orb] span{font-size:11.5px!important} [data-pcard]{left:50%!important;right:auto!important;translate:-50% 0!important;width:85%!important;top:calc(52svh - 14px)!important;bottom:14px!important;max-height:none!important;overflow:hidden!important;padding:16px 16px 18px!important;gap:6px!important;border-radius:20px!important} [data-pcard] > div:nth-of-type(2){aspect-ratio:16/8!important;border-radius:12px!important;flex:0 1 auto!important;min-height:0!important} /* bottom UI on one line: ‹ dots › on the left, a compact WEB SITE pill on the right */ [data-cardbottom]{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin-top:auto!important} [data-cardnav]{order:1!important;flex:1 1 auto!important;justify-content:flex-start!important;gap:12px!important;padding-top:0!important} [data-cardhref]{order:2!important;flex:0 0 auto!important;justify-content:center!important;gap:6px!important;padding:9px 14px!important;min-height:40px!important;border-radius:999px!important;font-size:11px!important;letter-spacing:.12em!important;white-space:nowrap!important} [data-cardhref] span[data-ctapc]{display:none!important} [data-cardhref] span[data-ctasp]{display:inline!important} [data-cardhref] > span:last-of-type{font-size:13px!important} [data-pcard] span[role="img"]{width:38%!important} [data-pcard] p{font-size:12px!important;line-height:1.7!important} [data-pcard] a{font-size:12px!important;padding:11px 14px!important} [data-pcard] > div:last-of-type{margin-top:auto!important} #contact{min-height:auto!important;padding:10svh 20px 7svh!important} #contact h2{font-size:clamp(24px,7.4vw,34px)!important} #contact [data-gate]{width:min(62vw,240px)!important} #contact > div:first-of-type{gap:12px!important} footer{padding:6svh 20px 5svh!important;font-size:12px!important} /* iOS Safari rasterises a backdrop-filter layer to the element's bounding box when the element is inside a scaled/animated ancestor, so the ring's blur shows up as a square behind the blob. The radial-gradient alone clips to the border-radius correctly. */ #partner [data-orbring]{backdrop-filter:none!important;-webkit-backdrop-filter:none!important} /* type balance at 375-430px */ #top h1{font-size:clamp(32px,10.4vw,44px)!important} #top [data-pin] > div > p{font-size:14px!important;letter-spacing:.16em!important} #top [data-pin] > div > div > p{font-size:11.5px!important;letter-spacing:.34em!important} #message [data-msgstage] > div > div{align-self:auto!important} #message p:not([data-enline]){font-size:13px!important;line-height:1.78!important} /* each chapter's opening Japanese line carries the thought — slightly stronger than the sentences that follow it, never louder than the English headline */ #message [data-msgstage] > div > div > p:not([data-enline]):first-of-type{color:#1f2a63!important;letter-spacing:.06em!important} #message [data-msgstage] > div > div > p:not([data-enline]):first-of-type span{font-size:14.5px!important} html[data-msgvis] header [data-brand]{opacity:0!important;visibility:hidden!important;pointer-events:none!important} #partner [data-orb] span[data-orbtext]{display:none!important} /* the selected orb is lifted to z 30 by the script; on mobile the card sits over the ring, so keep every orb (and its glow) below the card's z 20 */ #partner [data-orb]{z-index:10!important} [data-pcard] p{font-size:13px!important;line-height:1.85!important} #contact h2{font-size:clamp(26px,7.8vw,36px)!important} #contact p:not([data-gate-hint]){font-size:13.5px!important;line-height:2!important;letter-spacing:.05em!important} /* the key is the lead element; the screen may scroll to the footer rather than squeezing everything into one viewport */ #contact{padding:7svh 20px 5svh!important} #contact > div:nth-of-type(2){gap:14px!important} #contact h2{margin-top:10px!important} #contact [data-gate]{width:min(64vw,244px)!important;margin:16px 0 10px!important} #contact [data-gate-hint]{margin-top:0!important;font-size:11.5px!important;letter-spacing:.36em!important} #contact a[href^="mailto"]{font-size:15px!important;letter-spacing:.08em!important} #contact > div:nth-of-type(3){padding-top:56px!important;gap:8px!important} footer{padding:34px 20px 26px!important;gap:12px!important} [data-addr]{white-space:pre-line!important} /* ---- 390px collision fixes ---- */ /* HERO: one deterministic vertical order — meta, logotype, headline, japanese copy, SCROLL, NAGOYA. The copy block reserves the space the two bottom markers occupy, so SCROLL can never land on top of 最も素敵な会社の隣に。 */ #top [data-pin] > div:nth-of-type(4){align-content:center!important;padding:32svh 20px 168px!important} #top [data-pin] > div:nth-of-type(5){left:20px!important;bottom:30px!important} #top [data-pin] > div:nth-of-type(6){bottom:92px!important} /* the desktop gradient runs through white at 52%, which disappears on a white phone screen — the phone headline keeps the iridescent hues but never goes lighter than the background */ #top h1 span span{background-image:linear-gradient(104deg,#1f2a63 0%,#3b3f8f 24%,#6b53a8 46%,#8f5f96 60%,#3b3f8f 82%,#1f2a63 100%)!important} /* MESSAGE navigation: two rows inside 390px instead of one overflowing line */ #message [data-pin] > div:last-of-type{flex-wrap:wrap!important;justify-content:flex-start!important;row-gap:10px!important} #message [data-pin] > div:last-of-type > div:first-of-type{flex:0 0 auto!important} #message [data-pin] > div:last-of-type > div:nth-of-type(2){flex:1 1 auto!important;min-width:0!important} #message [data-pin] > div:last-of-type > div:last-of-type{order:3!important;flex:0 0 auto!important;max-width:100%!important;margin-left:0!important} /* PARTNERS: the section heading clears the fixed YAYOI DESIGN mark */ #partner [data-pin] > div:first-of-type{top:172px!important} /* both SCROLL cues sit on the centre line */ #top [data-pin] > div:nth-of-type(6){left:50%!important;right:auto!important;transform:translateX(-50%)!important} #partner [data-scrollcue]{right:auto!important;left:50%!important;translate:-50% 0!important} /* CONTACT: the headline clears the fixed header mark */ #contact{padding-top:25svh!important} /* footer keeps the copyright line only */ } /* Keep the same bounded scenes in reduced motion. The previous static/auto override collapsed their absolutely positioned contents. Chapter changes are rendered synchronously by app.js, without auto-advance or reveal animation. */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto!important} *,*::before,*::after{animation:none!important;transition:none!important} [data-voyager]{display:none!important} #contact [data-contact-content]{opacity:1!important;transform:none!important} [data-fade]{opacity:1!important;transform:none!important} } [data-gate]:focus-visible{outline:2px solid #7059b3!important;outline-offset:8px} /* site-wide scroll indicator — separate from the MESSAGE chapter nav */ [data-scrollrail]{position:fixed;right:10px;top:16vh;bottom:16vh;width:1px;z-index:45;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(124,200,255,.22) 12%,rgba(183,157,255,.26) 40%,rgba(255,158,203,.24) 68%,rgba(157,247,216,.2) 88%,transparent);opacity:.5;transition:opacity .9s ease} [data-scrollrail][data-active]{opacity:1} [data-railcap]{position:absolute;left:50%;width:7px;height:1px;margin-left:-3.5px;background:rgba(59,63,143,.4);opacity:.65;transition:opacity .6s ease,background .6s ease} [data-railcap="start"]{top:0} [data-railcap="end"]{bottom:0} [data-scrollrail][data-active] [data-railcap]{opacity:1} [data-scrollrail][data-at="start"] [data-railcap="start"],[data-scrollrail][data-at="end"] [data-railcap="end"]{width:11px;margin-left:-5.5px;background:linear-gradient(90deg,rgba(124,200,255,.9),rgba(183,157,255,.9),rgba(255,158,203,.85))} [data-scrolldot]{position:absolute;left:50%;top:0;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:radial-gradient(circle at 36% 32%,rgba(255,255,255,.95),rgba(183,157,255,.85) 58%,transparent 78%);box-shadow:0 0 10px rgba(140,120,220,.5);opacity:.6;transition:opacity .9s ease} [data-scrollrail][data-active] [data-scrolldot]{opacity:1} @media (prefers-reduced-motion: reduce){[data-scrollrail]{display:none}} /* company blurbs keep their authored line breaks */ [data-carddesc]{white-space:pre-line!important;text-wrap:pretty;max-width:32em} /* Let the longer YAYOI introduction wrap fully without changing the card or preview dimensions. On small screens the existing card scrolls to its CTA. */ @media (max-width:720px){ #partner > div[data-pin][data-open="1"] > div[data-stage] > div[data-pcard]:has([data-cardhref][href="#top"]){overflow:auto!important} #partner > div[data-pin][data-open="1"] > div[data-stage] > div[data-pcard]:has([data-cardhref][href="#top"]) > div:nth-of-type(3){flex:0 0 auto!important;min-height:0!important;max-height:none!important;overflow:visible!important} #partner > div[data-pin][data-open="1"] > div[data-stage] > div[data-pcard]:has([data-cardhref][href="#top"]) [data-carddesc]{max-height:none!important;overflow:visible!important} } /* === Production mobile canonical layout v2 === */ /* === Production mobile canonical layout v2 === Final override: mobile typography uses normal flow; only decorative layers are absolute. This block intentionally wins over older experimental phone patches above. */ @media (max-width:720px){ /* TOP ------------------------------------------------------- */ #top{height:180svh!important} #top [data-pin]{height:100svh!important;overflow:hidden!important} #top [data-pin] > div:nth-of-type(3){ top:106px!important;right:22px!important;left:auto!important; padding:0!important;max-width:calc(100% - 44px)!important; } #top [data-pin] > div:nth-of-type(4){ position:relative!important;width:100%!important;height:100%!important; display:flex!important;flex-direction:column!important;justify-content:flex-start!important; align-items:flex-start!important;align-content:normal!important; gap:16px!important;padding:29svh 24px 150px!important;box-sizing:border-box!important; } #top [data-pin] > div:nth-of-type(4) > div:first-of-type{margin:0 0 4px!important} #top h1{font-size:clamp(34px,10.6vw,44px)!important;line-height:1.08!important} #top [data-topjp]{display:block!important;margin:0!important;font-size:13.5px!important;line-height:1.75!important;letter-spacing:.10em!important;color:#27336c!important} #top [data-pin] > div:nth-of-type(5){left:24px!important;bottom:30px!important} #top [data-pin] > div:nth-of-type(6){left:50%!important;right:auto!important;bottom:86px!important;transform:translateX(-50%)!important} /* MESSAGE --------------------------------------------------- */ #message{height:190svh!important;--scene-top:0px;--scene:100svh} #message [data-pin]{height:100svh!important;overflow:hidden!important} #message [data-msgpanel]{inset:0!important;height:100%!important;overflow:hidden!important} #message [data-msgscrim]{top:0!important;height:100%!important} #message [data-msgrow]{ position:absolute!important;left:0!important;right:0!important;top:0!important;bottom:0!important; inset:0!important;height:100%!important;max-height:none!important;overflow:visible!important; padding:92px 28px 154px 34px!important;box-sizing:border-box!important; display:flex!important;flex-direction:column!important;justify-content:flex-start!important; align-items:stretch!important;gap:0!important; } #message [data-msgkey]{ position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important; width:100%!important;display:flex!important;flex-direction:row!important;justify-content:space-between!important; align-items:baseline!important;flex-wrap:nowrap!important;margin:0 0 clamp(54px,8svh,72px)!important; } #message [data-msgstage]{ flex:0 1 auto!important;width:100%!important;align-self:stretch!important;min-height:0!important; display:flex!important;align-items:flex-start!important; } #message [data-msgstage] > div{display:flex!important;flex-direction:column!important;width:100%!important;gap:0!important;min-height:0!important} #message [data-msgstage] > div > div:first-child{gap:8px!important} #message [data-msgstage] [data-enline]{font-size:clamp(20px,5.6vw,25px)!important;line-height:1.28!important;margin:0!important} #message [data-msgstage] > div > span{margin:20px 0 18px!important;width:min(420px,72%)!important} #message [data-msgstage] p:not([data-enline]){font-size:13.5px!important;line-height:1.72!important;margin:0!important} #message [data-msgstage] > div > div:nth-of-type(2){gap:12px!important} /* chapter 04 signature was falling through the navigation on short iPhone viewports */ #message [data-msgstage] > div > p:last-of-type{display:none!important} #message [data-pin] > div:last-of-type{ position:absolute!important;left:20px!important;right:20px!important;bottom:24px!important;top:auto!important; display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;grid-template-rows:auto auto!important; align-items:end!important;column-gap:16px!important;row-gap:10px!important;z-index:5!important; flex-wrap:nowrap!important; } #message [data-pin] > div:last-of-type > div:first-of-type{grid-column:1!important;grid-row:1!important} #message [data-pin] > div:last-of-type > div:nth-of-type(2){grid-column:2!important;grid-row:1!important;min-width:0!important;width:100%!important} #message [data-pin] > div:last-of-type > div:last-of-type{grid-column:1 / -1!important;grid-row:2!important;order:initial!important;max-width:100%!important;margin:0!important;justify-self:start!important} #message [data-pin] > div:last-of-type button{min-width:0!important} /* PARTNERS -------------------------------------------------- */ #partner{height:150svh!important} #partner [data-pin]{height:100svh!important;padding:0!important;overflow:hidden!important} #partner [data-pin] > div:first-of-type{left:24px!important;top:104px!important;margin:0!important;z-index:20!important} #partner [data-stage]{position:absolute!important;inset:0!important;transform:none!important} #partner [data-scrollcue]{left:50%!important;right:auto!important;bottom:32px!important;translate:-50% 0!important} #partner [data-orb]{width:clamp(76px,23vw,96px)!important} /* CONTACT: don't force the whole section down by a quarter viewport. */ #contact{padding-top:10svh!important} } /* === Production mobile canonical layout v3 === 2026-09-06 device pass: TOP hierarchy, MESSAGE collision guard, PARTNERS title/core alignment, FLOW blob, CONTACT single-screen composition. */ @media (max-width:720px){ /* Fixed brand: keep it genuinely in the upper band. The previous 96px top padding placed YAYOI DESIGN on the same baseline as section/meta copy on real iPhone Chrome. */ header{padding:42px 24px 12px!important;align-items:flex-start!important} header [data-brand]{position:relative!important;z-index:60!important} /* TOP: three separate vertical bands — brand, right meta, then hero copy. */ #top [data-pin] > div:nth-of-type(3){ top:112px!important;right:24px!important;left:auto!important; max-width:calc(100% - 48px)!important; } #top [data-pin] > div:nth-of-type(4){ padding:35svh 28px 154px!important; gap:15px!important; } #top [data-pin] > div:nth-of-type(4) > div:first-of-type{margin:0 0 6px!important} #top h1{font-size:clamp(34px,10.5vw,43px)!important;line-height:1.08!important} #top [data-pin] > div:nth-of-type(6){bottom:82px!important} /* MESSAGE: reserve a hard navigation lane at the bottom. 04's generated signature is not a direct child of data-msgstage, so the older selector never hid it. */ #message [data-msgrow]{padding:74px 28px 196px 34px!important} #message [data-msgkey]{margin-bottom:42px!important} #message [data-msgstage] [data-enline]{font-size:clamp(19px,5.3vw,23px)!important;line-height:1.25!important} #message [data-msgstage] > div > span{margin:14px 0 14px!important;width:68%!important} #message [data-msgstage] p:not([data-enline]){font-size:12.5px!important;line-height:1.58!important} #message [data-msgstage] > div > div:nth-of-type(2){gap:8px!important} #message [data-msgbody] > div > p:last-of-type{display:none!important} #message [data-pin] > div:last-of-type{ bottom:26px!important;left:20px!important;right:20px!important; padding-top:8px!important; } /* FLOW: the root voyager can be far outside the viewport at this root-scroll point. Fade that instance and use one bounded local iridescent sphere behind the ticker. */ html[data-flowvis] [data-voyager]{filter:opacity(0)!important} [data-voyager]{transition:filter .45s ease!important} #flow [data-pin]{height:100svh!important;overflow:hidden!important;position:sticky!important} #flow [data-flowblob]{ position:absolute;left:50%;top:52%;translate:-50% -50%;z-index:0; width:34vmin;aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:.72; background: radial-gradient(circle at 28% 70%,rgba(255,255,255,.95) 0 7%,transparent 24%), radial-gradient(circle at 72% 30%,rgba(183,157,255,.72),transparent 48%), radial-gradient(circle at 68% 75%,rgba(124,200,255,.72),transparent 54%), radial-gradient(circle at 28% 28%,rgba(255,158,203,.56),transparent 48%), rgba(238,244,255,.74); box-shadow:0 18px 70px rgba(102,116,205,.13),inset 0 1px 0 rgba(255,255,255,.9); filter:saturate(1.04);animation:flowBlobFloat 16s ease-in-out infinite; } #flow [data-flow]{position:relative;z-index:1} /* PARTNERS: fixed brand is now high; section title gets its own row below it. */ #partner [data-pin] > div:first-of-type{top:126px!important;left:24px!important} #partner [data-stage]{position:absolute!important;inset:0!important} #partner [data-partnercore]{ position:absolute;translate:-50% -50%;z-index:4;width:54px;aspect-ratio:1;border-radius:50%;pointer-events:none; background: radial-gradient(circle at 28% 72%,rgba(255,255,255,.95) 0 8%,transparent 26%), radial-gradient(circle at 72% 26%,rgba(183,157,255,.8),transparent 50%), radial-gradient(circle at 70% 78%,rgba(124,200,255,.78),transparent 54%), radial-gradient(circle at 24% 28%,rgba(255,158,203,.6),transparent 50%), rgba(240,245,255,.72); border:1px solid rgba(255,255,255,.7);box-shadow:0 10px 34px rgba(88,106,196,.13); animation:partnerCoreFloat 8s ease-in-out infinite; } #partner [data-deco]{z-index:2!important} #partner [data-orb]{z-index:10!important} /* CONTACT: all contact content, including address, fits in one 100svh composition. The gate was 244px plus large margins, which pushed mail/address below the viewport. */ #contact{ height:100svh!important;min-height:100svh!important;max-height:100svh!important; padding:18px 20px 14px!important;justify-content:space-between!important;overflow:hidden!important; } #contact > div:nth-of-type(2){ flex:1 1 auto!important;min-height:0!important;justify-content:center!important; gap:9px!important;width:100%!important; } #contact > div:nth-of-type(2) > div:first-child{padding:7px 16px!important} #contact h2{font-size:clamp(27px,7.6vw,34px)!important;line-height:1.08!important;margin:4px 0 2px!important} #contact p:not([data-gate-hint]){font-size:12.5px!important;line-height:1.72!important;letter-spacing:.035em!important;margin:0!important;max-width:31em!important} #contact [data-gate]{width:min(43vw,30svh,170px)!important;margin:7px 0 5px!important;flex:0 0 auto!important} #contact [data-gate-hint]{margin:2px 0 0!important;font-size:10.5px!important;letter-spacing:.31em!important} #contact a[href^="mailto"]{font-size:15px!important;letter-spacing:.055em!important;margin-top:1px!important} #contact > div:nth-of-type(3){ flex:0 0 auto!important;margin-top:0!important;padding-top:8px!important; gap:5px!important;font-size:10.5px!important;line-height:1.45!important;letter-spacing:.09em!important; } footer{padding:8px 20px 10px!important;min-height:0!important} footer span{font-size:9.5px!important} } @keyframes flowBlobFloat{ 0%,100%{transform:translate3d(-8vw,3svh,0) scale(.94) rotate(0deg)} 50%{transform:translate3d(8vw,-3svh,0) scale(1.06) rotate(18deg)} } @keyframes partnerCoreFloat{ 0%,100%{transform:translate3d(0,0,0) scale(.96)} 50%{transform:translate3d(0,-5px,0) scale(1.04)} } /* === Production mobile canonical layout v4 === 2026-09-06: TOP vertical separation, MESSAGE wrap/scale/nav, one-blob rule through FLOW/PARTNERS. */ @media (max-width:720px){ /* TOP ------------------------------------------------------- Brand and right meta live in the upper band; hero content starts lower. */ :root{--mobile-header-top:max(26px,calc(env(safe-area-inset-top,0px) + 12px))} header{padding:var(--mobile-header-top) 24px 10px!important} #top [data-pin] > div:nth-of-type(3){ top:calc(var(--mobile-header-top) + 52px)!important;right:24px!important;left:auto!important; max-width:calc(100% - 48px)!important; } #top [data-pin] > div:nth-of-type(4){ padding:40svh 28px 138px!important; gap:13px!important; } #top h1{font-size:clamp(33px,9.9vw,41px)!important;line-height:1.08!important} #top [data-topjp]{margin-top:10px!important} #top [data-pin] > div:nth-of-type(6){bottom:72px!important} /* MESSAGE --------------------------------------------------- Japanese must wrap inside the viewport. The earlier keep-all rule made the long first chapter line overflow on iPhone. English is intentionally quieter. */ #message [data-msgrow]{padding:74px 28px 212px 34px!important} #message [data-msgstage] [data-enline]{ font-size:clamp(17px,4.75vw,20.5px)!important; line-height:1.28!important; } #message [data-msgstage] > div > span{margin:13px 0 13px!important;width:64%!important} #message [data-msgstage] > div > div:nth-of-type(2){ width:100%!important;max-width:100%!important; align-items:flex-start!important;align-self:stretch!important; text-align:left!important;gap:8px!important; } #message [data-msgstage] p:not([data-enline]){ width:100%!important;max-width:100%!important; font-size:12.5px!important;line-height:1.62!important; word-break:normal!important;overflow-wrap:anywhere!important; line-break:strict!important;text-align:left!important; } #message [data-msgstage] p:not([data-enline]) span{ display:block!important;width:100%!important;max-width:100%!important; white-space:normal!important; } /* Raise the CHAPTER navigation lane without letting it collide with body copy. */ #message [data-pin] > div:last-of-type{ bottom:54px!important;left:20px!important;right:20px!important; } /* FLOW / PARTNERS ------------------------------------------ There must be exactly one visible iridescent blob per scene. The root voyager is hidden while bounded local scene blobs are active. */ html[data-flowvis] [data-voyager], html[data-partnervis] [data-voyager]{ opacity:0!important;visibility:hidden!important;filter:none!important; } #flow [data-flowblob]{opacity:.76!important} #partner [data-partnercore]{display:block!important;opacity:.9!important} } /* === MESSAGE chapter horizon v125 === A quiet editorial cue, anchored to the same clock as the scene. The next title sits just beyond the active line; no looping cue or extra explanatory copy. */ #message[data-msg-discovery] [data-pin] > [data-msgjourney]{ --chapter-ink:#62519c;--chapter-light:#b79dff; position:absolute!important;inset:auto clamp(34px,7vw,112px) clamp(22px,3.6vh,44px)!important; display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:44px 44px!important; align-items:center!important;column-gap:24px!important;row-gap:0!important;z-index:5!important; max-width:1120px!important;margin:0 auto!important;isolation:isolate; } #message[data-msg-discovery] [data-pin] [data-msgjourney] > [data-msgsummary]{ grid-column:1!important;grid-row:1!important;display:flex!important;flex-direction:row!important; align-items:center!important;gap:15px!important;min-width:0!important; } #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-msgcount]{ display:flex;align-items:baseline;gap:8px;color:#343568;font-family:Marcellus,serif; font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap; } #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-chnum]{font-size:34px;letter-spacing:-.035em} #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-msgtotal]{font-family:Jost,sans-serif;font-size:11px;letter-spacing:.13em;color:#77738f} #message[data-msg-discovery] [data-pin] [data-msgjourney] > [data-msgtracks]{ grid-column:1 / -1!important;grid-row:2!important;display:flex!important;align-items:center!important; gap:8px!important;width:100%!important;min-width:0!important;order:initial!important; } #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-seg]{ min-width:0!important;min-height:44px!important;height:44px;position:relative;display:flex;align-items:center; border:0;background:transparent;padding:0;cursor:pointer;transition:flex-grow .75s cubic-bezier(.22,.72,.2,1); touch-action:manipulation;border-radius:4px; } #message[data-msg-discovery] [data-pin] [data-msgjourney] button span{display:block!important} #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-msgtrack]{ position:relative;width:100%;height:2px;border-radius:4px;background:rgba(82,68,126,.16); box-shadow:0 1px 0 rgba(255,255,255,.6); } #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-bar]{ position:absolute;inset:0;border-radius:4px;transform-origin:left center; background:linear-gradient(90deg,#7864af,var(--chapter-ink));transform:scaleX(0); } #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-seg][aria-current="step"] [data-msgtrack]{height:3px} #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-seghead]{ position:absolute;top:50%;left:0;width:6px;height:6px;translate:-50% -50%;border-radius:50%; background:#fdfcff;box-shadow:0 0 0 1.5px var(--chapter-ink),0 0 12px 3px var(--chapter-light); } #message[data-msg-discovery] [data-pin] [data-msgjourney] > [data-msgnextwrap]{ grid-column:2!important;grid-row:1!important;order:initial!important;margin:0!important; justify-self:end!important;min-width:0!important;max-width:100%!important; } #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-msgnext]{ position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px; min-width:142px!important;min-height:44px;padding:0;border:0;background:none;color:#49416e;cursor:pointer;text-align:left; } #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-msgnextmeta]{font:9px/1.2 Jost,sans-serif;letter-spacing:.24em;color:#746d8c} #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-msgnextmeta] [data-msgnextnum]{display:inline!important;margin-left:7px;letter-spacing:.12em} #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-msgnextline]{display:flex!important;align-items:center;justify-content:space-between;gap:20px;width:100%;font:18px/1.1 Marcellus,serif;letter-spacing:.03em} #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-msgnext] svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1;transition:transform .5s cubic-bezier(.2,.8,.25,1)} #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-msgnext]:hover svg{transform:translateX(4px)} #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-msgnext]:disabled{visibility:hidden;pointer-events:none} #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-msgpause]{ display:grid;place-items:center;min-width:44px!important;min-height:44px;width:44px;height:44px; border:none;border-radius:50%;padding:0;color:#70698a;background:transparent;cursor:pointer;touch-action:manipulation; } #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-msgpause] svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round} #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-play-icon], #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-end-icon]{display:none} #message[data-msg-discovery] [data-pin] [data-msgjourney][data-state="paused"] [data-pause-icon], #message[data-msg-discovery] [data-pin] [data-msgjourney][data-state="complete"] [data-pause-icon]{display:none} #message[data-msg-discovery] [data-pin] [data-msgjourney][data-state="paused"] [data-play-icon], #message[data-msg-discovery] [data-pin] [data-msgjourney][data-state="complete"] [data-end-icon]{display:block} #message[data-msg-discovery] [data-pin] [data-msgjourney][data-state="complete"] [data-msgpause]{opacity:.55;cursor:default} #message[data-msg-discovery] [data-pin] [data-msgjourney][data-state="reduced"] [data-msgpause]{visibility:hidden;pointer-events:none} #message[data-msg-discovery] [data-pin] [data-msgjourney] button:focus-visible{outline:1px solid #7059b3;outline-offset:4px} @media (max-width:720px){ #message[data-msg-discovery] [data-pin] > [data-msgjourney]{ inset:auto 28px 74px 34px!important;grid-template-rows:40px 44px!important;column-gap:18px!important; } #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-chnum]{font-size:30px} #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-msgnext]{min-width:116px!important} #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-msgnextline]{font-size:16px;gap:14px} #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-msgnext] svg{width:19px;height:19px} #message[data-msg-discovery] [data-pin] [data-msgjourney] > [data-msgsummary]{gap:6px!important} #message[data-msg-discovery] [data-pin] [data-msgjourney] > [data-msgtracks]{gap:7px!important} } @media (max-width:720px) and (max-height:560px){ #message[data-msg-discovery] [data-pin] > [data-msgjourney]{bottom:max(14px,calc(env(safe-area-inset-bottom,0px) + 6px))!important} } @media (prefers-reduced-motion:reduce){ #message[data-msg-discovery] [data-pin] [data-msgjourney] *, #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-msgnext]:hover svg{transition:none!important;transform:none} #message[data-msg-discovery] [data-pin] [data-msgjourney] [data-seghead]{display:none!important} } /* Wide, short windows keep the cue on one line, below the chapter copy. */ @media (min-width:721px) and (max-height:560px){ #message[data-msg-discovery] [data-pin] > [data-msgjourney]{ grid-template-columns:auto minmax(80px,1fr) auto!important;grid-template-rows:44px!important; } #message[data-msg-discovery] [data-pin] [data-msgjourney] > [data-msgtracks]{grid-column:2!important;grid-row:1!important} #message[data-msg-discovery] [data-pin] [data-msgjourney] > [data-msgnextwrap]{grid-column:3!important;grid-row:1!important} } /* === MESSAGE mobile reading pace and balance v132 === Keep the copy and its controls in one centered composition. Natural document scroll owns chapter selection; no wheel/touch interception or scroll snapping. */ @media (max-width:720px){ #message[data-msg-discovery]{height:340svh!important} #message[data-msg-discovery] > [data-pin]{ display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:stretch!important; padding:max(82px,calc(env(safe-area-inset-top,0px) + 50px)) 28px max(58px,calc(env(safe-area-inset-bottom,0px) + 24px)) 34px!important; box-sizing:border-box!important; } #message[data-msg-discovery] [data-msgrow]{ position:relative!important;inset:auto!important;width:100%!important;height:auto!important; flex:0 0 auto!important;padding:0!important; } #message[data-msg-discovery] [data-msgkey]{margin-bottom:clamp(24px,4svh,34px)!important} #message[data-msg-discovery] [data-pin] > [data-msgjourney]{ position:relative!important;inset:auto!important;flex:0 0 auto!important;width:100%!important; margin:clamp(32px,6svh,56px) 0 0!important;padding:0!important; } #message[data-msg-discovery] [data-msgbody] > [data-msgcopy]{animation:messageCopyIn .5s ease-out both!important} @keyframes messageCopyIn{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:translate3d(0,0,0)}} } @media (max-width:720px) and (max-height:560px){ #message[data-msg-discovery] > [data-pin]{ padding:max(56px,calc(env(safe-area-inset-top,0px) + 18px)) 28px max(14px,calc(env(safe-area-inset-bottom,0px) + 6px)) 34px!important; } #message[data-msg-discovery] [data-msgkey]{margin-bottom:18px!important} #message[data-msg-discovery] [data-pin] > [data-msgjourney]{margin-top:20px!important} } @media (prefers-reduced-motion:reduce){ #message[data-msg-discovery] [data-msgbody] > [data-msgcopy]{animation:none!important} } /* Static partner artwork fills its media frame, including the legacy mobile blob lane. */ [data-pcard] span[data-sitefallback][data-static-preview]{width:100%!important;height:100%!important} /* The four chapters now read as one Japanese narrative. English stays in the chapter labels. */ #message[data-msg-discovery] [data-chkey]{font-size:clamp(21px,2.7vw,34px)!important} #message [data-msgcopy][data-language="ja"] [data-enline]{ font-family:"Zen Kaku Gothic New",sans-serif!important;font-size:clamp(23px,2.5vw,34px)!important; font-weight:300!important;line-height:1.5!important;letter-spacing:.04em!important; word-break:normal;overflow-wrap:normal;line-break:strict;text-wrap:balance; } #message [data-msgcopy][data-language="ja"] [data-msgparagraphs]{gap:12px!important} #message [data-msgcopy][data-language="ja"] [data-msgparagraph]{ white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important;line-break:strict!important;text-wrap:pretty!important; } @media(max-width:720px){ #message[data-msg-discovery] [data-msgcopy][data-language="ja"] [data-enline]{font-size:clamp(18px,4.9vw,21px)!important;line-height:1.5!important} #message[data-msg-discovery] [data-msgcopy][data-language="ja"] [data-msgparagraphs]{gap:10px!important;max-width:100%!important} #message[data-msg-discovery] [data-msgcopy][data-language="ja"] [data-msgparagraph] [data-keep-phrase]{display:inline!important;white-space:nowrap!important} #message[data-msg-discovery] [data-msgcopy][data-language="ja"] [data-msgparagraph], #message[data-msg-discovery] [data-msgcopy][data-language="ja"] [data-msgparagraph] span{font-size:12.5px!important;line-height:1.75!important;letter-spacing:.03em!important} } /* === Production mobile canonical layout v5 === */ @media (max-width:720px){ #top [data-topjp]{display:none!important} #top [data-pin] > div:nth-of-type(6){bottom:48px!important} #message [data-pin] > div:last-of-type{bottom:84px!important} html[data-flowvis] [data-voyager],html[data-partnervis] [data-voyager]{opacity:1!important;visibility:visible!important;filter:none!important;pointer-events:none!important} #flow [data-flowblob]{display:none!important} #partner [data-partnercore]{display:none!important} } /* === Short-screen MESSAGE clearance v123 === Keep type sizes; trade surplus header/nav spacing for a separate text lane. */ @media (max-width:720px) and (max-height:560px){ #message [data-msgrow]{padding: max(56px,calc(env(safe-area-inset-top,0px) + 18px)) 28px calc(132px + env(safe-area-inset-bottom,0px)) 34px!important} #message [data-msgkey]{margin-bottom:24px!important} #message [data-pin] > div:last-of-type{bottom:max(24px,calc(env(safe-area-inset-bottom,0px) + 12px))!important} } /* === Production mobile canonical layout v18 === Content-sized partner card + compact final footer. */ @media (max-width:720px){ #partner [data-pin][data-open="1"] > div:first-of-type{top:24px!important;left:24px!important;z-index:40!important} #partner [data-pin][data-open="1"] [data-pcard]{left:16px!important;right:16px!important;width:auto!important;top:88px!important;bottom:auto!important;height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;transform:none!important;translate:0 0!important;padding:13px 15px 14px!important;gap:6px!important} footer{min-height:0!important;padding-top:10px!important;padding-bottom:12px!important;gap:4px!important} #contact > div:last-of-type{padding-bottom:12px!important} } /* === Production mobile canonical layout v19 === */ @media (max-width:720px){ #flow [data-flow]:nth-of-type(2) span{font-size:28px!important;line-height:1.08!important;letter-spacing:.01em!important} #flow [data-flow]:nth-of-type(3) span{font-size:18px!important;line-height:1.45!important;letter-spacing:.18em!important} } /* === Production mobile canonical layout v20 === */ @media (max-width:720px){ #partner [data-pin][data-open="1"] [data-pcard]{top:43svh!important;bottom:auto!important;height:auto!important;max-height:none!important;padding:11px 14px 12px!important;gap:5px!important} #partner [data-pin][data-open="1"] [data-carddesc]{white-space:pre-line!important;font-size:9.8px!important;line-height:1.5!important;letter-spacing:0!important;margin:1px 0!important;min-height:30px!important;max-height:30px!important;overflow:hidden!important} } /* === Production mobile canonical layout v21 === */ @media (max-width:720px){ @keyframes voyageM{ 0%{transform:translate3d(14vw,10svh,0) scale(1) rotate(0deg)} 8%{transform:translate3d(-18vw,-10svh,0) scale(1.08) rotate(-18deg)} 14%{transform:translate3d(-48vw,8svh,0) scale(.82) rotate(-44deg)} 18%{transform:translate3d(-34vw,-24svh,0) scale(.48) rotate(-82deg)} 22%{transform:translate3d(-8vw,-34svh,0) scale(.27) rotate(-126deg)} 26%{transform:translate3d(24vw,-18svh,0) scale(.44) rotate(-168deg)} 30%{transform:translate3d(38vw,10svh,0) scale(.82) rotate(-208deg)} 34%{transform:translate3d(18vw,32svh,0) scale(1.08) rotate(-244deg)} 38%{transform:translate3d(-22vw,34svh,0) scale(.68) rotate(-282deg)} 42%{transform:translate3d(-54vw,10svh,0) scale(1.18) rotate(-320deg)} 46%{transform:translate3d(-34vw,-22svh,0) scale(.54) rotate(-354deg)} 50%{transform:translate3d(8vw,-32svh,0) scale(.36) rotate(-392deg)} 54%{transform:translate3d(48vw,-8svh,0) scale(1.02) rotate(-430deg)} 58%{transform:translate3d(44vw,28svh,0) scale(.72) rotate(-468deg)} 62%{transform:translate3d(4vw,40svh,0) scale(1.24) rotate(-506deg)} 66%{transform:translate3d(-46vw,24svh,0) scale(.78) rotate(-544deg)} 70%{transform:translate3d(-58vw,-12svh,0) scale(1.02) rotate(-580deg)} 74%{transform:translate3d(-18vw,-30svh,0) scale(.52) rotate(-616deg)} 78%{transform:translate3d(26vw,-6svh,0) scale(.30) rotate(-648deg)} 81%{transform:translate3d(8vw,8svh,0) scale(.20) rotate(-674deg)} 83%{transform:translate3d(0,6svh,0) scale(.14) rotate(-692deg)} 90%{transform:translate3d(0,6svh,0) scale(.14) rotate(-720deg)} 100%{transform:translate3d(0,-3svh,0) scale(0) rotate(-792deg)} } html[data-msgvis] [data-voyager]{opacity:.94!important;visibility:visible!important;filter:none!important} } /* === Production mobile canonical layout v22 === MESSAGE must never freeze the traveller while chapters 01-04 change. */ @media (max-width:720px){ html[data-msgvis]:not([data-flowvis]):not([data-partnervis]) [data-voyager]{ animation-name:voyageM!important; animation-duration:1ms!important; animation-timing-function:linear!important; animation-fill-mode:both!important; animation-timeline:scroll(root block)!important; transition:none!important; opacity:.94!important; visibility:visible!important; will-change:transform!important; } #message [data-pin] [data-msgblob],#message [data-pin] [data-blob]{display:none!important} } /* === Production mobile canonical layout v23 === */ @media (max-width:720px){ #partner [data-pin][data-open="1"] [data-pcard]{left:28px!important;right:28px!important;top:49svh!important;bottom:16px!important;height:auto!important;max-height:calc(51svh - 16px)!important} #partner [data-pin][data-open="1"] [data-stage]{transform:translate3d(0,-13svh,0) scale(.72)!important;transform-origin:50% 38%!important;opacity:.64!important} #partner [data-pin][data-open="1"] [data-orbit]{opacity:.54!important} #partner [data-pin][data-open="1"] [data-orb]{transform:scale(.82)!important} #partner [data-pin][data-open="1"] [data-siteview],#partner [data-pin][data-open="1"] [data-pcard] > div:nth-of-type(2){height:138px!important;min-height:138px!important;max-height:138px!important;flex:0 0 138px!important} } /* === Production mobile canonical layout v24 === */ @media (max-width:720px){ #partner [data-pin][data-open="1"] [data-pcard]{left:30px!important;right:30px!important;top:47svh!important;bottom:8px!important;height:auto!important;max-height:calc(53svh - 8px)!important;padding:10px 13px 10px!important} #partner [data-pin][data-open="1"] [data-siteview],#partner [data-pin][data-open="1"] [data-pcard] > div:nth-of-type(2){height:176px!important;min-height:176px!important;max-height:176px!important;flex:0 0 176px!important} #partner [data-pin][data-open="1"] [data-stage]{transform:translate3d(0,-15svh,0) scale(.68)!important;transform-origin:50% 36%!important;opacity:.60!important} #partner [data-pin][data-open="1"] [data-orbit]{opacity:.50!important} #partner [data-pin][data-open="1"] [data-orb]{transform:scale(.78)!important} } /* === Production mobile canonical layout v25 === Make the traveller hand-off reversible: no hard snap when scrolling back up. */ @media (max-width:720px){ html[data-flowvis]:not([data-partnervis]) [data-voyager]{ transition-duration:.9s!important; } } /* === Single traveller continuity v27 === */ @media (max-width:720px){ html[data-msgvis] [data-voyager],html[data-flowvis] [data-voyager],html[data-partnervis] [data-voyager]{opacity:.94!important;visibility:visible!important;filter:none!important;pointer-events:none!important;transition:none!important} #flow [data-flowblob],#partner [data-partnercore],#message [data-msgblob]{display:none!important} } /* === MESSAGE fluid motion v28 === */ @media (max-width:720px){ #message [data-msgstage],#message [data-msgkey]{transition:opacity .58s cubic-bezier(.22,.72,.2,1),transform .72s cubic-bezier(.22,.72,.2,1),filter .72s ease!important;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;will-change:opacity,transform!important} #message [data-msgbody] > div{animation:none!important;transition:opacity .52s cubic-bezier(.22,.72,.2,1),transform .68s cubic-bezier(.22,.72,.2,1)!important;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important} #message [data-enline],#message [data-enline] > span,#message [data-msgbody] p,#message [data-msgbody] p span{transition:opacity .46s cubic-bezier(.22,.72,.2,1),transform .56s cubic-bezier(.22,.72,.2,1)!important;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important} #message [data-horizon],#message [data-ring],#message [data-wave],#message [data-orbit]{transition:opacity .7s ease,transform .85s cubic-bezier(.22,.72,.2,1),scale .85s cubic-bezier(.22,.72,.2,1),rotate .95s linear!important;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;will-change:transform,opacity!important} } /* === TOP traveller aligns to PARTNERS orbit center v45 === */ @media (max-width:720px){ @keyframes voyageM{ 0%{transform:translate3d(14vw,10svh,0) scale(1) rotate(0deg)} 8%{transform:translate3d(-18vw,-10svh,0) scale(1.08) rotate(-18deg)} 14%{transform:translate3d(-48vw,8svh,0) scale(.82) rotate(-44deg)} 18%{transform:translate3d(-34vw,-24svh,0) scale(.48) rotate(-82deg)} 22%{transform:translate3d(-8vw,-34svh,0) scale(.27) rotate(-126deg)} 26%{transform:translate3d(24vw,-18svh,0) scale(.44) rotate(-168deg)} 30%{transform:translate3d(38vw,10svh,0) scale(.82) rotate(-208deg)} 34%{transform:translate3d(18vw,32svh,0) scale(1.08) rotate(-244deg)} 38%{transform:translate3d(-22vw,34svh,0) scale(.68) rotate(-282deg)} 42%{transform:translate3d(-54vw,10svh,0) scale(1.18) rotate(-320deg)} 46%{transform:translate3d(-34vw,-22svh,0) scale(.54) rotate(-354deg)} 50%{transform:translate3d(8vw,-32svh,0) scale(.36) rotate(-392deg)} 54%{transform:translate3d(48vw,-8svh,0) scale(1.02) rotate(-430deg)} 58%{transform:translate3d(44vw,28svh,0) scale(.72) rotate(-468deg)} 62%{transform:translate3d(4vw,40svh,0) scale(1.24) rotate(-506deg)} 66%{transform:translate3d(-46vw,24svh,0) scale(.78) rotate(-544deg)} 70%{transform:translate3d(-58vw,-12svh,0) scale(1.02) rotate(-580deg)} 74%{transform:translate3d(-18vw,-30svh,0) scale(.52) rotate(-616deg)} 78%{transform:translate3d(26vw,-8svh,0) scale(.30) rotate(-648deg)} 81%{transform:translate3d(8vw,-2svh,0) scale(.20) rotate(-674deg)} 83%{transform:translate3d(0,5svh,0) scale(.14) rotate(-692deg)} 90%{transform:translate3d(0,9svh,0) scale(.14) rotate(-720deg)} 95%{transform:translate3d(0,9svh,0) scale(.10) rotate(-752deg)} 98%{transform:translate3d(0,9svh,0) scale(.06) rotate(-776deg)} 100%{transform:translate3d(0,9svh,0) scale(0) rotate(-792deg)} } } /* === PARTNERS controls + centered orbit v43 === */ @media (max-width:720px){ #partner [data-pin] > [data-nostop]{top:34px!important;left:24px!important;right:auto!important;margin:0!important;z-index:36!important} #partner [data-pin][data-open="0"] [data-stage]{transform:translate3d(0,6svh,0)!important;transform-origin:50% 50%!important;transition:transform .78s cubic-bezier(.16,.76,.18,1),opacity .58s ease!important} #partner [data-pin][data-open="1"] [data-stage]{transform:translate3d(0,-14svh,0) scale(.68)!important;transform-origin:50% 30%!important;opacity:.68!important;transition:transform .78s cubic-bezier(.16,.76,.18,1),opacity .58s ease!important} #partner [data-pin][data-open="1"] > [data-pcard]{left:22px!important;right:22px!important;width:auto!important;translate:0 0!important;transform:none!important;top:34svh!important;bottom:8px!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important;padding:15px 16px 12px!important;gap:6px!important;border-radius:24px!important;background:linear-gradient(155deg,rgba(255,255,255,.82),rgba(245,247,255,.68))!important;border:1px solid rgba(255,255,255,.86)!important;backdrop-filter:blur(20px) saturate(170%)!important;-webkit-backdrop-filter:blur(20px) saturate(170%)!important;box-shadow:0 18px 42px rgba(54,64,118,.12),inset 0 1px 0 rgba(255,255,255,.8)!important;opacity:1!important;z-index:30!important;animation:partnerCardEnter .58s .10s cubic-bezier(.16,.76,.18,1) both!important} #partner [data-pin][data-open="1"] > [data-pcard] > div:first-of-type{flex:0 0 auto!important;min-height:36px!important;padding-right:48px!important;align-items:baseline!important} #partner [data-pin][data-open="1"] > [data-pcard] > div:nth-of-type(2){flex:0 0 150px!important;height:150px!important;min-height:150px!important;max-height:150px!important;aspect-ratio:auto!important;border-radius:15px!important} #partner [data-pin][data-open="1"] > [data-pcard] [data-siteview]{width:100%!important;height:124px!important;min-height:124px!important;max-height:124px!important;aspect-ratio:auto!important} #partner [data-pin][data-open="1"] > [data-pcard] > div:nth-of-type(3){display:block!important;flex:0 0 auto!important;min-height:40px!important;overflow:visible!important} #partner [data-pin][data-open="1"] > [data-pcard] [data-carddesc]{display:block!important;font-size:11px!important;line-height:1.48!important;margin:0!important;min-height:32px!important;max-height:34px!important;overflow:hidden!important;white-space:pre-line!important} #partner [data-pin][data-open="1"] > [data-pcard] > span{display:flex!important;visibility:visible!important;opacity:1!important;flex:0 0 auto!important} #partner [data-pin][data-open="1"] > [data-pcard] [data-cardbottom]{display:flex!important;visibility:visible!important;opacity:1!important;align-items:center!important;justify-content:space-between!important;gap:6px!important;flex:0 0 36px!important;margin-top:0!important;min-height:36px!important;overflow:visible!important} #partner [data-pin][data-open="1"] > [data-pcard] [data-cardnav]{display:flex!important;visibility:visible!important;opacity:1!important;order:1!important;flex:1 1 auto!important;min-width:0!important;justify-content:flex-start!important;align-items:center!important;gap:6px!important;padding:0!important} #partner [data-pin][data-open="1"] > [data-pcard] [data-cardnav] button{display:grid!important;visibility:visible!important;opacity:1!important;width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important} #partner [data-pin][data-open="1"] > [data-pcard] [data-cardhref]{display:flex!important;visibility:visible!important;opacity:1!important;order:2!important;flex:0 0 auto!important;min-height:32px!important;padding:5px 9px!important;border-radius:999px!important;white-space:nowrap!important;font-size:10.5px!important;letter-spacing:.10em!important} #partner [data-siteframe]{width:1440px!important;min-width:1440px!important;max-width:1440px!important;min-height:0!important;max-height:none!important;transform-origin:0 0!important} #partner [data-siteframe]{left:0!important;transform:scale(var(--s,.19))!important} } @keyframes partnerCardEnter{from{opacity:0;translate:0 16px;scale:.985}to{opacity:1;translate:0 0;scale:1}} /* === Interaction-safe motion polish v56 === */ #message [data-msgstage],#message [data-msgkey]{transition:opacity .62s cubic-bezier(.16,.76,.18,1),transform .76s cubic-bezier(.16,.76,.18,1),filter .76s ease!important} #message [data-enline],#message [data-enline] > span,#message [data-msgbody] p,#message [data-msgbody] p span{transition:opacity .5s cubic-bezier(.16,.76,.18,1),transform .62s cubic-bezier(.16,.76,.18,1)!important} #partner [data-orb] [data-orbbtn]{transition:scale .72s cubic-bezier(.16,.76,.18,1),transform .72s cubic-bezier(.16,.76,.18,1),opacity .5s ease!important} #partner [data-orbring],#partner [data-orbtext]{transition:border-color .55s ease,box-shadow .7s ease,color .5s ease,opacity .5s ease!important} #partner [data-pcard]{isolation:isolate!important} #partner [data-pcard] [data-siteview]{isolation:isolate!important;overflow:hidden!important} #partner [data-pcard] [data-siteframe]{backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important} /* === PC traveler composition + PARTNERS center lock v57 === */ @media (min-width:721px){ @keyframes pcBlobBuoyancy{0%,100%{translate:-8vw -1.2vh}38%{translate:-8.5vw 1.6vh}72%{translate:-7.7vw 3.2vh}} [data-voyager] > div{translate:0 0!important;animation:none!important} [data-voyager] > div:first-child{animation:spinR 32s linear infinite!important} html[data-topvis="1"] [data-voyager] > div{animation:pcBlobBuoyancy 5.8s cubic-bezier(.45,.05,.25,.95) infinite!important} html[data-topvis="1"] [data-voyager] > div:first-child{animation:pcBlobBuoyancy 5.8s cubic-bezier(.45,.05,.25,.95) infinite,spinR 32s linear infinite!important} } /* === Journey rail v57 === */ [data-scrollrail]{z-index:80!important} [data-scrollrail]::before{content:"TOP · MESSAGE · FLOW · PARTNERS · CONTACT";position:absolute;right:12px;top:50%;translate:0 -50%;writing-mode:vertical-rl;text-orientation:mixed;font-family:Jost,sans-serif;font-size:8px;letter-spacing:.24em;color:rgba(42,53,112,.34);white-space:nowrap;pointer-events:none} [data-scrollrail]::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;translate:-50% 0;background:linear-gradient(to bottom,rgba(42,53,112,.08),rgba(112,89,179,.28),rgba(176,111,156,.22),rgba(42,53,112,.08));pointer-events:none} [data-scrolldot]{z-index:2!important;box-shadow:0 0 0 4px rgba(255,255,255,.52),0 0 18px rgba(112,89,179,.28)!important} @media (max-width:720px){ [data-scrollrail]::before{display:none!important} [data-scrollrail]{right:8px!important;opacity:.78!important} [data-scrollrail]::after{background:linear-gradient(to bottom,rgba(42,53,112,.06),rgba(112,89,179,.25),rgba(176,111,156,.18),rgba(42,53,112,.06))} [data-scrolldot]{box-shadow:0 0 0 3px rgba(255,255,255,.48),0 0 12px rgba(112,89,179,.24)!important} } /* === PC TOP-only larger slow white sphere type v55 === */ @media (min-width:721px){ .pc-principle-one-line{width:max-content!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important;white-space:nowrap!important;justify-self:center!important} [data-voyager] > svg[data-voyager-type]{display:block!important;position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;overflow:hidden!important;z-index:7!important;pointer-events:none!important;animation-name:pcBlobBuoyancy,pcVoyagerTypeSpin!important;animation-duration:5.8s,22s!important;animation-timing-function:cubic-bezier(.45,.05,.25,.95),linear!important;animation-iteration-count:infinite,infinite!important;transform-origin:50% 50%!important;clip-path:circle(49% at 50% 50%)!important;mix-blend-mode:screen!important;opacity:0!important;visibility:hidden!important;transition:opacity .32s ease,visibility .32s ease!important} html[data-topvis="1"] [data-voyager] > svg[data-voyager-type]{opacity:.98!important;visibility:visible!important} [data-voyager] > svg[data-voyager-type] text{font-family:Jost,sans-serif!important;font-size:11px!important;font-weight:400!important;letter-spacing:.14em!important;fill:#fff!important;filter:drop-shadow(0 1px 2px rgba(70,80,135,.12))!important} @keyframes pcVoyagerTypeSpin{to{rotate:360deg}} } @media (max-width:720px){[data-voyager] > svg[data-voyager-type]{display:none!important}} /* === Text-free journey rail v58 === */ [data-scrollrail]{right:14px!important;top:14vh!important;bottom:14vh!important;width:5px!important;border-radius:999px!important;background:linear-gradient(180deg,rgba(124,200,255,.12),rgba(183,157,255,.24) 35%,rgba(255,158,203,.20) 68%,rgba(157,247,216,.12))!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.58),0 4px 18px rgba(74,84,150,.08)!important;opacity:.68!important;overflow:visible!important} [data-scrollrail]::before{content:none!important;display:none!important} [data-scrollrail]::after{content:""!important;display:block!important;position:absolute!important;left:50%!important;top:7px!important;bottom:7px!important;width:1px!important;translate:-50% 0!important;border-radius:999px!important;background:linear-gradient(180deg,rgba(42,53,112,.12),rgba(112,89,179,.52),rgba(176,111,156,.40),rgba(42,53,112,.12))!important;pointer-events:none!important} [data-scrollrail][data-active]{opacity:1!important} [data-railcap]{left:50%!important;width:13px!important;height:2px!important;margin-left:-6.5px!important;border-radius:999px!important;background:rgba(72,80,145,.34)!important} [data-scrollrail][data-at="start"] [data-railcap="start"],[data-scrollrail][data-at="end"] [data-railcap="end"]{width:17px!important;margin-left:-8.5px!important;height:3px!important} [data-scrolldot]{left:50%!important;width:11px!important;height:11px!important;margin:-5.5px 0 0 -5.5px!important;border:1px solid rgba(255,255,255,.88)!important;background:radial-gradient(circle at 34% 28%,#fff 0 18%,rgba(198,188,255,.96) 38%,rgba(135,111,214,.88) 66%,rgba(112,89,179,.18) 100%)!important;box-shadow:0 0 0 4px rgba(255,255,255,.48),0 3px 14px rgba(95,76,174,.34),0 0 22px rgba(183,157,255,.30)!important;opacity:.9!important} [data-scrollrail][data-active] [data-scrolldot]{opacity:1!important} @media (max-width:720px){[data-scrollrail]{right:10px!important;top:17svh!important;bottom:17svh!important;width:4px!important;opacity:.72!important}[data-railcap]{width:11px!important;margin-left:-5.5px!important}[data-scrolldot]{width:9px!important;height:9px!important;margin:-4.5px 0 0 -4.5px!important;box-shadow:0 0 0 3px rgba(255,255,255,.46),0 2px 11px rgba(95,76,174,.30),0 0 16px rgba(183,157,255,.26)!important}} /* === PC TOP composition v65 === */ @media (min-width:721px){ html[data-topvis="1"] [data-voyager] > div{translate:-9vw 0!important} html[data-topvis="1"] [data-voyager] > svg[data-voyager-type]{translate:-9vw 0!important} #partner [data-pcard] [data-cardbottom]{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;width:100%!important} #partner [data-pcard] [data-cardnav]{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;flex:1 1 auto!important;min-width:0!important} #partner [data-pcard] [data-cardhref]{flex:0 0 auto!important;white-space:nowrap!important;margin-left:auto!important} } /* === MESSAGE cleanup v68 === */ #message [data-keyghost]{display:none!important} @media (min-width:721px){ #message [data-msgbody] > div > h2 + h2{margin-top:-12px!important} } /* === PARTNERS traveler: measured no-snap arrival v62 === */ @media (min-width:721px){ [data-voyager]{transition:translate 1.45s cubic-bezier(.16,.82,.18,1)!important} html[data-partner-arriving="1"] [data-voyager]{translate:var(--partner-vx,0px) var(--partner-vy,0px)!important;transition:none!important} html[data-partner-arriving="2"] [data-voyager],html:has(#partner [data-pin][data-open="1"]):not([data-partner-arriving="1"]) [data-voyager]{translate:var(--partner-vx-end,-16vw) var(--partner-vy-end,6vh)!important;transition:translate 1.45s cubic-bezier(.16,.82,.18,1)!important} } [data-mobile-voyager-sample]{display:none} /* === MOBILE PARTNERS ONLY v122 === Reversible native journey and readable live previews. */ @media screen and (max-width:720px){ #partner > div[data-pin][data-open="0"] > div[data-nostop], #partner > div[data-pin][data-open="1"] > div[data-nostop]{ position:absolute!important; top:calc(var(--mobile-header-top,26px) + 40px)!important; left:24px!important; right:auto!important; margin:0!important; z-index:36!important; translate:0 0!important; transform:translate3d(0,8px,0)!important; opacity:0!important; transition:opacity .58s cubic-bezier(.22,.72,.2,1),transform .72s cubic-bezier(.16,.76,.18,1)!important; } html[data-mobile-partner-pinned="1"] #partner > div[data-pin] > div[data-nostop]{ transform:translate3d(0,0,0)!important; opacity:1!important; } #partner > div[data-pin][data-open="1"] > div[data-nostop]{ transform:translate3d(0,0,0)!important; opacity:1!important; } html[data-mobile-partner-pinned="1"] header [data-brand]{ opacity:1!important; visibility:visible!important; transform:none!important; translate:0 0!important; } #partner > div[data-pin][data-open="0"] > div[data-stage], #partner > div[data-pin][data-open="1"] > div[data-stage]{ transform:none!important; translate:0 0!important; transform-origin:50% 50%!important; opacity:1!important; } html[data-mobile-partner-lock="1"] [data-voyager]{ position:fixed!important; left:var(--mobile-partner-left,0px)!important; top:var(--mobile-partner-top,0px)!important; margin:0!important; translate:0 0!important; transform-origin:50% 50%!important; transform:scale(var(--mobile-partner-scale,.14)) rotate(var(--mobile-partner-rot,0deg))!important; animation:none!important; transition:left .56s cubic-bezier(.16,.82,.18,1),top .56s cubic-bezier(.16,.82,.18,1),transform .56s cubic-bezier(.16,.82,.18,1),opacity .34s ease!important; opacity:.94!important; visibility:visible!important; } html[data-mobile-partner-approach="1"] [data-voyager]{transition:none!important} html[data-mobile-partner-lock="1"][data-mobile-partner-pinned="1"][data-mobile-partner-card="1"] [data-voyager]{opacity:0!important;visibility:hidden!important} /* Keep the established narrow card at normal phone widths. At 320px, reserve at least 280px for both controls and two complete description lines. */ #partner > div[data-pin][data-open="1"] > div[data-stage] > div[data-pcard]{ display:flex!important;position:absolute!important;left:clamp(20px,calc((100vw - 280px) / 2),46px)!important;right:clamp(20px,calc((100vw - 280px) / 2),46px)!important; top:var(--mobile-partner-card-top,310px)!important;bottom:auto!important;width:auto!important; height:var(--mobile-partner-card-height,292px)!important;min-height:0!important;max-height:var(--mobile-partner-card-height,292px)!important; margin:0!important;translate:0 0!important;transform:none!important;overflow:hidden!important;overscroll-behavior:none!important; padding:11px 12px 9px!important;gap:4px!important;border-radius:22px!important; background:linear-gradient(155deg,rgba(255,255,255,.995),rgba(231,237,249,.985))!important; border:1px solid rgba(255,255,255,1)!important;backdrop-filter:blur(22px) saturate(150%)!important; -webkit-backdrop-filter:blur(22px) saturate(150%)!important;box-shadow:0 18px 42px rgba(48,56,108,.24),inset 0 1px 0 #fff!important;z-index:40!important; } #partner > div[data-pin][data-open="1"] > div[data-stage] > div[data-pcard] > div:first-of-type{flex:0 0 28px!important;min-height:28px!important;max-height:28px!important;padding-right:36px!important;align-items:center!important;overflow:hidden!important} #partner > div[data-pin][data-open="1"] > div[data-stage] > div[data-pcard] [data-cardnum]{font-size:16px!important} #partner > div[data-pin][data-open="1"] > div[data-stage] > div[data-pcard] [data-cardname]{min-width:0!important;font-size:15px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} #partner > div[data-pin][data-open="1"] > div[data-stage] > div[data-pcard] [data-cardclose]{right:8px!important;top:8px!important;width:32px!important;height:32px!important} #partner > div[data-pin][data-open="1"] > div[data-stage] > div[data-pcard] > div:nth-of-type(2){flex:0 0 var(--mobile-partner-preview-frame,208px)!important;height:var(--mobile-partner-preview-frame,208px)!important;min-height:var(--mobile-partner-preview-frame,208px)!important;max-height:var(--mobile-partner-preview-frame,208px)!important;overflow:hidden!important;border-radius:13px!important} #partner > div[data-pin][data-open="1"] > div[data-stage] > div[data-pcard] [data-siteview]{height:var(--mobile-partner-preview,180px)!important;min-height:var(--mobile-partner-preview,180px)!important;max-height:var(--mobile-partner-preview,180px)!important;overflow:hidden!important} #partner > div[data-pin][data-open="1"] > div[data-stage] > div[data-pcard] > div:nth-of-type(3){flex:0 0 31px!important;min-height:31px!important;max-height:31px!important;overflow:hidden!important} /* The inherited 1px rule + 12px margin used to clip the second line. */ #partner > div[data-pin][data-open="1"] > div[data-stage] > div[data-pcard] > div:nth-of-type(3) > span{display:none!important} #partner > div[data-pin][data-open="1"] > div[data-stage] > div[data-pcard] [data-carddesc]{margin:0!important;font-size:9.8px!important;line-height:1.5!important;letter-spacing:0!important;white-space:pre-line!important;display:block!important;overflow:hidden!important;max-height:30px!important} #partner > div[data-pin][data-open="1"] > div[data-stage] > div[data-pcard] > span{flex:0 0 14px!important;min-height:14px!important;max-height:14px!important;line-height:14px!important;margin:1px 0!important} #partner > div[data-pin][data-open="1"] > div[data-stage] > div[data-pcard] [data-cardbottom]{display:flex!important;flex:0 0 32px!important;min-height:32px!important;max-height:32px!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;overflow:visible!important} #partner > div[data-pin][data-open="1"] > div[data-stage] > div[data-pcard] [data-cardnav]{min-width:0!important;gap:6px!important} #partner > div[data-pin][data-open="1"] > div[data-stage] > div[data-pcard] [data-cardnav] button{flex:0 0 32px!important;width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important} #partner > div[data-pin][data-open="1"] > div[data-stage] > div[data-pcard] [data-cardhref]{min-height:32px!important;padding:4px 8px!important;font-size:9.5px!important} /* Short screens reserve their space for the company, not the decorative diamond. OUR PARTNERS takes the brand's row only while a compact card is open. */ html[data-mobile-partner-compact="1"] #partner > div[data-pin][data-open="1"] > div[data-stage] > div[data-pcard]{padding-top:10px!important;padding-bottom:8px!important} html[data-mobile-partner-compact="1"] #partner > div[data-pin][data-open="1"] > div[data-stage] > div[data-pcard] > span{display:none!important} html[data-mobile-partner-compact="1"] #partner > div[data-pin][data-open="1"] > div[data-nostop]{top:var(--mobile-header-top,26px)!important} html[data-mobile-partner-compact="1"][data-mobile-partner-card="1"][data-mobile-partner-lock="1"] header [data-brand]{opacity:0!important;visibility:hidden!important} /* Empty, invisible sampler: the browser evaluates the existing voyageM keyframes at the handoff boundary. No second visible sphere or duplicated path table. */ [data-mobile-voyager-sample]{display:block;position:fixed;left:50%;top:50%;width:var(--blob);aspect-ratio:1;margin:calc(var(--blob) / -2) 0 0 calc(var(--blob) / -2);visibility:hidden;pointer-events:none;animation:voyageM 1000s linear both paused!important;animation-timeline:auto!important;animation-delay:var(--sample-delay,0s)!important;translate:0 0!important;transition:none!important} /* Padding is measured only for the card's home-indicator clearance. The orbit and traveller still use the unchanged 100svh scene coordinates. overflow:clip also prevents focus/scrollIntoView from scrolling this clipped frame internally. */ #partner > div[data-pin]{padding-bottom:env(safe-area-inset-bottom,0px)!important;overflow:clip!important} } /* === Production mobile MESSAGE-to-FLOW continuity v24 === Mobile only: keep the same traveller alive across MESSAGE -> FLOW, and keep its path inside the visual frame. */ @media (max-width:720px){ @keyframes voyageM{ 0%{transform:translate3d(14vw,10svh,0) scale(1) rotate(0deg)} 8%{transform:translate3d(-18vw,-10svh,0) scale(1.08) rotate(-18deg)} 14%{transform:translate3d(-42vw,8svh,0) scale(.82) rotate(-44deg)} 18%{transform:translate3d(-34vw,-24svh,0) scale(.48) rotate(-82deg)} 22%{transform:translate3d(-8vw,-34svh,0) scale(.27) rotate(-126deg)} 26%{transform:translate3d(24vw,-18svh,0) scale(.44) rotate(-168deg)} 30%{transform:translate3d(36vw,10svh,0) scale(.82) rotate(-208deg)} 34%{transform:translate3d(18vw,30svh,0) scale(1.08) rotate(-244deg)} 38%{transform:translate3d(-22vw,30svh,0) scale(.68) rotate(-282deg)} 42%{transform:translate3d(-38vw,10svh,0) scale(1.06) rotate(-320deg)} 46%{transform:translate3d(-30vw,-22svh,0) scale(.54) rotate(-354deg)} 50%{transform:translate3d(8vw,-30svh,0) scale(.36) rotate(-392deg)} 54%{transform:translate3d(36vw,-8svh,0) scale(.96) rotate(-430deg)} 58%{transform:translate3d(34vw,26svh,0) scale(.72) rotate(-468deg)} 62%{transform:translate3d(4vw,34svh,0) scale(1.12) rotate(-506deg)} 66%{transform:translate3d(-34vw,22svh,0) scale(.78) rotate(-544deg)} 70%{transform:translate3d(-36vw,-10svh,0) scale(.94) rotate(-580deg)} 74%{transform:translate3d(-16vw,-26svh,0) scale(.52) rotate(-616deg)} 78%{transform:translate3d(20vw,-6svh,0) scale(.30) rotate(-648deg)} 81%{transform:translate3d(8vw,8svh,0) scale(.20) rotate(-674deg)} 83%{transform:translate3d(0,6svh,0) scale(.14) rotate(-692deg)} 90%{transform:translate3d(0,6svh,0) scale(.14) rotate(-720deg)} 100%{transform:translate3d(0,-3svh,0) scale(0) rotate(-792deg)} } html[data-msgvis]:not([data-partnervis]) [data-voyager]{ animation-name:voyageM!important; animation-duration:1ms!important; animation-timing-function:linear!important; animation-fill-mode:both!important; animation-timeline:scroll(root block)!important; transition:none!important; opacity:.94!important; visibility:visible!important; will-change:transform!important; } } /* === Production mobile PARTNERS card-open polish v25 === */ @media (max-width:720px){ #partner > [data-pin] > [data-nostop]{ transition:opacity .48s cubic-bezier(.22,.72,.2,1),transform .72s cubic-bezier(.16,.76,.18,1)!important; will-change:transform,opacity!important; } html[data-mobile-partner-own="1"] header [data-brand]{ transition:opacity .44s cubic-bezier(.22,.72,.2,1),transform .62s cubic-bezier(.16,.76,.18,1)!important; will-change:transform,opacity!important; } html[data-mobile-partner-own="1"][data-mobile-partner-card="1"] #partner > [data-pin] > [data-nostop]{ opacity:1!important; transform:translate3d(0,-38px,0)!important; } html[data-mobile-partner-own="1"][data-mobile-partner-card="1"] header [data-brand]{ opacity:0!important; visibility:visible!important; transform:translate3d(0,-8px,0)!important; pointer-events:none!important; } html[data-mobile-partner-own="1"]:not([data-mobile-partner-card="1"]) header [data-brand]{ opacity:1!important; transform:translate3d(0,0,0)!important; } } /* === Production mobile PARTNERS card-open polish v26 === Keep OUR PARTNERS visible above the card and gently pull the orbit inward. */ @media (max-width:720px){ #partner > [data-pin][data-open="1"] > [data-nostop]{ opacity:1!important; visibility:visible!important; top:108px!important; transform:translate3d(0,-24px,0)!important; transition:opacity .42s cubic-bezier(.22,.72,.2,1),transform .72s cubic-bezier(.16,.76,.18,1)!important; z-index:46!important; } #partner > [data-pin] [data-deco]{ transform-origin:50% 50%!important; scale:1; transition:scale .82s cubic-bezier(.16,.76,.18,1),left 1.1s cubic-bezier(.4,.7,.3,1),top 1.1s cubic-bezier(.4,.7,.3,1),width 1.1s cubic-bezier(.4,.7,.3,1),height 1.1s cubic-bezier(.4,.7,.3,1)!important; } #partner > [data-pin][data-open="1"] [data-deco]{scale:.92!important} #partner > [data-pin] [data-orb]{ translate:var(--mobile-orbit-shift-x,0px) var(--mobile-orbit-shift-y,0px)!important; transition:translate .82s cubic-bezier(.16,.76,.18,1),offset-path 1.1s cubic-bezier(.4,.7,.3,1)!important; } #partner > [data-pin][data-open="0"] [data-orb]{ --mobile-orbit-shift-x:0px!important; --mobile-orbit-shift-y:0px!important; } } /* Reduced-motion overrides come after the production motion layers. */ @media (prefers-reduced-motion: reduce){ #message [data-msgbody] > div,#message [data-msgstage],#message [data-msgkey], #message [data-enline],#message [data-enline] > span,#message [data-msgbody] p,#message [data-msgbody] p span, #message [data-horizon],#message [data-ring],#message [data-wave],#message [data-orbit], #partner [data-orb] [data-orbbtn],#partner [data-orbring],#partner [data-orbtext], #partner [data-pin][data-open="0"] [data-stage],#partner [data-pin][data-open="1"] [data-stage], #partner > [data-pin] [data-deco],#partner > [data-pin] [data-orb], #partner > div[data-pin][data-open="0"] > div[data-nostop], #partner > div[data-pin][data-open="1"] > div[data-nostop]{transition:none!important} #flow [data-flow]{transform:none!important} }