.dialog {
    --duration: 0.3s;
    --scale: 0.6;
  
  
    transition:
      display var(--duration) allow-discrete,
      overlay var(--duration) allow-discrete,
      opacity var(--duration),
      scale var(--duration);
  
    /* 非表示時 */
    opacity: 0;
    scale: var(--scale);
  
    &[open] {
      /* 出現後（表示時） */
      opacity: 1;
      scale: 1;
      @starting-style {
        /* 出現前（非表示時） */
        opacity: 0;
        scale: var(--scale);
      }
    }
  
    /* ------------------------------------------------- */
    /* 装飾 */
  
    width: 100%;
    padding: 0;
  
    border: 0;
    border-radius: 16px;
    inset: 0; /* （Safari 18.6）閉じるときも上下中央を維持するために指定 */
    position: fixed; /* （Safari 18.6）閉じるときも上下中央を維持するために指定 */
  
    .dialog__inner {
      box-shadow: 0 4px 8px 0 rgb(0 0 0 / 4%);
      background-color: #fff;
      padding: 16px;
      position: relative;
      display: flex;
      justify-content: center;
    }
  
    .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);
    }
  
    &[open]::backdrop {
      opacity: 1;
      @starting-style {
        opacity: 0;
      }
    }
  }