@charset "UTF-8";
.pop_acf{
margin-top:-40px;
}
.vc_tta-panel-body .title_form_area,
.vc_tta-panel-body .form_total_into,
.vc_tta-panel-body .formGate {
    display: block;
}

/* 修正：.form_total_area 自体は出してOKですが、中身をJSで制御します */
.mfp-content .pop_area .form_total_into,
.mfp-content .pop_area .form_total_area {
    display: block;
}

/* ★追加：JSで「active」クラスがついた時だけ表示するように強制力を分散します */
.mfp-content .inputArea.active {
    display: block !important;
}
.mfp-content .formGate.active {
    display: block !important;
}

/* 通常は消しておく（!importantなしでJSに譲る） */
.pop_area .title_form_area,
.pop_area .form_total_into, .pop_area .formGate {
 display: none;
}
/* 通常はMAGで出る */
.mfp-content .title_form_area,
.mfp-content .form_total_into {
    display: block !important;
}
.mfp-content .pop_acf{
margin-top:0;
}


.form_total_area {
	text-align: left;
}
.mfp-content .pop_area .form_total_area {
	background-color: #FEFBFA;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
}
.mfp-content .pop_area .inputArea {
	margin-top:0;
	padding-top: 0;
}


  /* 1. コンテナ設定：1列・2列の自動判別 */
  .inputArea {
	container-type: inline-size;
	container-name: form-container;
	width: 100%;
	box-sizing: border-box;
	margin-top: -60px;
	padding-top: 60px;
  }
  .dynamicInputs { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 0 20px; /* 縦の隙間はボーダーで調整するので0にする */
    width: 100%;
  }
  @container form-container (min-width: 720px) {
    .dynamicInputs { grid-template-columns: 1fr 1fr; }
  }
.form_total_area .full-width { grid-column: 1 / -1; }

  /* 2. ★ 全項目共通：左縦線 ＋ 下ボーダー（ここを統一！） */
.form_total_area .field-group { 
    margin-bottom: 0; 
    padding: 15px 0; /* 上下の余白を均等に */
    border-bottom: 1px solid #eee; /* 全項目に下線を入れる */
    box-sizing: border-box;
  }
  
.form_total_area .field-group label { 
    display: block; 
    font-weight: bold; 
    margin-bottom: 10px; 
    font-size: 14px; 
    color: #444; 
    border-left: 4px solid #0073aa; /* 左の青い縦線 */
    padding-left: 12px;
    line-height: 1.2;
  }

  /* 追加項目（商品リスト等）は少し色を強調して差別化 */
.form_total_area .field-group:has(.js-extra-input) {
    background-color: #fafcfe; /* ほんのり背景色をつけて「選ぶエリア」を強調 */
    border-bottom-color: #e1edf7;
  }
.form_total_area .field-group:has(.js-extra-input) label {
    color: #005a87;
    border-left-color: #0088cc;
  }

  /* 3. 入力フィールド基本設定（高さを揃える） */
.form_total_area input[type="text"], .form_total_area input[type="email"], .form_total_area input[type="number"], textarea {
	width: 100% !important;
	border: 1px solid #999;
	border-radius: 4px;
	font-size: 16px;
	box-sizing: border-box;
	display: block;
	background: #fff;
	transition: all 0.2s;
	padding-top: 8px;
	padding-right: 12px;
	padding-bottom: 10px;
	padding-left: 12px;
  }
.form_total_area textarea { min-height: 80px; }
.form_total_area input:focus, .form_total_area textarea:focus {
    border-color: #0073aa !important;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 115, 170, 0.2);
  }

  /* 4. プレースホルダー（フォーカスで消える） */
.form_total_area ::placeholder { color: #aaa; font-size: 13px; transition: opacity 0.2s; }
.form_total_area input:focus::placeholder, .form_total_area textarea:focus::placeholder { opacity: 0; }

  /* 5. 数量（数値）と単位のレイアウト */
.form_total_area .input-with-unit { display: flex; align-items: center; gap: 8px; }
.form_total_area .input-with-unit input { flex: 1; width: auto !important; text-align: left; }
.form_total_area .unit-text { 
    font-weight: bold; font-size: 13px; white-space: nowrap; 
    color: #0073aa; background: #eef7ff; padding: 4px 10px; border-radius: 3px;
  }

  /* 6. 選択肢（ラジオ・チェックボックス） */
.form_total_area .choice-wrap { display: flex; flex-wrap: wrap; gap: 8px 15px; padding: 5px 0; }
.form_total_area label.inline { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: normal !important; border:none !important; padding:0 !important; }

  /* 7. エラー時のスタイル（赤で強調） */
.form_total_area .input-error { border-bottom-color: #e74c3c !important; background: #fffafa !important; }
.form_total_area .input-error label { border-left-color: #e74c3c; color: #e74c3c !important; }
.form_total_area .input-error input, .form_total_area .input-error textarea { border: 2px solid #e74c3c !important; }
.form_total_area .item-error-msg { color: #e74c3c; font-size: 12px; font-weight: bold; margin-bottom: 4px; display: block; padding-left: 12px; }

  /* 8. ボタン・アニメーション */
.form_total_area .btn-main { width: 100%; padding: 15px; background: #ff6600; color: #fff; border: none; border-radius: 4px; font-size: 17px; cursor: pointer; font-weight: bold; transition: 0.3s; }
.form_total_area .btn-main:hover { background: #005a87; transform: translateY(-1px); color: #fff;}
.form_total_area .fade-in {
  animation: fadeIn 0.8s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
} 
  @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
  .inputArea, .confirmArea, .successMsg, .formGate { display: none; }
  .inputArea textarea {min-height :70px; background: #FFF;border: 1px solid #999;}
/* --- 確認エリア（控え・レシート風）のデザイン --- */
.confirmFields {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  container-type: inline-size;
  container-name: form-container; /* ここで名前を付ける */
  width: 100%;
}

.confirmFields p {
  display: flex;
  justify-content: space-between; /* 項目名と値を左右に振り分ける */
  align-items: flex-start;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px dashed #eee;
  font-size: 15px;
}

.confirmFields p:last-child { border-bottom: none; }

.confirmFields strong {
  color: #0073aa;
  font-size: 13px;
  flex: 0 0 260px; /* 項目名の幅を固定 */
  margin-right: 15px;
  line-height: 1.4;
}

/* 値（回答部分）を強調 */
.form_total_area .confirm-val {
  flex: 1;
  text-align: right; /* 右寄せにしてレシート風に */
  font-weight: bold;
  color: #333;
  word-break: break-all;
}

/* 備考欄（textarea）など長いテキストは改行して全幅表示 */
.form_total_area .confirm-row-long {
  display: block !important;
}
.form_total_area .confirm-row-long strong {
  display: block;
  margin-bottom: 8px;
}
.form_total_area .confirm-row-long .confirm-val {
	text-align: left;
	display: block;
	background: #f9f9f9;
	border-radius: 4px;
	padding-top: 8px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
/* --- 確認画面のレスポンシブ対応 --- */
@container form-container (max-width: 720px) {
  .confirmFields p {
    flex-direction: column; /* 上下に並べる */
    align-items: flex-start;
    padding: 10px 5px;
  }

  .confirmFields strong {
    flex: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 4px;
    font-size: 12px; /* 項目名は少し小さく */
    color: #0073aa;
    border-left: 3px solid #0073aa; /* 入力画面と意匠を合わせる */
    padding-left: 8px;
  }

  .form_total_area .confirm-val {
    width: 100%;
    text-align: left; /* 左寄せに戻す */
    padding-left: 11px; /* 縦線の分だけインデント */
    font-size: 15px;
    color: #000;
  }

  /* スマホ時は全て「長い行」と同じ扱いで表示 */
  .form_total_area .confirm-row-long .confirm-val {
    background: transparent; /* スマホでは背景色をなしにしてスッキリさせる */
    padding: 0 0 0 11px;
  }
}

/* 送信・戻るボタンの調整 */
@container form-container (max-width: 580px) {
  .confirmArea div[style*="display:flex"] {
    flex-direction: column-reverse; /* 「戻る」を下に、「送信」を上に */
    gap: 15px !important;
  }
  
  #backBtn {
    padding: 12px;
    font-size: 14px;
  }
}
.successMsg {
	background-color: #FFFFFF;
	border: 3px solid #0066CC;
	text-align: center;
	padding: 40px;
	margin-top: 40px;	
}
.successMsg h2{
	font-size: 16px;
	font-weight: bold;
	color: #006699;
	padding-top: 30px;
}
.successMsg p{
	font-size: 15px;
	font-weight: bold;
	color: #006699;
	padding-top: 20px;
	padding-bottom: 20px;
}
.reloadFormBtn:hover {
	background-color: #CCCCCC;
}