#popup-modal {
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}

/* iframeを中央に配置し、閉じるボタンとのバランスをとる */
#popup-modal iframe {
    width: 70%; /* 幅 */
    height: 70vh; /* 高さ */
    margin: auto; /* 自動的に中央に配置 */
    display: block; /* ブロック表示 */
    position: relative; /* 相対位置指定 */
    top: 50px; /* 上から50pxにオフセット */
}

/* 閉じるボタンのスタイル */
button.close-modal {
    position: absolute; /* 絶対位置指定 */
    top: 150px; /* 上から10pxの位置 */
    right: 10px; /* 右から10pxの位置 */
    padding: 8px 16px; /* パディング */
    font-size: 16px; /* フォントサイズ */
    background-color: #ff4545; /* 背景色（赤色） */
    color: #ffffff; /* 文字色は白 */
    border: none; /* ボーダーなし */
    border-radius: 5px; /* 角を丸く */
    cursor: pointer; /* カーソルをポインタに */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 軽いシャドウを追加 */
    transition: background-color 0.3s ease; /* 背景色の変化を滑らかに */
}

/* 閉じるボタンのホバー時のスタイル */
.close-modal:hover {
    background-color: #ff2e2e; /* ホバー時の背景色をより濃い赤色に */
}




/* コピーボタンのスタイル */
.custom-copy-button {
    width: 100%; /* ボタンをコンテナの全幅にする */
    text-align: center; /* テキストを中央寄せ */
    background: linear-gradient(145deg, #57a88a, #65C294); /* グラデーション背景 */
    color: #ffffff; /* 文字色 */
    padding: 10px 20px; /* パディング */
    border-radius: 5px; /* 角の丸み */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* ソフトシャドウ */
    transition: all 0.3s ease; /* アニメーション効果 */
    cursor: pointer; /* カーソルをポインタに */
    text-transform: uppercase; /* 大文字に */
    letter-spacing: 1px; /* 文字の間隔 */
    font-size: 1.2em; /* フォントサイズ */
    border: none; /* ボーダーなし */
}

/* ボタンホバー時のスタイル */
.custom-copy-button:hover {
    width: 100%; /* ボタンをコンテナの全幅にする */
    padding: 10px 20px; /* パディング */
    background: linear-gradient(145deg, #65C294, #57a88a); /* グラデーションを反転 */
    box-shadow: 0 6px 8px rgba(0,0,0,0.15); /* シャドウを強調 */
}



/* 投稿リスト内のボタンサイズ */
.postlist-button-container .postlist-button {
    width: 100%; /* 幅を自動に設定 */
	 max-width:350px;
    padding: 5px 12px; /* パディングを調整 */
    font-size: 12px; /* フォントサイズを小さく設定 */
    background-color: #007bff; 
    color: #ffffff; 
    border: none; 
    cursor: pointer; /* カーソルをポインタに */
    border-radius: 5px; /* ボタンの角を丸く */
    transition: background-color 0.3s ease; /* 背景色の変化を滑らかに */
}

/* 投稿リストのボタンの幅を設定する */
.postlist-button-container {
    width: 100%; /* 幅を自動に設定 */
	 max-width:350px;
    margin-left: auto;
    margin-right: auto;
    display: flex; /* ボタンを横並びに表示 */
    justify-content: center; /* 中央寄せ */
    gap: 10px; /* ボタン間の間隔 */
    padding: 10px;
    margin-top: 10px;
}

.postlist-button:hover {
    background-color: #0056b3; /* ホバー時の背景色 */
}