/* mochikomi Biz 体験デモ（Web版）：1920×1080 の画面を、ブラウザの大きさに合わせて縮めて中央に置く */
html, body { width: 100% !important; height: 100% !important; overflow: hidden !important; background: #e9ecf8 !important; }
html body#body { position: fixed; inset: 0; width: 100% !important; height: 100% !important; overflow: clip !important; }
#root {
  position: absolute !important;
  left: 50% !important; top: calc(50% + var(--ws-top, 0px) / 2) !important;
  width: 1920px !important; height: 1080px !important;
  transform: translate(-50%, -50%) scale(var(--ws-scale, 1));
  transform-origin: center center;
  box-shadow: 0 20px 60px rgba(20, 26, 58, .12);
}

/* 最後のページ：見ている人の立場に合うボタンに「おすすめ」を付ける */
.hfx-cta { position: relative; }
.ws-badge {
  position: absolute; top: -16px; right: 22px;
  padding: 6px 16px; border-radius: 999px;
  background: #c0267a; color: #fff;
  font-size: 18px; font-weight: 700; letter-spacing: .04em;
  box-shadow: 0 6px 16px rgba(192, 38, 122, .3);
}
.ws-dim { opacity: .62; }

/* 見終わったあと：最後の画面の補助ボタン（1920×1080 の画面の中に置く） */
.ws-tab-note { margin: 10px 0 0; font-family: "Noto Sans JP", sans-serif; font-size: 18px; color: #6b7091; }
.ws-after { display: flex; gap: 18px; justify-content: center; margin-top: 22px; }
.ws-after-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 30px; border-radius: 999px;
  border: 2px solid rgba(20, 26, 58, .18); background: rgba(255, 255, 255, .75);
  color: #141a3a; font-family: "Noto Sans JP", sans-serif; font-size: 22px; font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.ws-after-btn:hover { background: #fff; border-color: rgba(20, 26, 58, .4); }

/* 全画面の出入りはデモ画面と分けた操作バーに置く。常時表示・縮小しない。 */
.ws-tools {
  position: fixed; top: 0; right: 0; left: 0; z-index: 1100;
  box-sizing: border-box; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: flex-end; gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  background: #e9ecf8; font-family: "Noto Sans JP", sans-serif;
}
.ws-tools [hidden] { display: none !important; }
.ws-tools button {
  flex-shrink: 0; min-height: 44px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(20, 26, 58, .2); background: rgba(255, 255, 255, .95);
  color: #141a3a; font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; box-shadow: 0 4px 12px rgba(20, 26, 58, .12);
}
.ws-tools button:hover { background: #fff; }
.ws-tools button:focus-visible { outline: 3px solid #00199e; outline-offset: 2px; }
.ws-tools .ws-fullscreen-exit { background: #141a3a; color: #fff; }
.ws-tools .ws-fullscreen-exit:hover { background: #00199e; }
.ws-fullscreen-note { font-size: 12px; line-height: 1.5; color: #343b60; }

/* スマホを縦に持っているとき：横向きをすすめる（このままでも見られる） */
.ws-rotate {
  position: fixed; inset: 0; z-index: 1200;
  display: none; align-items: center; justify-content: center;
  background: rgba(20, 26, 58, .78); color: #fff; text-align: center;
  font-family: "Noto Sans JP", sans-serif; padding: 24px;
}
.ws-rotate.is-on { display: flex; }
.ws-rotate-box { max-width: 320px; }
.ws-rotate-icon { font-size: 44px; line-height: 1; margin-bottom: 14px; }
.ws-rotate p { margin: 0 0 18px; font-size: 16px; line-height: 1.7; }
.ws-rotate button {
  border: 0; border-radius: 999px; padding: 12px 26px;
  background: #fff; color: #141a3a; font-size: 15px; font-weight: 700; cursor: pointer;
}