:root{
  --bg:#2b3b1f;
  --card:#baf7b8;
  --glass: rgba(255,255,255,.30);
  --glass-border: rgba(255,255,255,.45);
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* completion aura */
body.is-complete::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,0.25) 0%,
      rgba(255,255,255,0.12) 30%,
      rgba(255,255,255,0.00) 60%
    );
  animation: cobakeCompleteAura 600ms ease-out both;
  z-index: 9999;
}

@keyframes cobakeCompleteAura{
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}

.app{
  height: 100dvh;
  display: grid;
  grid-template-rows: 1fr;
  place-items: center;
  padding:
    calc(24px + env(safe-area-inset-top))
    calc(24px + env(safe-area-inset-right))
    calc(24px + env(safe-area-inset-bottom))
    calc(24px + env(safe-area-inset-left));
}

.screen{
  display:none;
  width: min(1024px, 100%);
  height: auto;
  max-height: 100%;
  aspect-ratio: 3 / 4;
}
.screen.is-active{ display:block; }

/* iPhone / iPad：画面いっぱい（safe-area込み） */
@media (hover: none) and (pointer: coarse){
  .app{
    place-items: stretch;
    padding:
      env(safe-area-inset-top)
      env(safe-area-inset-right)
      env(safe-area-inset-bottom)
      env(safe-area-inset-left);
  }

  .screen{
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
  }

  /* 角丸は端末フルスクリーンでは切れるため解除 */
  .start-layer,
  .stage{
    border-radius: 0;
  }
}

/* =========================
   START
========================= */
.start-layer{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius:24px;
  overflow:hidden;
  box-shadow: var(--shadow);
}

.start-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.start-pop-area{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.start-pop{
  position:absolute;
  bottom: 8%;
  width: 220px;
  height: auto;
  transform: translateY(220px) scale(.98);
  opacity: 0;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.18));
  animation: popUp 620ms cubic-bezier(.2,.9,.2,1) forwards;
}

@keyframes popUp{
  0%   { transform: translateY(220px) scale(.98); opacity: 0; }
  60%  { transform: translateY(-10px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.start-ghost{
  position:absolute;
  left: 56%;
  top: 8%;
  width: 86px;
  height:auto;
  pointer-events:none;
  animation: floaty 2.8s ease-in-out infinite;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
}

@keyframes floaty{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}

.start-btn{
  position:absolute;
  left:50%;
  top:50.5%;
  transform: translate(-50%, -50%);
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  animation: fadeIn 420ms ease-out forwards;
  z-index: 999;
}

.start-btn img{
  width: 180px;
  height:auto;
  display:block;
}

@keyframes fadeIn{
  from{ opacity:0; transform: translate(-50%, -50%) scale(.98); }
  to  { opacity:1; transform: translate(-50%, -50%) scale(1); }
}

.legal-icons{
  position:absolute;
  right: 70px;
  bottom: 50px;
  display:flex;
  gap: 14px;
  z-index: 80;
}

.legal-icons a{
  display:block;
  width: 28px;
  height: 28px;
}

.legal-icons img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  opacity: .95;
}

.legal-icons a{
  transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
}

.legal-icons a:active{
  transform: translateY(1px) scale(0.98);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
  opacity: .90;
}

/* =========================
   GAME (minimum layout)
========================= */
.stage{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius:24px;
  overflow:hidden;
  box-shadow: var(--shadow);
  touch-action:none;
}

.stage-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  z-index: 0;

  /* === LOCK BACKBOARD === */
  pointer-events: none;       /* 誤タップ・誤ドラッグ完全防止 */
  user-select: none;
  -webkit-user-drag: none;
}

/* silhouette layer */
.silhouette-layer{
  position:absolute;
  inset:0;
  z-index: 80;
  pointer-events:none;
}

.silhouette{
  position:absolute;
  width: 120px;
  height:auto;
  opacity: 0.85;
  filter: brightness(0) saturate(100%);
}

/* =========================
   SNAP / HINT FX
========================= */

/* silhouette-box overlay effects */
.silhouette-box{
  position: relative; /* for pseudo element */
}

/* pre-snap: stronger outline shimmer (JS toggles .is-pre-snap) */
.silhouette-box.is-pre-snap::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  transform: translate(-50%, -50%) rotate(var(--sil-rot, 0deg)) scale(var(--sil-scale, 1));
  transform-origin: 50% 50%;
  pointer-events:none;

  background: linear-gradient(
    110deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.00) 30%,
    rgba(255,255,255,1.00) 48%,
    rgba(255,255,255,0.00) 66%,
    rgba(255,255,255,0.00) 100%
  );
  background-size: 240% 240%;
  background-position: -140% 50%;
  animation:
    cobakeOutlineSweep 620ms linear infinite,
    cobakePreSnapPulse 150ms ease-out both;

  -webkit-mask-image: var(--mask-url);
  mask-image: var(--mask-url);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;

  filter:
    drop-shadow(0 0 14px rgba(255,255,255,0.75))
    drop-shadow(0 0 28px rgba(255,255,255,0.35));
  opacity: 1;
}

@keyframes cobakePreSnapPulse{
  0%   { opacity: 0.0; transform: translate(-50%, -50%) rotate(var(--sil-rot, 0deg)) scale(calc(var(--sil-scale, 1) * 0.995)); }
  60%  { opacity: 1.0; transform: translate(-50%, -50%) rotate(var(--sil-rot, 0deg)) scale(calc(var(--sil-scale, 1) * 1.010)); }
  100% { opacity: 0.92; transform: translate(-50%, -50%) rotate(var(--sil-rot, 0deg)) scale(calc(var(--sil-scale, 1) * 1.000)); }
}

/* hint loop: outline shimmer following PNG alpha (subject-like line) */
.silhouette-box.is-hint-loop::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  transform: translate(-50%, -50%) rotate(var(--sil-rot, 0deg)) scale(var(--sil-scale, 1));
  transform-origin: 50% 50%;
  pointer-events:none;

  /* ★必ずシルエットより前面に出す */
  z-index: 95;

  /* moving highlight */
  background: linear-gradient(
    110deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.00) 35%,
    rgba(255,255,255,0.95) 48%,
    rgba(255,255,255,0.00) 62%,
    rgba(255,255,255,0.00) 100%
  );
  background-size: 220% 220%;
  background-position: -120% 50%;
  animation: cobakeOutlineSweep 980ms linear infinite;

  /* alpha mask: use silhouette PNG */
  -webkit-mask-image: var(--mask-url);
  mask-image: var(--mask-url);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;

  /* edge-like glow */
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,0.65))
    drop-shadow(0 0 24px rgba(255,255,255,0.35));
  opacity: 1;
}

@keyframes cobakeOutlineSweep{
  0%   { background-position: -120% 50%; }
  100% { background-position:  220% 50%; }
}

/* hint: subtle glow pulse */
.silhouette-box.is-hint::after{
  content:"";
  position:absolute;
  inset: 6px;
  border-radius: 14px;
  pointer-events:none;
  box-shadow:
    0 0 0 0 rgba(255,255,255,0.0),
    0 0 22px 6px rgba(255,255,255,0.22);
  animation: cobakeHintPulse 1200ms ease-out both;
}

@keyframes cobakeHintPulse{
  0%   { opacity: 0; transform: scale(0.995); filter: blur(0px); }
  30%  { opacity: 1; transform: scale(1.000); filter: blur(0px); }
  100% { opacity: 0; transform: scale(1.010); filter: blur(0.2px); }
}

/* correct: snap nudge + sparkle ring (quick assurance) */
.silhouette-box.is-correct{
  animation: cobakeSnapNudge 90ms ease-out both;
}

.silhouette-box.is-correct::after{
  content:"";
  position:absolute;
  inset: 4px;
  border-radius: 14px;
  pointer-events:none;
  box-shadow:
    0 0 0 0 rgba(255,255,255,0.0),
    0 0 34px 12px rgba(255,255,255,0.36);
  animation: cobakeCorrectSparkle 260ms ease-out both;
}

@keyframes cobakeSnapNudge{
  0%   { transform: translate(0, 0) scale(1); }
  45%  { transform: translate(0.5px, -0.5px) scale(1.002); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes cobakeCorrectSparkle{
  0%   { opacity: 0; transform: scale(0.99); }
  35%  { opacity: 1; transform: scale(1.01); }
  100% { opacity: 0; transform: scale(1.03); }
}

/* filled color inside silhouette (snap settle) */
.silhouette-filled{
  animation: cobakeFilledSettle 180ms ease-out both;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.10));
}

@keyframes cobakeFilledSettle{
  0%   { transform: translate(-50%, -50%) scale(0.99); }
  60%  { transform: translate(-50%, -50%) scale(1.01); }
  100% { transform: translate(-50%, -50%) scale(1.00); }
}

/* piece correct outline */
.piece.is-correct::after{
  content:"";
  position:absolute;
  inset: -8px;
  border-radius: 18px;
  pointer-events:none;
  box-shadow:
    0 0 0 0 rgba(255,255,255,0.0),
    0 0 26px 10px rgba(255,255,255,0.30);
  animation: cobakePieceSparkle 700ms ease-out both;
}

@keyframes cobakePieceSparkle{
  0%   { opacity: 0; transform: scale(0.98); }
  25%  { opacity: 1; transform: scale(1.00); }
  100% { opacity: 0; transform: scale(1.04); }
}

/* icon buttons (prevents giant images) */
/* =========================
   CHARABUTTON (top-right)
   - larger size
========================= */
/* =========================
   ICON BUTTON (no frame)
   charabutton / backbutton
========================= */
/* =========================
   ICON BUTTON (base only)
   - NO size / NO position
========================= */
.icon-btn{
  position: absolute;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  place-items: center;
  z-index: 200;
}

.icon-btn img{
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* =========================
   CHARABUTTON (ghost)
   ========================= */
#ghostBtn{
  top: 50px;
  right: 66px;
  width: 72px;
  height: 72px;
}

#ghostBtn img{
  width: 72px;   /* ← ここを自由に変更 */
  height: auto;
}

/* =========================
   BACKBUTTON (menu)
   ========================= */
#menuBtn{
  bottom: 45px;
  right: 49px;
  width: 56px;
  height: 56px;
}

#menuBtn img{
  width: 40px;   /* ← ここを自由に変更 */
  height: auto;
}

/* iPhone / iPad：safe-area 対応（ノッチ / ホームバー回避） */
@media (hover: none) and (pointer: coarse){
  .legal-icons{
    right: calc(16px + env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom));
  }

  #ghostBtn{
    top: calc(16px + env(safe-area-inset-top));
    right: calc(16px + env(safe-area-inset-right));
  }

  #menuBtn{
    bottom: calc(16px + env(safe-area-inset-bottom));
    right: calc(16px + env(safe-area-inset-right));
  }

  .drawer{
    top: calc(130px + env(safe-area-inset-top));
    right: calc(16px + env(safe-area-inset-right));
    height: calc(100% - 180px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .popup{
    right: calc(16px + env(safe-area-inset-right));
    bottom: calc(108px + env(safe-area-inset-bottom));
  }

  .start-layer,
  .stage{
    border-radius: 0;
  }
}

/* dokokana button */
.dokokana-btn{
  position:absolute;
  left:51%;
  top:40%;
  transform: translate(-50%, -50%);
  border:0;
  background:transparent;
  padding:0;
  z-index: 250;
  animation: fadeIn 420ms ease-out forwards;
}

.dokokana-btn img{
  width: min(520px, 84vw);
  height:auto;
  display:block;
}

/* piece (drag target) */
.piece{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, 80%);
  height:auto;
  z-index: 120;
  user-select:none;
  -webkit-user-drag:none;
  touch-action:none;
}

/* piece: interaction feel */
.piece{
  cursor: grab;
  transition: filter 120ms ease, transform 120ms ease;
  will-change: transform;
}

.piece:active{
  cursor: grabbing;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.24));
}

.piece:active::after,
.piece.is-dragging::after{
  content:"";
  position:absolute;
  inset: -14px;
  pointer-events:none;

  /* moving highlight */
  background: linear-gradient(
    110deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.00) 35%,
    rgba(255,255,255,0.95) 48%,
    rgba(255,255,255,0.00) 62%,
    rgba(255,255,255,0.00) 100%
  );
  background-size: 220% 220%;
  background-position: -120% 50%;
  animation: cobakeOutlineSweep 880ms linear infinite;

  /* alpha mask: use piece PNG */
  -webkit-mask-image: var(--mask-url);
  mask-image: var(--mask-url);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;

  /* edge-like glow */
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.55))
    drop-shadow(0 0 20px rgba(255,255,255,0.25));
  opacity: 0.95;
}

.piece:active::after{
  content:"";
  position:absolute;
  inset: -8px;
  border-radius: 18px;
  pointer-events:none;
  box-shadow:
    0 0 0 0 rgba(255,255,255,0.0),
    0 0 18px 8px rgba(255,255,255,0.22);
  animation: cobakeGrabGlow 520ms ease-in-out infinite alternate;
}

@keyframes cobakeGrabGlow{
  from { opacity: 0.35; transform: scale(0.995); }
  to   { opacity: 0.85; transform: scale(1.010); }
}

/* keep existing hook (if JS adds class later) */
.piece.is-dragging{
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.24));
}

/* piece inner image (div化対応) */
.piece-img{
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* PC handles (shown by JS only when selected) */
.piece-handle{
  position: absolute;
  width: 28px;
  height: 28px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  display: none;               /* JSが選択中のみ grid にする */
  place-items: center;
  font-size: 14px;
  line-height: 1;
  z-index: 999;
  touch-action: none;
}

.piece-handle-rotate{
  right: -12px;
  top: -12px;
  cursor: grab;
}

.piece-handle-scale{
  right: -12px;
  bottom: -12px;
  cursor: nwse-resize;
}

.piece-handle:active{
  cursor: grabbing;
}

/* =========================
   DRAWER (character list)
   - outer vertical frame is required
   - no individual frames
   - slide down on open
========================= */
/* =========================
   DRAWER (character list)
   - vertical frame required
========================= */
.drawer{
  position:absolute;
  top: 130px;
  right: 52px;

  width: 108px;
  height: calc(100% - 180px);

  background: rgba(245,245,255,.78);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);

  padding: 10px 8px;
  z-index: 240;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* show animation when unhidden */
.drawer:not([hidden]){
  animation: drawerDrop 260ms ease-out both;
}

@keyframes drawerDrop{
  from{ opacity: 0; transform: translateY(-10px); }
  to  { opacity: 1; transform: translateY(0); }
}

.drawer-inner{
  width:100%;
  height:100%;
  overflow: hidden;
  border-radius: 14px;
}

.drawer-items{
  width:100%;
  height:100%;
  overflow-y: auto;
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 33px 0 14px;
}

/* no individual frames */
/* =========================
   COBake list items
   - balanced sizes
========================= */
/* =========================
   Drawer Cobake List
   - fixed & even layout
========================= */
.cobake-item{
  width: 88px;
  height: 88px;          /* 高さを固定して均等化 */
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.thumb-img{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* PNG差を吸収 */
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* per character fixed sizes (manual editing)
   - order can be randomized in JS
   - sizes stay stable by data-id
*/

/* ベース（何も指定しないキャラ用） */
.cobake-item[data-id] .thumb-img{
  width: 72px;
  height: auto;
  object-fit: contain;
}

/* 個別サイズ（あなたが自由に編集） */
.cobake-item[data-id="well"]   .thumb-img{ width: 80px; }
.cobake-item[data-id="fuuu"]   .thumb-img{ width: 40px; }
.cobake-item[data-id="vazuu"]  .thumb-img{ width: 50px; }
.cobake-item[data-id="monja"]  .thumb-img{ width: 88px; }
.cobake-item[data-id="pipple"] .thumb-img{ width: 65px; }
.cobake-item[data-id="ruru"]   .thumb-img{ width: 46px; }
.cobake-item[data-id="coin"]   .thumb-img{ width: 40px; }
.cobake-item[data-id="wonka"]  .thumb-img{ width: 70px; }
.cobake-item[data-id="coron"]  .thumb-img{ width: 62px; }
.cobake-item[data-id="musshu"] .thumb-img{ width: 60px; }

/* =========================
   MENU POPUP (kyuukei / yameru)
   ========================= */
.popup{
  position: absolute;
  right: 53px;
  bottom: 108px;

  width: 180px;
  padding: 14px 12px;

  background: #ffffff;
  border-radius: 20px;

  display: flex;
  flex-direction: column;
  gap: 12px;

  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  z-index: 300;
}

.popup[hidden]{
  display: none;
}

.popup-item{
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.popup-item[hidden]{
  display:none !important;
}

.popup-item img{
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.popup-item:active{
  transform: translateY(1px);
}

/* =========================
   REGULATIONS POPUP
   - overlay + iframe
   - Apple font (system-ui)
========================= */
.reg-popup{
  position: fixed;
  inset: 0;
  z-index: 9999;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

.reg-popup[hidden]{
  display: none;
}

.reg-mask{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.reg-panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: min(686px, 64vw);   /* 980px × 0.7 */
  height: min(60vh, 574px);  /* 820px × 0.7 */

  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 20px;

  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);

  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.25);

  overflow: hidden;

  /* scroll / bounce isolation */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  contain: paint;
}

/* open animation */
.reg-popup:not([hidden]) .reg-mask{
  animation: regFadeIn 180ms ease-out both;
}
.reg-popup:not([hidden]) .reg-panel{
  animation: regPopIn 220ms cubic-bezier(.2,.9,.2,1) both;
}

@keyframes regFadeIn{
  from{ opacity: 0; }
  to  { opacity: 1; }
}

@keyframes regPopIn{
  from{ opacity: 0; transform: translate(-50%, -50%) scale(.985); }
  to  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.reg-close{
  position: absolute;
  right: 12px;
  top: 10px;

  width: 40px;
  height: 40px;

  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: #ffffff;
  border-radius: 12px;

  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);

  cursor: pointer;
  z-index: 2;

  font-size: 22px;
  line-height: 40px;
  text-align: center;

  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.reg-close:active{
  transform: translateY(1px);
}

.reg-frame{
  position: absolute;
  left: 0;
  right: 0;
  top: 56px;           /* ヘッダー分 */
  bottom: 0;

  width: 100%;
  height: calc(100% - 56px);

  border: 0;
  background: transparent;
}

/* header */
.reg-header{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 56px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 12px 0 16px;

  background: rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.14);

  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);

  z-index: 3;
}

.reg-title{
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,.92);
  user-select: none;
}

/* loading */
.reg-loading{
  position: absolute;
  left: 0;
  right: 0;
  top: 56px;
  bottom: 0;

  display: none; /* JSで表示 */
  place-items: center;

  color: rgba(255,255,255,.86);
  font-size: 13px;

  z-index: 2;
}

.reg-loading::before{
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.28);
  border-top-color: rgba(255,255,255,0.86);
  display: inline-block;
  margin-right: 10px;
  animation: regSpin 780ms linear infinite;
}

@keyframes regSpin{
  to{ transform: rotate(360deg); }
}