.wpmodal__close{
position: absolute;
    top: 10px;
    right: 10px;
    margin-left: auto;
    display: block;
    font-size: 20px;
    line-height: 1;
    border: 0;
    color: #fff;
    background: #3e6aac ;
    cursor: pointer;
    border-radius: 50%;
    height: 40px;
}

.wpmodal__trigger{
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 99;
    background-color: #3e6aac ;
    color: #fff;
    line-height: 1.5;
    padding: 10px;
    border: none;
    border-radius: 5px 0 0 0;
    font-family: var(--sans);
}

/* ベース */
.wpmodal{
  position:fixed;
  inset:0;
  display:block;               /* display:noneは使わない */
  pointer-events:none;         /* 閉時はクリック無効 */
  opacity:0;
  transition:opacity .35s ease;
}

/* 開いた状態 */
.wpmodal[aria-hidden="false"]{
  pointer-events:auto;
  opacity:1;
}

/* オーバーレイ */
.wpmodal__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  opacity:0;
  transition:opacity .35s ease;
}

.wpmodal[aria-hidden="false"] .wpmodal__overlay{
  opacity:1;
}

/* パネル本体 */
.wpmodal__panel{
  position:fixed;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(92vw, 860px);
  max-height:85vh;
  overflow:auto;
  background:#fff;
  border-radius:16px;
  padding:24px;
  z-index:9999;
  max-width: 400px;
  opacity:0;
  transition:
    transform .35s cubic-bezier(.2,.7,.3,1),
    opacity .3s ease;
}

/* 開いた時 */
.wpmodal[aria-hidden="false"] .wpmodal__panel{
  transform:translate(-50%, -50%) scale(1);
  opacity:1;
}