:root {
 --btn-gradient-start: #ff9a9e;
 --btn-gradient-end: #fecfef;
 font-family: sans-serif; 
}

/*いいねモーダル表示用設定*/
/* 呼び出しボタンのデザイン */
.nice-button {
 background: linear-gradient(135deg, var(--btn-gradient-start) 0%, var(--btn-gradient-end) 100%);
 color: white; border: none; padding: 10px 15px; border-radius: 25px;
 font-weight: bold; cursor: pointer;
 transition: transform 0.2s;
}
.nice-button:hover {
 transform: scale(1.05);
 }

/*テキスト風ボタンを使うならこちらをbuttonに設定*/
.txt-button {
 background: none;
 border: none;
 padding: 0;
 margin: 0;
 cursor: pointer;
 font: inherit;
 color: inherit;
 display: inline;
 vertical-align: baseline;
}
/* テキスト風ボタンのホバー時の挙動 */
.txt-button:hover {
 text-decoration: none;
 color: blue; /* 必要に応じてホバー色を指定 */
 }

/* モーダルの背景 */
.clap-modal-overlay {
 display: none;
 position: fixed;
 top: 0; left: 0;
 width: 100%;
 height: 100%;
 background: var(--btn-gradient-end);
 z-index: 9999;
 backdrop-filter: blur(3px);
 align-items: center; justify-content: center;
}
/* モーダルの白い箱（サイズを変えたいならここ） */
.clap-modal-content {
 background: #fff;
 width: 90%;
 max-width: 480px;
 height: 480px;
 border-radius: 25px;
 position: relative;
 overflow: hidden;
 animation: modalPop 0.2s ease-out;
}
@keyframes modalPop {
 from { transform: scale(0.8); opacity: 0; }
 to { transform: scale(1); opacity: 1; }
}

/* 閉じるボタン */
.clap-close-btn {
 position: absolute;
 top: 10px;
 right: 15px;
 background: none;
 border: none;
 font-size: 24px;
 color: var(--btn-gradient-start);
 cursor: pointer; z-index: 10;
}
/* 中身のPHPを表示するフレーム */
#clapIframe {
 width: 100%; height: 100%;
 }