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

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

/* ロゴ(イメージファイル) */
.header img {
  height                  : 30px;             /* 画像高さ */
  margin-right            : 0.3em;            /* 右寄せ */
  /* 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 {
  display                   : flex;             /* フレックスボックスでレイアウト */
  font-size                 : 1.2em;            /* フォントサイズ */
  font-weight               : bold;             /* 太字 */
  margin                    : 0;                /* 余白(外側) */
  line-height               : 1;                /* 高さ揃え */
  align-items               : center;           /* 中央揃え */
}

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

/* 「日付・専従先を選択してください」 */
.subtext {
  font-size                 : 1.1em;            /* フォントサイズ */
  margin-top                : 3.5em;            /* 上の余白を設定 */
}

/* 日付表示(デフォルトは当日日付） */
.input_day {
  margin-top                : 0.5em;            /* 上に1emの余白を設定 */
  text-align                : center;           /* テキストを中央揃えに設定 */
  font-size                 : 1.8em;            /* ← 少し大きく */
  width                     : 55%;              /* 横幅 */
}

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

/* 専従先選択プルダウン */
.form-area select {
  width                     : 100%;             /* 横幅を100%に設定 */
  padding                   : 0.2em;            /* 内側の余白を0.5emに設定 */
  font-size                 : 1.3em;            /* フォントサイズを1.1emに設定 */
  /* padding                   : 0.5em;            /* 内側の余白を0.5emに設定 */
  /* font-size                 : 1.1em;            /* フォントサイズを1.1emに設定 */
}

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

/* 「選択」ボタン */
/*.button{
  display       : inline-block;               /* インラインブロック */
/*  border-radius : 10%;                        /* 角丸       */
/*  font-size     : 1.0em;                      /* 少し大きめの文字 */
/*  text-align    : center;                     /* 文字位置   */
/*  cursor        : pointer;                    /* カーソル   */
/*  padding       : 12px 24px;                  /* 余白       */
/*  background    : #a0dbc5;                  /* 背景色     */
/*  color         : #000000;                  /* 文字色     */
/*  line-height   : 1em;                        /* 1行の高さ  */
/*  transition    : .3s;                        /* なめらか変化 */
/*  box-shadow    : 6px 6px 3px #666666;      /* 影の設定 */
/*  border        : 2px solid #000066;        /* 枠の指定 */
/*} */