.dialog {
  --duration-show: 1.2s;
  --duration-close: 0.5s;
  --scale: 0;
  --anchor-name: --button1; /* デフォルトのアンカー */
  /* ぼよんぼよんする動き ： gsap だとelastic.out(0.5, 0.3) 相当 */
  --ease-elastic-out: linear(0, 0.0271 0.38%, 0.055 0.77%, 0.0836 1.15%, 0.1128 1.54%, 0.1425 1.92%, 0.1726 2.31%, 0.203 2.69%, 0.2336 3.08%, 0.2644 3.46%, 0.2953 3.85%, 0.3262 4.23%, 0.357 4.62%, 0.3876 5%, 0.4181 5.38%, 0.4483 5.77%, 0.4782 6.15%, 0.5077 6.54%, 0.5368 6.92%, 0.5654 7.31%, 0.5936 7.69%, 0.6212 8.08%, 0.6482 8.46%, 0.6746 8.85%, 0.7004 9.23%, 0.7255 9.62%, 0.75 10%, 0.7738 10.38%, 0.7968 10.77%, 0.8191 11.15%, 0.8406 11.54%, 0.8614 11.92%, 0.8815 12.31%, 0.9007 12.69%, 0.9192 13.08%, 0.9369 13.46%, 0.9538 13.85%, 0.97 14.23%, 0.9854 14.62%, 1 15%, 1.0139 15.38%, 1.027 15.77%, 1.0393 16.15%, 1.051 16.54%, 1.0619 16.92%, 1.0721 17.31%, 1.0816 17.69%, 1.0905 18.08%, 1.0986 18.46%, 1.1062 18.85%, 1.113 19.23%, 1.1193 19.62%, 1.125 20%, 1.1301 20.38%, 1.1346 20.77%, 1.1386 21.15%, 1.1421 21.54%, 1.1451 21.92%, 1.1476 22.31%, 1.1496 22.69%, 1.1512 23.08%, 1.1523 23.46%, 1.1531 23.85%, 1.1535 24.23%, 1.1534 24.62%, 1.1531 25%, 1.1524 25.38%, 1.1514 25.77%, 1.1501 26.15%, 1.1486 26.54%, 1.1468 26.92%, 1.1447 27.31%, 1.1424 27.69%, 1.1399 28.08%, 1.1373 28.46%, 1.1344 28.85%, 1.1314 29.23%, 1.1283 29.62%, 1.125 30%, 1.1216 30.38%, 1.1181 30.77%, 1.1146 31.15%, 1.1109 31.54%, 1.1072 31.92%, 1.1034 32.31%, 1.0996 32.69%, 1.0958 33.08%, 1.0919 33.46%, 1.0881 33.85%, 1.0842 34.23%, 1.0804 34.62%, 1.0765 35%, 1.0727 35.38%, 1.069 35.77%, 1.0652 36.15%, 1.0615 36.54%, 1.0579 36.92%, 1.0543 37.31%, 1.0508 37.69%, 1.0474 38.08%, 1.044 38.46%, 1.0407 38.85%, 1.0374 39.23%, 1.0343 39.62%, 1.0313 40%, 1.0283 40.38%, 1.0254 40.77%, 1.0226 41.15%, 1.0199 41.54%, 1.0173 41.92%, 1.0148 42.31%, 1.0124 42.69%, 1.0101 43.08%, 1.0079 43.46%, 1.0058 43.85%, 1.0038 44.23%, 1.0018 44.62%, 1 45%, 0.9983 45.38%, 0.9966 45.77%, 0.9951 46.15%, 0.9936 46.54%, 0.9923 46.92%, 0.991 47.31%, 0.9898 47.69%, 0.9887 48.08%, 0.9877 48.46%, 0.9867 48.85%, 0.9859 49.23%, 0.9851 49.62%, 0.9844 50%, 0.9837 50.38%, 0.9832 50.77%, 0.9827 51.15%, 0.9822 51.54%, 0.9819 51.92%, 0.9816 52.31%, 0.9813 52.69%, 0.9811 53.08%, 0.9809 53.85%, 0.9811 55.77%, 0.9812 56.15%, 0.9814 56.54%, 0.9817 56.92%, 0.9819 57.31%, 0.9822 57.69%, 0.9825 58.08%, 0.9828 58.46%, 0.9832 58.85%, 0.9836 59.23%, 0.984 59.62%, 0.9844 60%, 0.9848 60.38%, 0.9852 60.77%, 0.9857 61.15%, 0.9861 61.54%, 0.9866 61.92%, 0.9871 62.31%, 0.9875 62.69%, 0.988 63.08%, 0.9885 63.46%, 0.989 63.85%, 0.9895 64.23%, 0.99 64.62%, 0.9904 65%, 0.9909 65.38%, 0.9914 65.77%, 0.9918 66.15%, 0.9923 66.54%, 0.9928 66.92%, 0.9932 67.31%, 0.9936 67.69%, 0.9941 68.08%, 0.9945 68.46%, 0.9949 68.85%, 0.9953 69.23%, 0.9957 69.62%, 0.9961 70%, 0.9965 70.38%, 0.9968 70.77%, 0.9972 71.15%, 0.9975 71.54%, 0.9978 71.92%, 0.9981 72.31%, 0.9984 72.69%, 0.9987 73.08%, 0.999 73.46%, 0.9993 73.85%, 0.9995 74.23%, 0.9998 74.62%, 1 75%, 1.0002 75.38%, 1.0004 75.77%, 1.0006 76.15%, 1.0008 76.54%, 1.001 76.92%, 1.0011 77.31%, 1.0014 78.08%, 1.0017 78.85%, 1.0019 79.62%, 1.002 80.38%, 1.0022 81.54%, 1.0024 83.46%, 1.0022 87.69%, 1.0021 89.23%, 1.0019 90.38%, 1.0017 91.54%, 1.0016 92.69%, 1.0014 93.85%, 1.0012 95%, 1.001 96.15%, 1.0008 97.31%, 1.0007 98.46%, 1.0005 99.62%, 1);

  /* アンカーポジショニング */
  anchor-name: var(--anchor-name);
  position-anchor: var(--anchor-name);
  left: anchor(center);
  top: anchor(center);
  translate: -50% -50%;

  scale: var(--scale);
  transition: display var(--duration-close) allow-discrete,
    overlay var(--duration-close) allow-discrete,
    opacity var(--duration-close),
    scale var(--duration-close),
    left var(--duration-close),
    top var(--duration-close);

  &[open] {
    opacity: 1;
    scale: 1;
    left: 50%;
    top: 50%;
    transition: scale var(--duration-show) var(--ease-elastic-out),
      left var(--duration-show) var(--ease-elastic-out),
      top var(--duration-show) var(--ease-elastic-out);
    @starting-style {
      opacity: 0;
      scale: var(--scale);
      left: anchor(center);
      top: anchor(center);
    }
  }

  /* ------------------------------------------------- */
  /* 装飾 */
  margin: unset; /* UAでmargin中央寄せのため初期化 */
  opacity: 0;
  border: 0;
  border-radius: 16px;

  .dialog__inner {
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 4%);
    background-color: white;
    padding: 16px;
    position: relative;
    width: 360px;
  }

  .dialog__close-button {
    width: 32px;
    height: 32px;
    position: absolute;
    right: 16px;
    top: 12px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eaeaea;
    transition: 0.2s;

    &:hover {
      background-color: #ddd;
    }
  }

  .dialog__title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 16px;
    padding-right: 32px;
  }

  .dialog__text {
    color: #555;
    margin-bottom: 32px;
  }

  .dialog__buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  /* ------------------------------------------------- */
  /* 背景 */
  &::backdrop {
    background-color: rgb(0 0 0 / 50%);
    opacity: 0;
    transition: opacity var(--duration-close);
  }

  &[open]::backdrop {
    opacity: 1;
    @starting-style {
      opacity: 0;
    }
  }
}