.c-dialog-container{
  position: relative;
  width: 100%;
  min-height: 600px;
}
.c-dialog-wrapper{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  top: 0;
  left: 0;
  /* storybook上の見た目をデザインと合わせるための記述 実際の使用時には不要*/
  width: 100%;
  height: 100%;
  /* padding-block: 133px;
  @media screen and (max-width:767px){
    padding-block: 178px;
  } */
  /* ここまで */
  /* storybookでの表示のためにコメントアウトした記述 実際の使用時にはこちらを使う */
  /* width: 100vw;
  height: 100dvh;
  position: fixed;
  top: 0;
  height: 0; */
  
  
  .c-dialog-bg{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--color-dialog-bg);
    z-index: -1;
    opacity: 0.7;
    cursor: pointer;

  }
  .c-dialog-inner{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    max-width: 400px;
    width: calc(100% - (2 * 16px));
    padding-inline: 52.5px;
    padding-block: 24px;
    background-color: var(--color-white);
    @media screen and (max-width:767px){
      padding-inline: 24px;
    }
    .c-dialog-icon{
      max-width: 80px;
    }
    .c-dialog-title,
    .c-dialog-text{
      text-align: center;
    }
    .c-dialog-title{
      font-weight: 700;
      font-size: 20px;
      line-height: 30px;
      letter-spacing: 0.8px;
      color: var(--color-text);
      white-space: normal;
      width: 100%;
    }
    .c-dialog-text{
      font-weight: 400;
      font-size: 16px;
      line-height: 27.2px;
      letter-spacing: 0.8px;
      color: var(--color-text);
      width: 100%;
      ul{
        list-style-type: disc;
        li{
          list-style-position: inside;
        }
      }
    }
  }
}
/* ダークモード */
.dark{
  .c-dialog-bg{
    background-color: var(--color-dialog-bg-operation);
  }
  .c-dialog-wrapper{
    background-color: var(--color-black);
  }
  .c-dialog-inner{
    background-color: var(--color-black-operation);
    .c-dialog-icon{
      filter: invert(100%);
    }
    .c-dialog-title,
    .c-dialog-text{
      color: var(--color-white-operation);
    }
  }
}