body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px; /* 全体に適切な余白を設定 */
    text-align: left; /* 左揃え */
}

#base {
    margin: 0 auto;
    max-width: 800px; /* 幅を制限して中央配置が防止される */
    text-align: left; /* 必ず左揃えに */
}

h1 {
    text-align: left; /* タイトルも左揃えに統一 */
    margin-bottom: 20px; /* タイトル下の余白 */
}

p, label, strong {
    text-align: left; /* 全体の要素を左揃え */
    margin: 0;
    padding: 5px 0;
}

input, select, textarea, button {
    display: block;
    width: 100%; /* スマホと同じように幅いっぱいに */
    margin: 10px 0; /* 各要素間の余白を設定 */
    padding: 10px; /* 入力エリア内の余白 */
    box-sizing: border-box; /* パディングを含めたボックスサイズ調整 */
}

textarea {
    resize: none; /* テキストエリアのリサイズを無効化 */
}

form {
    text-align: left; /* フォーム全体を左揃え */
}

button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    width: 100%; /* スマホと同じように幅いっぱいに */
}

button:hover {
    background-color: #45a049;
}

/* 条項スタイル */
.contract-clauses {
    margin-top: 20px;
    padding-left: 0; /* 不要な左余白を削除 */
}

/* スマートフォン用スタイル */
@media screen and (max-width: 768px) {
    body {
        font-size: 1.5em; /* スマホのフォントサイズを1.5倍 */
    }

    button {
        font-size: 1.5em; /* スマホのボタンサイズを調整 */
        padding: 15px 20px; /* ボタンの余白を大きく */
    }

    h1 {
        font-size: 2em; /* タイトルも大きく */
    }
}


input, select, textarea {
    background-color: #e0f7fa; /* 薄いブルー */
    border: 1px solid #26c6da; /* ブルーの枠線 */
    padding: 8px;
    border-radius: 4px;
    font-size: 16px;
    color: #000; /* 文字色は黒 */
}

input:focus, select:focus, textarea:focus {
    background-color: #b2ebf2; /* フォーカス時の背景色 */
    border-color: #00acc1; /* フォーカス時の枠線色 */
    outline: none; /* フォーカス時のアウトラインを削除 */
}