*{
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', sans-serif;
}

#input-box{
    width: 10%;
    overflow: auto;
}

body{
    height: 97.7vh;
    width: 100%;
    background: url('img/back3.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}


.title{
    margin-top: 1rem;
}

.text-box{
    margin-top: 1rem;
    max-width: 80%;
    margin-left: 10%;
}

p{
    font-size: 1.5rem;
    margin-top: 0.5rem;
    font-weight: bold;
}

.submit-btn{
    width: 100px;
    padding: 5px;
    background: white;
    font-size: 1rem;
    border-radius: 10px;
    cursor: pointer;
    border-color: black;
    margin : 1rem auto;
    transition: 0.2s ease;
    font-weight: bold;
}

.submit-btn:hover{
    transform: scale(1.3);
    transition: 0.2s ease;
}

textarea{
    border: 2px solid black;
    background: transparent;
    border-radius: 5px;
    color: black;
    font-weight: bold;
    padding: 2px;
    resize: none;
}

textarea:active{
    outline: none;
    border: 2px solid white;
}

textarea:focus{
    outline: none;
    border: 2px solid white;
    background: white;
}

.textbox-color{
    outline: none;
    border: 2px solid white;
    background: white;
}

textarea::-webkit-scrollbar-track{
	background-color: #e2e2e2;
}

textarea::-webkit-scrollbar{
	width: 4px;
	background-color: #F5F5F5;
}

textarea::-webkit-scrollbar-thumb{
	border-radius: 100px;
	background-color: #545454;
}

textarea::placeholder{
    font-size: 1rem;
    text-align: center;
    font-weight: bold;
    color: black;
}

@media(max-width: 935px){
    textarea{
        width: 100%;
    }
}