/* ▼▼ 全体背景：薄いグレーに統一 ▼▼ */
body {
  background-color: #f5f5f5 !important;
  color: #333;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

/* ▼▼ フォーム全体の中央寄せと背景 ▼▼ */
.form-bottom {
  max-width: 700px;
  margin: 0 auto;
  padding: 40px 20px;
  border-radius: 12px;
  background-color: #f5f5f5;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* ▼▼ ヘッダー画像 ▼▼ */
.form-top {
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: 150px;
  background-color: #f5f5f5;
}
@media (min-width: 768px) {
  .form-top {
    height: 280px;
  }
}
.form-top .form-top-left,
.form-top .form-top-right {
  display: none;
}

/* ▼▼ 質問ブロック ▼▼ */
.row {
  display: block;
  margin-bottom: 25px;
}

/* ▼▼ 質問見出し（緑のまま） ▼▼ */
.col-sm-4 {
  background-color: #269966;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  padding: 12px 14px;
  border-radius: 6px 6px 0 0;
}

/* ▼▼ 入力欄ブロック（グレー背景に統一） ▼▼ */
.col-sm-8 {
  display: block;
  background-color: #f5f5f5;
  padding: 16px 14px;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: inset 0 0 3px rgba(0,0,0,0.03);
}

/* ▼▼ 入力フィールド（白） ▼▼ */
.form-control {
  height: auto;
  padding: 12px;
  font-size: 15px;
  border: 1px solid #bbb;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  color: #333;
  margin-top: 8px;
}
textarea.form-control {
  min-height: 100px;
  resize: vertical;
}

/* ▼▼ プレースホルダー ▼▼ */
::placeholder {
  color: #888;
  white-space: pre-line;
  font-size: 14px;
}

/* ▼▼ 送信ボタン ▼▼ */
.btn-primary {
  background-color: #269966;
  color: #fff;
  font-size: 16px;
  padding: 12px;
  border: none;
  border-radius: 6px;
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 40px auto 0;
}

/* ▼▼ スマホ対応：すべてグレーを維持 ▼▼ */
@media screen and (max-width: 767px) {
  .col-sm-4,
  .col-sm-8 {
    width: 100%;
    padding: 10px 12px;
  }
  .form-bottom {
    padding: 20px 10px;
    box-shadow: none;
    border-radius: 0;
    background-color: #f5f5f5;
  }
}

/* ▼▼ 縦並び強制（PC含む） ▼▼ */
@media (min-width: 768px) {
  .col-sm-4,
  .col-sm-8 {
    display: block;
    width: 100% !important;
  }
}
/* ▼▼ 縦並び強制（PC含む） ▼▼ */
@media (min-width: 768px) {
  .col-sm-4,
  .col-sm-8 {
    display: block;
    width: 100% !important;
  }
}
/* ▼▼ ラジオボタン整列の修正 ▼▼ */
input[type="radio"],
input[type="checkbox"] {
  vertical-align: middle;
  margin-right: 6px;
  transform: translateY(1px);
}
label {
  font-size: 15px;
  line-height: 1.5;
  display: inline-block;
}

/* === 「目次」（name: description_9）だけ、画像を本文幅いっぱいに === */
/* <img> で入っている場合 */
.form-bottom [id*="description_9"] img,
.form-bottom [name="description_9"] img,
.form-bottom [data-name="description_9"] img,
.form-bottom [data-swatch-name="description_9"] img,
.form-bottom #description_9 img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  float: none !important;
}

/* 背景画像で入っている場合（div/figure 等に background-image が付くケース） */
.form-bottom [id*="description_9"] [style*="background-image"],
.form-bottom [name="description_9"] [style*="background-image"],
.form-bottom [data-name="description_9"] [style*="background-image"],
.form-bottom [data-swatch-name="description_9"] [style*="background-image"],
.form-bottom #description_9 [style*="background-image"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important; /* 全体表示。トリミングで良ければ cover に変更 */
  aspect-ratio: 16 / 9;                /* 画像比率に合わせて調整可（例 4/3, 3/2） */
  border-radius: 6px;
}

/* 親要素が inline で幅固定されている場合の保険 */
.form-bottom [id*="description_9"] figure[style*="width"],
.form-bottom [name="description_9"] figure[style*="width"],
.form-bottom [data-name="description_9"] figure[style*="width"],
.form-bottom [data-swatch-name="description_9"] figure[style*="width"] {
  width: 100% !important;
  max-width: 100% !important;
}