.tv-frame{
    width: 90%;
    max-width: 700px;
    margin: 20px auto;
    background: #333;
    padding: 15px;
    border-radius: 15px;
    border: 5px solid #1a1a1a;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

/*画面部分*/
.tv-screen {
    background: #111;
    height: clamp(250px, 50vh, 350px);
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    display: none;
}

.tv-screen.is-open{
    display: flex;
    justify-content: center;
    align-items: center;
    animation: tv-on 3s ease-in forwards;
}

@keyframes tv-on {
    0% {transform: scaleX(0) scaleY(0.005); filter: brightness(5);}
    50%{transform: scaleX(1) scaleY(0.005); filter: brightness(5);}
    100%{transform: scaleX(1) scaleY(1); filter: brightness(1);}

}

button{
    border-radius: 10px;
}

.buttonOn:disabled{
     background-color: #555;
    color: #888;
    cursor: not-allowed;
}

.buttonOn:not(:disabled){
     background-color: #ffca28;
    color: #333;
    
     box-shadow: 0 0 10px #ffca28;
}


.nextPage{
    padding: 10px 20px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: none;
}

.nextPage:disabled {
    background-color: #555;
    color: #888;
    cursor: not-allowed;
}

.nextPage:not(:disabled){
    background-color: #ffca28;
    color: #333;
    box-shadow: 0 0 10px #ffca28;
}
/*テレビの走査線*/
.scanline{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: 
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 4px, 3px 100%;
    pointer-events: none;
    z-index: 2;
}

/*ニューステロップ風の文字*/
/* ニューステロップ風の文字 */
.news-label {
background: #d32f2f;
color: white;
display: inline-block;
padding: 2px 20px;
/*font-weightのプロパティは文字の太さを示す*/
font-weight: bold;
font-size: 14px;
margin-bottom: 10px;
}

.tv-screen h2 {
color: #00ff00; /* レトロな緑色の文字 */
font-family: 'Courier New', Courier, monospace;
text-shadow: 0 0 5px #00ff00;
}

.content img{
position: absolute;
display: flex;
bottom: 20px;
right: 20px;
max-width: 150px;
height: auto;
}

/*画面切り替え後のテレビ表示*/

.content .woman img{
    position: absolute;
    display: flex;
    bottom: 40px;
    right: 40px;
    max-width: 230px;
    height: auto;
    z-index: 10;
}

 .womanComent{
    position: absolute;
    top: 70px;
    left: 40px;
    font-size: 30px;
    color: beige;
    z-index: 20;
}
.news-label2{
    background: #d32f2f;
    color: white;
    display: inline-block;
    position: absolute;
    padding: 2px 20px; 
    /*font-weightのプロパティは文字の太さを示す*/
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
    top: 20px;
    left: 20px;
}

.content .glandEscape {
color: #00ff00; /* レトロな緑色の文字 */
font-family: 'Courier New', Courier, monospace;
text-shadow: 0 0 5px #00ff00;
position: absolute;

top: 28px;
left: 150px;
}