@charset "UTF-8";
/* CSS Document */

/* =========================
モーダルを開くリンク
========================= */
.modal-open {
display:none;
align-items: center;
justify-content: center;
width: 260px;
height: 56px;
margin: 10px;
font-size: 16px;
font-weight: bold;
color: #fff;
background: #000;
text-decoration: none;
cursor: pointer;
}

/* =========================
モーダル背景
========================= */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
visibility: hidden;
transition: .3s;
text-align: center;
box-sizing: border-box;
z-index: 5;
}

/* 表示状態 */
.modal.is-active {
display: block;
opacity: 1;
visibility: visible;
}

/* 縦中央寄せ用 */
.modal::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}

/* =========================
モーダル本体
========================= */
.modal-container {
display: inline-block;
vertical-align: middle;
background: #fff;
max-width: 600px;
width: 90%;
position: relative;
text-align: left;
}

/* 閉じるボタン */
.modal-close {
position: absolute;
top: -16px;
right: -16px;
width: 32px;
height: 32px;
border-radius: 50%;
background: #000;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

/* コンテンツ */
.modal-content {
padding: 20px;
line-height: 1.8;
}

.modal-content h3{
text-align: center;
line-height: 1;
margin: 0 0 20px;
}

.modal-content p{
font-size: .8rem;
}