.hagaki-top {
    align-items: center;
    justify-content: center;
    width: 80%;
    padding: 20px;
    margin: 100px auto 0 auto;
    text-align: center;
}

.hagaki {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fffffc; /* 薄い青色の背景 */
    margin: 0;
    padding: 0;
}

form {
    padding: 20px;
    width: 70%; /* フォームの幅を80%に設定 */
}

label, input, select, textarea {
    width: 100%; /* 全要素をフォームの幅いっぱいに広げる */
    box-sizing: border-box; /* パディングとボーダーを幅に含める */
    resize: none;
}

input[type="text"],
textarea,
select {
    padding: 10px;
    margin-bottom: 10px; /* 要素間の間隔 */
    border: 1px solid #cccccc;
    border-radius: 4px; /* 角を丸くする */
    background-color: aliceblue;
    color: #080505;
}

input[type="submit"] {
    background-color: #080505; /* ボタンの背景色 */
    color: #fffffc;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    width: 50%;
    margin: auto;
    display: block;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

input[type="submit"]:hover {
    background-color: #323232; /* ホバー時の背景色を暗くする */
}

@media screen and (max-width: 600px) {
    .hagaki {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fffffc; /* 薄い青色の背景 */
        padding: 0;
    }
}