@charset "UTF-8";
/* ==========================================================
   西田惣染工場 お問い合わせ／見積フォーム 追加スタイル
   既存 style.css（.form-inquiry）に追加して読み込む
   ========================================================== */

[hidden] { display: none !important; }

/* プレビュー用バー（本番では不要） */
.preview-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(51,51,51,.9);
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
  padding: 6px 16px;
}
.preview-bar a { color: #9fdcd8; text-decoration: underline; }

/* ---- ブロック間の余白 ------------------------------------ */
.form-inquiry .submitInfo > h2.ttl { margin-top: 80px; }
.form-inquiry .submitInfo > h3.ttl { margin: 60px 0 20px; }
.form-inquiry .submitInfo > h4.ttl { margin: 36px 0 10px; }
.form-inquiry .inquiry-direct { margin-bottom: 40px; }

/* ---- 同意チェック・送信ボタン ------------------------------ */
.form-inquiry .acceptance-area {
  margin: 60px 0 10px;
  padding: 20px 16px;
  background: #F4FAF9;
  border: 1px solid #DCEDEB;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
  font-size: 1.05em;
}
.form-inquiry .acceptance-area label { white-space: normal; padding: 0; }
.form-inquiry .acceptance-area input[type="checkbox"] {
  accent-color: #49A5A0;
  width: 1.1em;
  height: 1.1em;
  margin-right: 8px;
  vertical-align: -0.15em;
}
.form-inquiry .acceptance-area .fcr { margin-left: 6px; font-weight: normal; }
.form-inquiry .submit-area { text-align: center; }
.form-inquiry .submit-area .wpcf7-submit { margin-left: auto; margin-right: auto; }

/* ---- 入力欄の本体 ---------------------------------------- */
.form-inquiry .pBody {
  flex: 1;
  min-width: 0;
  padding: 20px 0;
}
.form-inquiry .pBlock .pBody p {
  display: block;
  width: auto;
}
.form-inquiry .opt-note {
  font-size: 0.9em;
  color: #555;
  margin: 0 0 10px;
  line-height: 1.8;
}
.form-inquiry .opt-note a,
.form-inquiry .notice a { color: #49A5A0; text-decoration: underline; }

.form-inquiry .wpcf7-list-item {
  display: inline-block;
  margin: 4px 0;
}
.form-inquiry .wpcf7-checkbox input[type='checkbox'] {
  accent-color: #83BAB9;
  margin-right: 8px;
}
/* 「製作されたい商品」：仕組みは1つだけ選べるチェックボックス（CF7 の radio は非表示の仕様で
   送信エラーになるため）だが、必須の単一選択なので見た目はラジオボタンにする */
.form-inquiry .spec-required input[type='checkbox'] {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin: 0 10px 0 0;
  border: 1px solid #8f8f8f;
  border-radius: 50%;
  background: #fff;
  vertical-align: -2px;
  cursor: pointer;
}
.form-inquiry .spec-required input[type='checkbox']:checked {
  border-color: #83BAB9;
  background: radial-gradient(circle, #83BAB9 0 3.5px, #fff 4.5px);
}
.form-inquiry .spec-required input[type='checkbox']:focus-visible {
  outline: 2px solid #49A5A0;
  outline-offset: 2px;
}

.form-inquiry .size-row input[type='number'] { width: 100px; }
.form-inquiry .pBody input[type='text'] { margin-top: 6px; }

/* ---- 製作ガイドのボタン ----------------------------------- */
.form-inquiry ul.guide-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.form-inquiry ul.guide-list li {
  width: auto;
  margin: 0;
  padding: 0;
}
.form-inquiry ul.guide-list li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 16px 8px;
  border-radius: 10px;
}

/* ---- 仕立て等のイラスト ----------------------------------- */
.fig-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 10px 0 14px;
}
.fig-row figure {
  margin: 0;
  padding: 12px;
  background: #F4FAF9;
  border: 1px solid #DCEDEB;
  border-radius: 8px;
  text-align: center;
}
.fig-row img {
  max-height: 170px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.fig-row figcaption {
  font-size: 0.8em;
  color: #666;
  margin-top: 8px;
  line-height: 1.6;
}
.fig-row figcaption b { color: #333; }

/* ---- 選択肢ごとに「選択欄＋名前 → イラスト → 説明」を縦に並べる -------
   CF7 の選択肢（.wpcf7-list-item）とイラスト（figure）を同じグリッドに並べ、
   1段目に選択肢、2段目にイラストと説明を置く */
.opt-cards {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  column-gap: 16px;
  row-gap: 16px;
  margin: 16px 0 10px;
}
.opt-cards .wpcf7-form-control-wrap,
.opt-cards .wpcf7-form-control,
.form-inquiry .pBlock .pBody .opt-cards > p {
  /* CF7 の自動整形で <p> に包まれても、選択肢がグリッドに並ぶようにする
     （サイト側の .form-inquiry .pBlock p より優先させるため詳細度を上げている） */
  display: contents;
}
.opt-cards > br { display: none; }
.form-inquiry .opt-cards .wpcf7-list-item {
  grid-row: 1;
  justify-self: center;
  margin: 0;
  font-weight: bold;
}
.form-inquiry .opt-cards .wpcf7-list-item label { padding: 0; }
.opt-cards figure {
  grid-row: 2;
  margin: 0;
  text-align: center;
}
/* 選択肢よりイラストが少ない場合（神社のぼり）は、イラストを全幅で中央に */
.opt-cards figure.span { grid-column: 1 / -1; }

.opt-cards img {
  max-height: 170px;
  width: auto;
  max-width: 100%;
}
.opt-cards figcaption {
  font-size: 0.8em;
  color: #666;
  margin-top: 12px;
  line-height: 1.8;
}
.opt-cards .wpcf7-not-valid-tip { grid-row: 3; grid-column: 1 / -1; }

.form-inquiry .cond-empty {
  color: #999;
  font-size: 0.9em;
}
.form-inquiry .cond-group {
  padding-top: 4px;
}

/* ---- 仕様セット（複数点見積） ------------------------------- */
.spec-sets { margin: 30px 0; }
.spec-lead {
  background: #E4F4F2;
  padding: 12px 16px;
  border-radius: 6px;
}
.spec-set {
  border: 1px solid #C9E2E0;
  border-radius: 10px;
  padding: 6px 24px 10px;
  margin: 20px 0;
  background: #FCFEFE;
}
.spec-set .pBlock:last-child { border-bottom: none; }
.spec-ttl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: #49A5A0;
  border-bottom: 2px solid #C9E2E0;
  padding: 12px 0;
  margin: 0;
}
.btn-remove-spec {
  background: none;
  border: 1px solid #c77;
  color: #c55;
  font-size: 0.8em;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.btn-remove-spec:hover { background: #fdf0f0; }
.spec-add { text-align: center; }
.btn-add-spec {
  width: 100%;
  padding: 16px;
  font-size: 1em;
  font-weight: bold;
  color: #49A5A0;
  background: #fff;
  border: 2px dashed #49A5A0;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
}
.btn-add-spec:hover { background: #E4F4F2; }

/* ---- 添付ファイル保持メッセージ ----------------------------- */
.form-inquiry .file-kept {
  margin: 14px 20px 0;
  color: #2a8a6e;
  font-weight: bold;
  font-size: 0.9em;
}
.form-inquiry .file-kept.is-warn { color: red; }

/* ---- 選択ページ（/inquiry/） ------------------------------ */
.form-select .select-block { margin: 50px 0; }
.form-select .select-ttl {
  display: inline-block;
  font-size: 1.1em;
  font-weight: bold;
  padding: 0 6px 6px;
  margin-bottom: 16px;
  border-bottom: 4px solid #C9E2E0;
}
.form-select .select-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr; /* 全ボタンを一番高いボタンに揃える */
  gap: 12px;
  margin: 16px 0;
}
.form-select .select-products .btn-select {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 12px 10px;
}
.btn-select {
  display: inline-block;
  background: #83BAB9;
  color: #fff;
  padding: 12px 28px;
  border-radius: 6px;
  border: 2px solid #83BAB9;
  line-height: 1.4;
  text-align: center;
}
.btn-select small {
  display: block;
  font-size: 0.7em;
}
.btn-select:hover {
  background: #fff;
  color: #83BAB9;
}
.btn-select-contact { padding: 14px 48px; }

/* 商品紹介から来た商品（/inquiry/#noren など）を強調 */
.form-select .select-products .btn-select.is-current {
  background: #49A5A0;
  border-color: #49A5A0;
  font-weight: bold;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #49A5A0;
}
.form-select .select-products .btn-select.is-current:hover {
  background: #fff;
  color: #49A5A0;
}


@media screen and (max-width: 768px) {
  .form-inquiry .pBody { padding: 0 10px 10px; }
  .form-inquiry label { white-space: normal; }
  .form-inquiry ul.guide-list { grid-template-columns: repeat(2, 1fr); }
  .form-inquiry ul.guide-list li { width: auto; margin: 0; }
  .spec-set { padding: 4px 10px 8px; }
  .fig-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .fig-row figure { padding: 8px; }
  .fig-row img { max-height: 110px; }
  .opt-cards { column-gap: 8px; }
  .opt-cards img { max-height: 110px; }
  .form-select .select-products { grid-template-columns: repeat(2, 1fr); }
}