@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
#modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  width: 340px;
  display: none;

  .modal-content {
    margin: 10px 10px;

    .event-button-wrap {
      display: flex;
      gap: 8px;
      justify-content: flex-end;

      #delete-event {
        margin-right: auto;
        background: #e74c3c;
        color: white;
        border: none;
        border-radius: 5px;
        padding: 3px 5px;
        cursor: pointer;
        transition: background 0.2s;
      }
      #delete-event:hover {
        background: #ad392d;
      }

      #save-event,
      #close-modal {
        background: #2196f3;
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 3px 5px;
        /*margin: 3px 3px;*/
        cursor: pointer;
        /*font-size: 15px;*/
        transition: background 0.2s;
      }

      #save-event:hover,
      #close-modal:hover {
        background: #1976d2;
      }
    }
  }
}

/* ヘッダー部分（ドラッグ用） */
#modal-header {
  cursor: move;
  background: #1976d2;
  color: #fff;
  padding: 8px 12px;
  font-weight: bold;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* 内容部分 */
#modal-body {
  padding: 15px;
}

#nav-controls {
  text-align: center;
  margin: 0 8px 8px 8px;

  button {
    background: #2196f3;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    margin: 3px 3px;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.2s;
  }
}

#nav-controls button:hover {
  background: #1976d2;
}

#view-controls {
  text-align: center;
  margin: 0 8px 8px 8px;

  button {
    background: #19b63f;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    margin: 3px 3px;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.2s;
  }
}

#view-controls button:hover {
  background: #13892f;
}

/*##### フッター #####*/
#footer {
  display: none;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px) {
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px) {
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px) {
  /*必要ならばここにコードを書く*/
}