body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9; /* 明るい背景色 */
}

main {
    display: flex;
    justify-content: center; /* 中央揃え */
    margin: 40px 0; /* 上下の余白を追加 */
}

.purchase-container {
    background-color: white;
    border-radius: 10px; /* 角を丸く */
    padding: 20px; /* パディングを減らす */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* シャドウを少し強調 */
    width: 350px; /* 幅を調整 */
    text-align: left; /* テキストを左揃え */
}

.product-info {
    margin-bottom: 15px; /* 余白を調整 */
}

h1 {
    font-size: 22px; /* タイトルサイズを調整 */
    color: #333; /* ダークグレー */
    margin-bottom: 15px; /* 下の余白 */
}

label {
    margin-top: 10px; /* ラベルの上の余白を調整 */
    display: block;
    font-weight: bold; /* ラベルを太字 */
    color: #555; /* グレーの色 */
}

input {
    width: 100%; /* 幅を100%に設定 */
    max-width: 300px; /* 最大幅を300pxに設定 */
    padding: 10px; /* パディングを調整 */
    margin: 5px 0 15px; /* 入力間隔を調整 */
    border: 1px solid #ccc; /* 枠線の色 */
    border-radius: 5px; /* 入力欄の丸み */
    font-size: 14px; /* フォントサイズを調整 */
    transition: border 0.3s; /* フェードイン効果 */
}

input:focus {
    border-color: #007BFF; /* フォーカス時の枠線色 */
    outline: none; /* デフォルトのアウトラインを消す */
}

.purchase-button {
    background-color: #007BFF; /* ボタンの背景色 */
    color: white; /* ボタンのテキスト色 */
    border: none;
    padding: 10px; /* パディングを調整 */
    border-radius: 5px; /* 丸みをつける */
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    width: 100%; /* ボタンの幅を100%に */
    transition: background-color 0.3s; /* ホバー時の効果 */
}

.purchase-button:hover {
    background-color: #0056b3; /* ホバー時の色 */
}

#confirmation-message {
    margin-top: 20px;
    color: green;
    font-weight: bold; /* 確認メッセージを太字 */
}

@media (max-width: 480px) {
    .purchase-container {
        width: 90%; /* スマホ対応 */
    }
}