/* エディター内のブロックプレビュー */
.my-custom-calendar-preview {
    margin: 20px 0;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
}

.my-custom-textarea {
    width: 100%;  /* 幅を100%に設定 */
    min-height: 100px;  /* 最小の高さを100pxに設定 */
    max-height: 300px;  /* 最大の高さを300pxに設定 */
    white-space: pre-wrap;  /* 折り返しを許可 */
    overflow-y: auto;
}

/* カレンダーボタン */
a.my-custom-calendar-button {
    display: inline-block; /* または display: block; 試してみてください */
    padding: 12px 20px;
    border: none;
    border-radius: 1em;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-bottom: 30px; /* 必要に応じて !important を追加 */
}

/* 各色のボタンの基本背景色 */
.my-custom-calendar-button.blue { background-color: #4285F4; color: white; }
.my-custom-calendar-button.red { background-color: #DB4437; color: white; }
.my-custom-calendar-button.green { background-color: #0F9D58; color: white; }
.my-custom-calendar-button.gray { background-color: rgb(188, 188, 188); color: black; }

/* hover時の色の変更 */
.my-custom-calendar-button.blue:hover { background-color: #3076D2; color: white; }
.my-custom-calendar-button.red:hover { background-color: #C1352A; color: white; }
.my-custom-calendar-button.green:hover { background-color: #0D8649; color: white; }
.my-custom-calendar-button.gray:hover { background-color: #7c7c7c; color: black; }