@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 {
display: block;
width: 600px;
max-width: 100%;
height: 300px;
position: fixed;
z-index: 100;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* margin: -200px 0 0 -200px; */
background: white;
box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
}
.closed {
  display: none;
}

.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 50;
background: rgba(0, 0, 0, 0.6);
}
.modal-guts {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: auto;
padding: 20px 50px 20px 20px;
}
.modal .close-button {
position: absolute;
z-index: 1;
top: 10px;
right: 20px;
border: 0;
background: black;
color: white;
padding: 5px 10px;
font-size: 1.3rem;
}
.open-button {
border: 0;
background: lightgreen;
color: white;
padding: 10px 20px;
border-radius: 10px;
font-size: 21px;
}
/*===ここまで小林追記===========================================================*/


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

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

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