body {
  font-family: sans-serif;      /* サンセリフ体を使用 */
  margin: 0;                    /* ページ全体の余白を0に設定 */
  padding: 0;                   /* ページ全体の内側の余白を0に設定 */
  text-align: center;           /* テキストを中央揃えに設定 */
  font-size: 1.1em;             /* 文字大きめ */
  background-color: #97bde4;  /* 背景色を水色に設定 */
}

.button{
  /* display: inline-block; は、CSSで要素の表示方法を指定するプロパティです。これは以下のようなブロック要素とインライン要素のいいとこ取りのような挙動をします。*/
  display       : inline-block;               /* インラインブロック */
  border-radius : 10%;                        /* 角丸       */
  font-size: 1.0em;                           /* 少し大きめの文字 */
  text-align    : center;                     /* 文字位置   */
  cursor        : pointer;                    /* カーソル   */
  padding       : 10px 10px;                  /* 余白       */
  background    : #a0dbc5;                  /* 背景色     */
  /* background    : #dab778; */              /* 背景色     */
  color         : #000000;                  /* 文字色     */
  line-height   : 1em;                        /* 1行の高さ  */
  transition    : .3s;                        /* なめらか変化 */
  box-shadow    : 6px 6px 3px #666666;      /* 影の設定 */
  border        : 2px solid #000066;        /* 枠の指定 */
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ロゴと見出し部分 */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.header {
  /* border: 2px solid #333; */   /* 全体を囲む線（太め） */
  display: flex;                  /* フレックスボックスでレイアウト */
  justify-content: center;        /* 横方向に中央揃え */
  align-items: center;            /* 縦方向に中央揃え */
  padding: 0.5em;                 /* 内側の余白を1emに設定 */
  /* padding: 1em; */             /* 内側の余白を1emに設定 */
}
/* ロゴ */
.header img {
  height: 30px;                   /* 画像の高さを20pxに設定 */
  align-items: center ;           /* 縦方向に中央揃え */
  margin-right: 0.5em;            /* 画像の右に1emの余白を設定 */
}

/* title は HTML の既存タグ名（<title>）として予約されているものです。
.title は クラス名です。　※ドットが付くとクラス名！
header title と書くと、「.header の中にある <title> タグ」を対象にしてしまいます。
ですが、実際のHTMLは <div class="title">...</div> なので、これは**title クラスを持つ要素**です。 */
.header .title {
  margin-top: 0.3em;              /* 上に1emの余白を設定 */
  font-size: 1.2em;               /* フォントサイズを1.2emに設定 */
  font-weight: bold;              /* 太字に設定 */
}

.title {
  margin-top: 1em;                /* 上に1emの余白を設定 */
  font-size: 1.2em;               /* フォントサイズを1.2emに設定 */
  font-weight: bold;              /* 太字に設定 */
}

.subtext {
  margin-top: 3.5em;            /* 上に3.5emの余白を設定 */
}

.form-area {
  display: flex;                /* フレックスボックスでレイアウト */
  flex-direction: column;       /* 縦並びに設定 */
  align-items: center;          /* 中央揃え */
  gap: 1em;                     /* 子要素間の余白を1emに設定 */
  width: 100%;                  /* 横幅を100%に設定 */
  max-width: 80%;               /* 最大幅を80%に制限 */
  margin-top: 1em;              /* 上に1emの余白を設定 */
  margin-left: auto;            /* 左の余白を自動設定（中央揃え） */
  margin-right: auto;           /* 右の余白を自動設定（中央揃え） */
}

.form-area select {
  width: 100%; /* 横幅を100%に設定 */
  padding: 0.5em; /* 内側の余白を0.5emに設定 */
  font-size: 1.1em; /* フォントサイズを1.1emに設定 */
  /* flex-grow: 1; */ /* 利用可能なスペースを子要素で分ける（コメントアウトされている） */
}

.form-area button {
  /* background-color: #4CAF50; */ /* 背景色（コメントアウトされている） */
  color: rgb(0, 0, 0); /* 文字色を黒に設定 */
  /* border: none; */ /* 枠線なし（コメントアウトされている） */
  padding: 12px 24px; /* 内側の余白（縦12px、横24px） */
  font-size: 16px; /* フォントサイズを16pxに設定 */
  cursor: pointer; /* マウスカーソルをポインタに変更 */
  border-radius: 8px; /* 角を丸くする */
  transition: background-color 0.3s ease; /* 背景色の変更をスムーズに */
}

/* message-boxは現在未使用 */
.message-box {
  padding: 1em; /* 内側の余白を1emに設定 */
  background-color: #e0f7fa; /* 背景色を薄い青に設定 */
  color: #00796b; /* 文字色をダークグリーンに設定 */
  border: 1px solid #00796b; /* 線をダークグリーンに設定 */
  border-radius: 5px; /* 角を丸くする */
  text-align: center; /* テキストを中央揃え */
  margin: 1em auto; /* 上下に1emの余白、左右中央揃え */
  max-width: 300px; /* 最大幅を300pxに設定 */
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ヘッダー部の利用者、社用車表示エリア（外枠全体のデザイン） */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.info-box {
  display: table;                 /* 表のようにレイアウト */
  border: 2px solid #333;       /* 全体を囲む線（太め） */
  border-collapse: collapse;      /* 線を重ねずに統一表示 */
  font-size: 1.1em;               /* 少し大きめの文字 */
  margin-bottom: 6px;             /* 下との間隔 */
  width: 80%;                     /* 横幅 80% */
  max-width: 400px;               /* 最大幅を制限（スマホ向け） */
  margin-left: auto;              /* 左余白を自動にして中央寄せ */
  margin-right: auto;             /* 右余白を自動にして中央寄せ */
}
/* ▼ 各行（社員名行、社用車名行） */
.info-row {
  display: table-row;                 /* 行をテーブル形式で表示 */
  border-bottom: 1px solid #333;    /* 各行の区切り線（横） */
}
/* ▼ 見出しセル */
.info-label {
  display: table-cell;                  /* セルとして表示 */
  background-color: #e0e0e0;          /* グレー背景 */
  text-align: center;                   /* 中央寄せ */
  vertical-align: middle;               /* 上下中央寄せ */
  padding: 5px;                         /* 余白 */
  width: 30%;                           /* 横幅30% */
  font-weight: bold;                    /* 太字で見出しっぽく */
  border-right: 1px solid #333;       /* 見出しと値の間の線（縦） */
}
/* ▼ 値セル（実際の社員名・社用車名） */
.info-value {
  display: table-cell;                  /* セルとして表示 */
  background-color: #f9f9f9;          /* 薄い背景色 */
  text-align: left;                     /* 左寄せ */
  padding: 5px;                         /* 余白 */
  width: 70%;                           /* 残り幅 */
}
/* ▼ 最後の行だけ下線なしにする（見た目調整） === 未使用 === */
.info-box .info-row:last-child {
  border-bottom: none; /* 最後の行には下線を表示しない */
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* 走行記録一覧のボタン */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.button-row {
  display: flex;                              /* フレックスボックスでレイアウト */
  /* border: 2px solid #333;                  /* 全体を囲む線（太め） */
  justify-content: space-around;              /* 両端にスペースを均等に配置 */
  margin-bottom: 10px;                        /* 下に10pxの余白を設定 */
}
.button-row .button{
  /* display: inline-block; は、CSSで要素の表示方法を指定するプロパティです。これは以下のようなブロック要素とインライン要素のいいとこ取りのような挙動をします。*/
  display       : inline-block;               /* インラインブロック */
  border-radius : 10%;                        /* 角丸       */
  font-size: 1.0em;                           /* 少し大きめの文字 */
  text-align    : center;                     /* 文字位置   */
  cursor        : pointer;                    /* カーソル   */
  padding       : 10px 10px;                  /* 余白       */
  background    : #a0dbc5;                  /* 背景色     */
  /* background    : #dab778; */                /* 背景色     */
  color         : #000000;                  /* 文字色     */
  line-height   : 1em;                        /* 1行の高さ  */
  transition    : .3s;                        /* なめらか変化 */
  box-shadow    : 6px 6px 3px #666666;      /* 影の設定 */
  border        : 2px solid #000066;        /* 枠の指定 */
}
.button-row .delete-button{
  /* display: inline-block; は、CSSで要素の表示方法を指定するプロパティです。これは以下のようなブロック要素とインライン要素のいいとこ取りのような挙動をします。*/
  display       : inline-block;               /* インラインブロック */
  border-radius : 8%;                         /* 角丸       */
  font-size: 0.7em;                           /* 少し大きめの文字 */
  text-align    : center;                     /* 文字位置   */
  cursor        : pointer;                    /* カーソル   */
  padding       : 4px 4px;                  /* 余白       */
  background    : #a0dbc5;                  /* 背景色     */
  /* background    : #dab778; */                /* 背景色     */
  color         : #000000;                  /* 文字色     */
  line-height   : 0.7em;                        /* 1行の高さ  */
  transition    : .3s;                        /* なめらか変化 */
  box-shadow    : 4px 4px 2px #666666;      /* 影の設定 */
  border        : 1px solid #000066;        /* 枠の指定 */
}

.button-cell {
    flex: 1;  /* 均等幅 */
    text-align: center;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* 走行記録一覧の一覧 */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
table.drive-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

/* 一覧のヘッダー部 ↓↓↓↓ */
.drive-table th, .drive-table td {
  border: 1px solid #999;
  padding: 6px;
  /* padding: 8px; */
}
.drive-table th {
  background-color: #f0f0f0;
  text-align: center;
}
/* 一覧のヘッダー部 ↑↑↑↑ */

.drive-table .td-col1 {
  width: 20%;
  background-color: #f1ffd0;
  /* background-color: #cddef7; */
  text-align: center;
  padding: 1px;
}

.drive-table .td-col2 {
  background-color: #f1ffd0;
  /* background-color: #cddef7; */
}

.drive-table td .line1 {
  font-size: 1.1em;
  font-weight: bold;
  text-align: left;
}

.drive-table td .line2 {
  /* color: #555; */
  font-size: 1.1em;
  text-align: left;
}

.drive-table td .line3 {
  /* color: #555; */
  font-size: 1.1em;
  text-align: left;
}

.edit-btn {
  display       : inline-block;
  border-radius : 10%;          /* 角丸       */
  font-size: 1.0em;           /* ← 少し大きく */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  width: 60px;    /* 幅を100ピクセルに */
  height: 35px;    /* 高さを40ピクセルに */
  /* padding       : 0px 0px; */   /* 余白       */
  /* padding       : 24px 24px; */  /* 余白       */
  /* background    : #EEEEEE; */    /* 背景色     */
  background    : #a0dbc5;     /* 背景色     */
  color         : #000000;     /* 文字色     */
  /* line-height   : 1.5em; */       /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 4px 4px 2px #666666;  /* 影の設定 */
  border        : 1px solid #000066;    /* 枠の指定 */
  margin: 1px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* 走行記録入力 */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
table.input-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
}
.input-table th {
  width: 40%;
  border: 1px solid #999;
  /* background-color: #f1ffd0; */
  background-color: #f1ecbc;
  padding: 6px;
}

.input-table .input1 {
  font-size: 1.3em;           /* ← 少し大きく */
  width: 75%;
}
.input-table .input2 {
  font-size: 1.3em;           /* ← 少し大きく */
  text-align: center;
  width: 40%;
}
.input-table .input3 {
  font-size: 1.3em;           /* ← 少し大きく */
  text-align    : right;      /* 文字位置   */
  width: 45%;
}
.input-table .input4 {
  font-size: 1.3em;           /* ← 少し大きく */
  width: 75%;
}
.input-table .input5 {
  font-size: 1.3em;           /* ← 少し大きく */
  width: 85%;
}
.input-table .input6 {
  font-size: 1.3em;           /* ← 少し大きく */
  width: 85%;
}
.input-table .input7 {
  font-size: 1.3em;           /* ← 少し大きく */
  text-align    : right;      /* 文字位置   */
  width: 40%;
}
.input-table .input8 {
  font-size: 1.2em;           /* ← 少し大きく */
  width: 75%;
}
.input-table .input9 {
  font-size: 1.2em;           /* ← 少し大きく */
  width: 75%;
}

.input-table .td-col1 {
  border: 1px solid #999;
  padding: 6px;
  background-color: #f1ffd0;
  /* background-color: #cddef7; */
  /* font-size: 1.2em;            ← 少し大きく */
  text-align: left;
  padding: 1px;
}

.input-table .td-col2 {
  border: 1px solid #999;
  background-color: #f1ffd0;
  /* background-color: #cddef7; */
  /* font-size: 1.2em;            ← 少し大きく */
  text-align: left;
  padding: 1px;
}
.input-table .td-col3 {
  border: 1px solid #999;
  background-color: #f1ffd0;
  /* background-color: #cddef7; */
  /* font-size: 1.2em;            ← 少し大きく */
  text-align: left;
  padding: 1px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* メッセージ一覧の一覧 */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
table.msg-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

/* 一覧のヘッダー部 ↓↓↓↓ */
.msg-table th, .msg-table td {
  border: 1px solid #999;
  padding: 6px;
  /* padding: 8px; */
}
.msg-table th {
  background-color: #f0f0f0;
  text-align: center;
}
/* 一覧のヘッダー部 ↑↑↑↑ */

.msg-table .td-col1 {
  width: 20%;
  background-color: #f1ffd0;
  /* background-color: #cddef7; */
  text-align: center;
  padding: 1px;
}

.msg-table .td-col2 {
  background-color: #f1ffd0;
  /* background-color: #cddef7; */
}

.msg-table td .line1 {
  font-size: 1.1em;
  font-weight: bold;
  text-align: left;
}

.msg-table td .line2 {
  /* color: #555; */
  font-size: 1.1em;
  text-align: left;
}

.msg-table td .line3 {
  /* color: #555; */
  font-size: 1.1em;
  text-align: left;
}

.confirm-btn {
  display       : inline-block;
  border-radius : 10%;          /* 角丸       */
  font-size: 1.0em;           /* ← 少し大きく */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  width: 60px;    /* 幅を100ピクセルに */
  height: 35px;    /* 高さを40ピクセルに */
  /* padding       : 0px 0px; */   /* 余白       */
  /* padding       : 24px 24px; */  /* 余白       */
  /* background    : #EEEEEE; */    /* 背景色     */
  background    : #a0dbc5;     /* 背景色     */
  color         : #000000;     /* 文字色     */
  /* line-height   : 1.5em; */       /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 4px 4px 2px #666666;  /* 影の設定 */
  border        : 1px solid #000066;    /* 枠の指定 */
  margin: 1px;
}