/* ヒーロー（hero/index-a.html から） */

#hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;cursor:default;background:#fff}
#cam{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
/* 大きな & と点 */
#bigAmp{position:absolute;left:50%;top:50%;height:min(42vh,46vw);width:auto;overflow:visible;transform-origin:50% 50%;will-change:transform;opacity:0}
#dot{position:absolute;left:0;top:0;border-radius:50%;background:var(--coral);will-change:transform}
/* コーラルが画面いっぱいに */
#flood{position:absolute;inset:0;background:var(--coral);clip-path:circle(0 at 50% 50%);will-change:clip-path}
.punch{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);margin:0;text-align:center;white-space:nowrap;
  font:600 min(10.5vw,170px)/1 "Outfit",sans-serif;letter-spacing:-.02em;color:#fff}
.punch span{display:inline-block;opacity:0;will-change:transform,filter}
/* ロゴの組み */
.lockup{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center}
#logo{height:min(56vh,520px,96vw);width:auto;display:block;overflow:visible}
#logo .ltr,#logo #sub,#logo #wordDot,#logo #amp,#logo #ampDot{transform-box:fill-box;transform-origin:50% 100%}
#logo #ampDot,#logo #amp{transform-origin:50% 50%}
.jp{margin:2.6vh 0 0;font:500 clamp(12px,1.25vw,15px)/1.6 "Zen Kaku Gothic New",sans-serif;letter-spacing:.2em;color:var(--navy);opacity:0}
.ctrl{position:absolute;right:18px;bottom:16px;font:500 11px/1 ui-monospace,monospace;letter-spacing:.14em;color:var(--navy);opacity:.45;background:none;border:0;cursor:pointer;padding:8px;z-index:5}
.ctrl:hover{opacity:.9}