body {
    font-family: Arial, sans-serif;
    text-align: center; 
    background-image: url("s-brick008.gif");
  }

/* ヘッダーのスタイル */
header {
    background-color: #333; /* 背景色 */
    color: white; /* 文字色 */
    padding: 15px 20px; /* パディング */
    font-size: 24px; /* フォントサイズ */
    text-align: center; /* 中央揃え */
}

header:focus {
    outline: none; /* フォーカス時の枠線を無効化 */
    background-color: inherit; /* 元の背景色を維持 */
    color: inherit; /* 元の文字色を維持 */
}

header h1 {
    margin: 0; /* タイトルの余白をリセット */
    font-weight: normal; /* フォントの太さを通常に設定 */
}

#cal{
    background-color: #5b39f1; /* 背景色 */
    color: white; /* 文字色 */
    border: none; /* ボーダーを削除 */
    padding: 6px 20px; /* パディング */
    text-align: center; /* テキストの中央揃え */
    font-size: 16px; /* フォントサイズ */
    border-radius: 5px; /* 角を丸める */
    cursor: pointer; /* ポインター変更 */
    transition: background-color 0.3s, box-shadow 0.3s; /* ホバー時のトランジション */
}

#printButton{
    background-color: #3fd6fc; /* 背景色 */
    color: rgb(43, 40, 40); /* 文字色 */
    border: none; /* ボーダーを削除 */
    padding: 6px 20px; /* パディング */
    text-align: center; /* テキストの中央揃え */
    font-size: 16px; /* フォントサイズ */
    border-radius: 5px; /* 角を丸める */
    cursor: pointer; /* ポインター変更 */
    transition: background-color 0.3s, box-shadow 0.3s; /* ホバー時のトランジション */
}

#clearButton{
    background-color: #f13995; /* 背景色 */
    color: white; /* 文字色 */
    border: none; /* ボーダーを削除 */
    padding: 6px 20px; /* パディング */
    text-align: center; /* テキストの中央揃え */
    font-size: 16px; /* フォントサイズ */
    border-radius: 5px; /* 角を丸める */
    cursor: pointer; /* ポインター変更 */
    transition: background-color 0.3s, box-shadow 0.3s; /* ホバー時のトランジション */
}

/* ボタンのスタイル */
button {
    background-color: #4CAF50; /* 背景色 */
    color: white; /* 文字色 */
    border: none; /* ボーダーを削除 */
    padding: 10px 20px; /* パディング */
    text-align: center; /* テキストの中央揃え */
    font-size: 16px; /* フォントサイズ */
    border-radius: 5px; /* 角を丸める */
    cursor: pointer; /* ポインター変更 */
    transition: background-color 0.3s, box-shadow 0.3s; /* ホバー時のトランジション */
}

button:hover {
    background-color: #45a049; /* ホバー時の背景色 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* ホバー時のシャドウ */
}

button:active {
    background-color: #3e8e41; /* クリック時の背景色 */
}

/* 深夜加給入力欄のスタイル */
#nightInputs {
    display: none; /* 初期状態は非表示 */
    margin: 15px 0; /* 上下の余白 */
    padding: 10px; /* 内部余白 */
    border: 1px solid #ccc; /* 枠線 */
    border-radius: 5px; /* 角を丸める */
    background-color: #f9f9f9; /* 背景色 */
}

/* テーブルスタイル */
table {
    width: 100%; /* テーブル幅を全体に拡張 */
    border-collapse: collapse; /* 枠線の重なりを防ぐ */
    margin-top: 20px; /* 上余白 */
}

table th, table td {
    border: 2px solid #2460ad; /* セルの枠線 */
    text-align: left; /* 左揃え */
    padding: 8px; /* セル内の余白 */
}

table th {
    background-color: #2af7c3; /* ヘッダー背景色 */
    color: rgb(0, 0, 0); /* ヘッダー文字色 */
}

/* ホバー時の行ハイライト */
table tr:hover {
    background-color: #f1f1f1; /* 行ホバー時の背景色 */
}

/* 入力欄の基本スタイル */
input[type="text"], input[type="number"], select {
    width: 250px; /* 固定幅を指定 */
    max-width: 100%; /* 最大幅を親要素に合わせる */
    padding: 8px; /* 内側余白 */
    margin: 10px 0; /* 上下の余白 */
    border: 1px solid #ccc; /* 枠線 */
    border-radius: 5px; /* 角を丸める */
    box-sizing: border-box; /* ボックスサイズを調整 */
    font-size: 16px; /* フォントサイズ */
}

/* フォーカス時のスタイル */
input:focus, select:focus {
    outline: none; /* フォーカス枠線を非表示 */
    border-color: #4CAF50; /* フォーカス時の枠線色 */
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); /* フォーカス時の影 */
}

#finalTotalPay{
    background-color: #b6c7f7; /* 背景色 */
    color: rgb(20, 1, 37); /* 文字色 */
    padding: 6px 20px; /* パディング */
    text-align: center; /* テキストの中央揃え */
    font-size: 16px; /* フォントサイズ */
    border-radius: 5px; /* 角を丸める */
    cursor: pointer; /* ポインター変更 */
    transition: background-color 0.3s, box-shadow 0.3s; /* ホバー時のトランジション */
}