body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    margin-top: auto;
    margin-bottom: auto;
    padding: 20px;
    display: flex;
    flex-direction: column; /* フォームとタイトルの縦並び */
    justify-content: center;
    align-items: center;
    height: 200vh; /* 高さを拡張してスクロール可能に */
    overflow: auto; /* スクロールを許可 */
    margin-bottom: 20px;
}

form {
    margin: auto;
    width: 50%; /* 横幅を80%に設定 */
    max-width: 80%; /* 最大横幅を80%に設定 */
    max-height: 100%;
    margin-bottom: 50px;
    background-color: #fffff8;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: grid;
    gap: 20px; /* フォーム要素間の隙間を広げる */
    box-sizing: border-box; /* スクロールがフォーム内で発生するようにする */
}

label {
    display: block;
    font-weight: bold;
    color: #333;
    margin-top: 20px; /* ラベルの上にスペースを追加 */
}

.required,
.optional {
    display: inline-block;
    ;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 10px;
    font-size: 12px;
    color: white;
}

.required {
    background-color: rgb(255, 107, 107);
}

.optional {
    background-color: rgb(89, 135, 252);
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
select,
textarea {
    margin: auto;
    width: 100%; /* 横幅を100%に設定 */
    max-width: 90%; /* 最大横幅を90%に設定 */
    padding: 12px;
    margin-bottom: 0; /* 下の余白をリセット */
    border: 1px solid #e7e4ce;
    border-radius: 3px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    font-size: 16px;
    display: flex;
    height: 38px; /* 縦幅を統一 */
}

/* テキストエリアの縦余白 */
textarea {
    margin: auto;
    width: 90%; /* 横幅を90%に設定 */
    max-width: 90%; /* 最大横幅を90%に設定 */
    padding: 12px;
    height: 100px; /* テキストエリアの高さ */
    margin-bottom: 10px; /* 縦余白を設定 */
}

/* 基本スタイル */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
select,
textarea {
    margin: auto;
    width: 100%; /* 横幅を100%に設定 */
    max-width: 90%; /* 最大横幅を100%に設定 */
    padding: 12px;
    margin-bottom: 10px; /* 縦余白を統一 */
    border: 1px solid #e7e4ce;
    border-radius: 3px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    font-size: 16px;
    display: flex;
    height: 38px; /* 縦幅を統一 */
}

/* テキストエリアの縦余白 */
textarea {
    width: 90%; /* 横幅を90%に設定 */
    max-width: 90%; /* 最大横幅を90%に設定 */
    height: 100px; /* 高さを設定 */
    margin-bottom: 10px; /* 縦余白を統一 */
}

/* ご希望時間帯のスタイル */
.time-container {
    display: flex;
    flex-direction: column; /* 縦に並ぶようにする */
    align-items: flex-start; /* 左揃え */
    gap: 10px; /* テキストとフォーム要素間の隙間を設定 */
    width: 100%; /* 横幅を100%に設定 */
    max-width: 100%; /* 最大横幅を100%に設定 */
    margin: 0; /* マージンをリセット */
}

/* ご希望時間帯の選択フォーム */
.time-container select {
    width: 100%; /* 横幅を100%に設定 */
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px; /* パディングを調整 */
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    font-size: 16px;
    height: 40px; /* 縦幅を少し広げる */
    line-height: 28px; /* 行間を調整してテキストを中央に配置 */
    margin-bottom: 10px; /* 縦余白を統一 */
    background-color: #fff; /* 背景色を設定 */
    vertical-align: middle; /* テキストを中央に配置 */
}

/* 出張買取希望日のスタイル */
.date-container {
    display: flex;
    flex-direction: column; /* 縦に並ぶようにする */
    align-items: flex-start; /* 左揃え */
    gap: 10px; /* テキストとフォーム要素間の隙間を設定 */
    width: 100%; /* 横幅を100%に設定 */
    max-width: 100%; /* 最大横幅を100%に設定 */
    margin: 0; /* マージンをリセット */
}

/* 出張買取希望日の入力フォーム */
.date-container input[type="date"] {
    width: 100%; /* 横幅を100%に設定 */
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 12px; /* 内側の余白を設定 */
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    font-size: 16px;
    height: 38px; /* 縦幅を統一 */
    margin-bottom: 10px; /* 縦余白を統一 */
}


@media (min-width: 601px) {
    .date-container,
    .time-container {
        flex-direction: column; /* 大きい画面でも縦に並ぶように設定 */
        margin: 0 auto; /* 横幅中央に配置 */
    }

    .date-container input[type="date"],
    .time-container select {
        width: 100%; /* 横幅を100%に設定 */
        margin-top: 10px;
    }
}

/* タイトルとサブタイトルのスタイル */
h1 {
    font-size: 24px;
    margin-bottom: 10px;
    text-align: center; /* タイトルを中央寄せ */
}

h2 {
    font-size: 16px;
    margin-bottom: 30px;
    text-align: center; /* サブタイトルを中央寄せ */
}

/* カレンダーのスタイル調整 */
.date-time-container input[type="date"] {
    background-color: #ffffff; /* 背景色を白に設定 */
    color: #333; /* テキスト色を設定 */
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 38px; /* 縦幅を統一 */
    padding: 0 10px; /* 左右のパディングを追加 */
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    font-size: 16px;
}

.date-time-container input[type="date"]::-webkit-calendar-picker-indicator {
    background-color: transparent; /* アイコンの背景色を透明にする */
    color: #333; /* アイコンの色を指定 */
    cursor: pointer; /* カーソルをポインターに設定 */
}

/* カレンダー内の選択状態の色を変更 */
.date-time-container input[type="date"]::-webkit-inner-spin-button,
.date-time-container input[type="date"]::-webkit-clear-button {
    display: none; /* スピンボタンとクリアボタンを非表示にする */
}

/* エラーメッセージのスタイル */
.error-message {
    color: red;
    font-size: 14px;
    display: none; /* 初期状態で非表示 */
    margin-bottom: 16px; /* フォーム要素との間隔 */
}