@charset "utf-8";

    :root {
      --backdrop-bg: rgba(0, 0, 0, 0.45);
      --transition: 260ms ease;
    }

    /* バック */
    .modal-backdrop {
      position:fixed; inset:0;
      background:var(--backdrop-bg);
      display:flex; align-items:center; justify-content:center;
      padding:24px; z-index:100;
      opacity:0; pointer-events:none;
      transition:opacity var(--transition);
    }
    .modal-backdrop.open {
      opacity:1; pointer-events:auto;
    }

    /* モーダル本体 */
    .modal {
      background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.2);
      outline: none;
      width:50vw; max-width:720px; min-width:280px; padding:20px;
      opacity:0; transform:translateY(8px) scale(0.98);
      transition:opacity var(--transition), transform var(--transition);
    }
    .modal-backdrop.open .modal {
      opacity:1; transform:translateY(0) scale(1);
    }

    .modal-header { display:flex; align-items:center; justify-content: flex-end; }
    .modal-title { flex:1; font-size:1.25rem; font-weight:600; margin:0; }
    .modal-close { border:none; background:transparent; cursor:pointer; padding:8px; margin:-8px; }
    .modal-close svg {  width: 38px; height: 38px; stroke: #51a714; }
    .modal-body { margin-top:0px; }
    .modal-body p{ font-size:1.4em; }
    .modal-body .line-bn { width: 80%; max-width:500px; }
    .modal-footer { margin-top:20px; text-align:center; }
    .modal-footer label { font-size:0.9rem; cursor:pointer; }

    @media(max-width:768px){ .modal{ width:90vw; } }
    .no-scroll{ overflow:hidden; touch-action:none; }