:root {
  /* 右下固定の基準位置 */
  --af-right: 20px;
  --af-bottom: 20px;

  /* X軸シフト（右端から左へ寄せる量。例: 40px で左へ40px） */
  --af-x-shift: 0px;

  /* ボタンサイズ系 */
  --af-height: 44px;
  --af-padding-x: 18px;
  --af-radius: 9999px;

  /* 文字 */
  --af-font-size: 14px;
  --af-font-weight: 700;

  /* 見た目 */
  --af-bg: #1a73e8;
  --af-bg-hover: #155fc0;
  --af-text: #ffffff;

  /* 前面 */
  --af-z: 2147483647;
}

.af-launcher {
  position: fixed;
  right: var(--af-right);
  bottom: var(--af-bottom);

  /* 右から左へ寄せる */
  transform: translateX(calc(-1 * var(--af-x-shift)));

  height: var(--af-height);
  padding: 0 var(--af-padding-x);
  border-radius: var(--af-radius);

  border: 0;
  cursor: pointer;

  font-size: var(--af-font-size);
  font-weight: var(--af-font-weight);
  line-height: 1;

  background: var(--af-bg);
  color: var(--af-text);

  z-index: var(--af-z);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

.af-launcher:hover {
  background: var(--af-bg-hover);
}

.af-launcher:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.af-launcher.af-hidden {
  display: none !important;
}

/* スマホで下端UIに干渉しがちなので少し持ち上げる（必要なら調整） */
@media (max-width: 480px) {
  :root {
    --af-bottom: 78px;
  }
}

/* =========================
   日本語2問モーダル
   ========================= */
.af-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: calc(var(--af-z) + 1);
  display: none;
}

.af-modal-backdrop.af-open {
  display: block;
}

.af-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 420px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  padding: 16px;
  z-index: calc(var(--af-z) + 2);
  display: none;
}

.af-modal.af-open {
  display: block;
}

.af-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.af-modal-title {
  font-size: 16px;
  font-weight: 800;
  color: #111;
}

.af-modal-close {
  border: 0;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}

.af-modal-body {
  display: grid;
  gap: 12px;
}

.af-field {
  display: grid;
  gap: 6px;
}

.af-label {
  font-size: 13px;
  font-weight: 700;
  color: #222;
}

.af-select {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #d9d9d9;
  padding: 0 10px;
  font-size: 14px;
  background: #fff;
}

.af-help {
  font-size: 12px;
  color: #555;
}

.af-modal-footer {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.af-primary {
  height: 42px;
  border-radius: 12px;
  border: 0;
  background: #1a73e8;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.af-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.af-secondary {
  height: 42px;
  border-radius: 12px;
  border: 1px solid #d9d9d9;
  background: #fff;
  color: #111;
  font-weight: 800;
  cursor: pointer;
}