/* 【form_style.css 】【css.ryi0609】 */

/* 全体フォントを MS 明朝に統一 */
body, .form-container,
      .form-group label,
      .form-group input,
      .form-group select,
      .form-group textarea {font-family: "MS 明朝", "Hiragino Mincho ProN", rif;}

.form-container {
  width: 90%;
  max-width: 500px;
  margin: auto;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  font-family: "Yu Gothic UI", sans-serif;}

/* 見出し */
.form-container h2 {
  color: #0057D9;
  text-align: center;
  margin-bottom: 12px;
  font-size: 20px;}

/* ===============================
   ラベルと入力欄
================================ */

/* =============================
.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;   	/* ← ここだけ調整すれば項目間すべて統一 6px **
  flex-wrap: nowrap;}		/* 折り返し禁止 **

.form-group label {
  flex: 0 0 12em;		/* ラベル幅を固定(12文字) **
  margin-right: 6px;		/* 入力項目との間隔 6px **
  font-weight: bold;
  white-space: nowrap;}

.form-group input,
.form-group select,
.form-group textarea {
  flex: 1 1 auto;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  min-width: 0;}

textarea {
  width: 100%;
  resize: vertical;}

/* カレンダー専用の横並び **
.calendar-wrap {
  display: flex;
  gap: 2em;              	/* カレンダーの間隔 **
  font-family: monospace;
  margin-top: 10px;
  margin-bottom: 10px;   	/* カレンダーの下に余白を追加 **
}
.calendar-wrap > div {
  flex-shrink: 0;         	/* カレンダー幅が縮まないよう固定 **
}

/* フォームの通常項目に影響しないようにする **
.form-group {
  display: block;        	/* ← 念のため縦並びを保証 **
  margin-top: 10px;
}
================================ */

/* ============================= */
/* ラベルと入力欄（通常のフォーム項目） */
.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: nowrap;   /* 折り返し禁止 */
}

.form-group label {
  flex: 0 0 12em;      /* ラベル幅を固定(12文字) */
  margin-right: 6px;   /* 入力項目との間隔 */
  font-weight: bold;
  white-space: nowrap;
}

.form-group input,
.form-group select,
.form-group textarea {
  flex: 1 1 auto;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  min-width: 0;
}

textarea {
  width: 100%;
  resize: vertical;
}

/* カレンダー専用の横並び */
.calendar-wrap {
  display: flex;
  gap: 2em;               
  font-family: monospace;
  margin-top: 10px;
  margin-bottom: 10px;   /* カレンダーの下に余白 */
}

/* カレンダーをフォームの一項目として扱う */
.form-group.calendar-group {
  display: block;       /* カレンダー部分は縦積み */
}

/* ========【css.ryi0608】=========== */

/* 希望納期（入力欄＋下にカレンダー） */
.form-group.calendar-group {           /* この項目だけ縦積み */
  display: block;
}

.calendar-group .calendar-inline {     /* ラベル＋入力は従来通り横並び */
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.calendar-group .calendar-inline label {
  flex: 0 0 12em;                      /* 既存と同じ幅 */
  margin-right: 6px;
  font-weight: bold;
  white-space: nowrap;
}

.calendar-group .calendar-inline input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

/* ===============================
   ボタン
================================ */
.submit-btn,
.back-btn {
  width: 160px;
  padding: 10px;
  font-size: 16px;
  margin: 10px 5px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;}

.submit-btn {
  background-color: #4CAF50;
  color: white;}

.back-btn {
  background-color: #ddffdd;
  color: #333;
  border: 1px solid #aaddaa;}

/* thanks.html専用のボタン */
.btn-main {
  background-color: #0057D9;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  margin-top: 20px;}
.btn-main:hover {
  background-color: #003f9e;}
.btn-main::before {
  content: "▶ ";}

/* ====【cc_code display】==== */
.form-code {
  font-size: 0.8em;
  text-align: left;
  margin-top: 5px;
  color: #666;
}

/* ===============================
   スマホ対応
================================ */

/*
@media screen and (max-width: 600px) {
  .form-group {
    flex-direction: column;
    align-items: stretch;  }
  .form-group label {
    flex: none;
    margin-bottom: 4px;
  }}

/* スマホ時の折り返し（既存の方針に合わせる） */
@media screen and (max-width: 600px) {
  .calendar-group .calendar-inline {
    flex-direction: column;
    align-items: stretch;
  }
  .calendar-group .calendar-inline label {
    flex: none;
    margin-bottom: 4px;
  }
}
*/