body{overflow-x:hidden}.hero-stage{position:relative;overflow:hidden;background:#111;perspective:1600px;height:440px}.hero-cube{position:absolute;inset:0;transform-style:preserve-3d}.hero-face{position:absolute;inset:0;backface-visibility:hidden;background:#101010;color:#fff;display:flex;flex-direction:column}.hero-content{max-width:1200px;width:100%;margin:auto;padding:32px 48px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;flex:1;min-height:0}.hero-content small{font-size:16px;font-weight:700}.hero-content h1{font-size:clamp(24px,2.5vw,32px);line-height:1.6;margin-top:8px}.hero-content p{font-size:13px;color:#aaa;margin-top:14px}.hero-content .ph{height:100%;max-height:265px;min-height:160px;aspect-ratio:auto;background:#d9d9d9;color:#747474;border:0}.hero-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;flex:none}.hero-nav :is(button,a){font:700 15px/1.6 system-ui,sans-serif;min-height:94px;padding:18px 16px;border:0;border-top:1px solid #444;border-right:1px solid #444;background:#202020;color:#aaa;cursor:pointer;text-align:left;display:flex;align-items:center;gap:14px}.hero-nav :is(button,a):last-child{border-right:0}.hero-nav :is(button,a) small{font:12px ui-monospace,monospace;color:#888}.hero-nav :is(button,a)::after{content:'↗';margin-left:auto}.hero-nav :is(button,a)[aria-pressed=true]{background:#205fa9;color:#fff;box-shadow:inset 0 -4px 0 #8bbbf3}.hero-nav :is(button,a)[aria-pressed=true] small{color:#c9e2ff}.hero-nav :is(button,a):hover{background:#354352;color:#fff}button:focus-visible{outline:3px solid #e89935;outline-offset:-4px}.hero-cube.is-busy{pointer-events:none}.wf-crumb{line-height:1.8}.float-dial{position:fixed;z-index:40;right:26px;bottom:30px;width:210px;height:210px;border-radius:50%;filter:drop-shadow(0 5px 12px #0003)}.float-dial svg{display:block;width:100%;height:100%;overflow:visible}.dial-sector{cursor:pointer;outline:none}.dial-sector path{stroke:#152b44;stroke-width:1.5;transition:fill .2s;fill:#d6e4f3}.dial-sector:nth-child(2) path{fill:#e3eced}.dial-sector:nth-child(3) path{fill:#e8e3d9}.dial-sector[aria-pressed=true] path{fill:#205fa9}.dial-sector:hover path,.dial-sector:focus path{fill:#5085bb}.dial-sector:focus-visible path{stroke:#e89935;stroke-width:4}.dial-sector text{fill:#253f5c;font:700 14px system-ui,sans-serif;pointer-events:none}.dial-sector[aria-pressed=true] text{fill:#fff}.dial-label{position:absolute;right:0;bottom:calc(100% + 12px);background:#fff;color:#223b56;padding:10px 14px;box-shadow:0 3px 14px #0002;border:1px solid #ccd7e3;font-size:12px;line-height:1.5;width:max-content;max-width:280px;border-radius:6px}.dial-label small{display:block;color:#697c91;font-size:10px;margin-bottom:3px}.dial-center{pointer-events:none}.dial-needle{transform-origin:105px 105px;transition:transform .6s cubic-bezier(.2,.8,.2,1)}.floating-page #body{padding-bottom:60px}.floating-page .placeholder-content{padding-right:24px}.floating-page .hero-stage{height:390px}.floating-page .hero-content{padding-bottom:32px}
@media(max-width:720px){.hero-stage{height:510px}.hero-content{padding:24px 20px;grid-template-columns:1fr;gap:18px;align-content:center}.hero-content small{font-size:13px}.hero-content h1{font-size:23px;margin-top:5px}.hero-content p{font-size:12px;margin-top:7px}.hero-content .ph{min-height:140px;height:155px;max-height:155px}.hero-nav :is(button,a){min-height:110px;padding:12px 8px;display:flex;flex-direction:column;gap:4px;font-size:12px;text-align:center;justify-content:center}.hero-nav :is(button,a)::after{margin:0;font-size:14px}.hero-nav :is(button,a) small{font-size:10px}.float-dial{width:144px;height:144px;right:14px;bottom:18px}.dial-label{font-size:11px;max-width:230px;padding:8px 10px;bottom:calc(100% + 8px)}.floating-page .placeholder-content{padding-right:24px}.floating-page #body{padding-bottom:200px}.floating-page .hero-stage{height:395px}.floating-page .hero-content{padding:24px 20px}.wf-crumb{font-size:10px}}
@media(prefers-reduced-motion:reduce){.dial-needle{transition:none}}

.hero-nav :is(button,a)[aria-pressed=true]:hover{background:#205fa9}

/* ラベルと円形ナビの左右中心を揃える */
.dial-label{left:50%;right:auto;transform:translateX(-50%);text-align:center;max-width:min(280px,calc(100vw - 32px))}

.hero-nav a{text-decoration:none;box-sizing:border-box}.dial-sector{text-decoration:none}