/* お問い合わせフォームの見た目（全サイト共通）
   色はすべて --cf-〇〇 の名札で指定する。各サイトのページ側で、自サイトの配色に合わせて上書きする。
   ここにある値は、名札を上書きしないサイト向けの初期値（承認済みの見本の配色）。 */
.cf{
  --cf-fg:#1F2A2E;
  --cf-muted:#4A555C;
  --cf-bg:#FFFFFF;
  --cf-card:#FFFFFF;
  --cf-border:#B8C0C4;
  --cf-focus:#1E4E79;
  --cf-disabled-bg:#ECEEEC;
  --cf-error:#B3261E;
  --cf-error-strong:#8C1D18;
  --cf-error-bg:#FCEEEC;
  --cf-badge-fg:#FFFFFF;
  --cf-btn-bg:#1E4E79;
  --cf-btn-fg:#FFFFFF;
  --cf-btn-disabled-bg:#D5DADD;
  --cf-btn-disabled-fg:#4A555C;
  --cf-link:#1E4E79;
  --cf-radius:6px;
  color:var(--cf-fg);
  display:flex;flex-direction:column;gap:24px;
}
/* フォーム全体の幅：最大640px で中央に置き、狭い画面では画面の幅に合わせる。
   見出しも同じ幅にそろえるときは、見出しと .cf を .cf-page で囲む。
   width:100% は、親が中身の幅まで縮む作り（縦並びの flex と左右 auto の余白など）でも、
   Turnstile の最小幅（300px）まで縮まないようにするためのもの。 */
.cf-page,.cf{box-sizing:border-box;width:100%;max-width:640px;margin-left:auto;margin-right:auto}
.cf *,.cf *::before,.cf *::after{box-sizing:border-box}
.cf [hidden]{display:none !important}

.cf-note{margin:0;font-size:14px;line-height:1.8;color:var(--cf-muted)}

.cf-alert{
  padding:14px 16px;border:2px solid var(--cf-error);border-radius:var(--cf-radius);
  background:var(--cf-error-bg);color:var(--cf-error-strong);
  font-size:14px;font-weight:500;line-height:1.8;
}

.cf-form{display:flex;flex-direction:column;gap:24px;margin:0}
.cf-field{display:flex;flex-direction:column;gap:8px}
.cf-label{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--cf-fg)}
.cf-badge{font-size:11px;font-weight:700;line-height:1.4;color:var(--cf-badge-fg);background:var(--cf-error);padding:2px 6px;border-radius:3px}

.cf-input,.cf-textarea{
  width:100%;margin:0;font-size:16px;font-family:inherit;color:var(--cf-fg);
  background:var(--cf-bg);border:1px solid var(--cf-border);border-radius:var(--cf-radius);
  transition:border-color .2s,box-shadow .2s;
}
.cf-input{height:48px;padding:0 14px}
.cf-textarea{min-height:180px;padding:12px 14px;line-height:1.7;resize:vertical}
.cf-input:focus,.cf-textarea:focus{outline:none;border-color:var(--cf-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--cf-focus) 20%,transparent)}
.cf-input:disabled,.cf-textarea:disabled{background:var(--cf-disabled-bg);opacity:1;-webkit-text-fill-color:var(--cf-fg)}
.cf-input[aria-invalid="true"],.cf-textarea[aria-invalid="true"]{border:2px solid var(--cf-error)}
.cf-input[aria-invalid="true"]{padding:0 13px}
.cf-textarea[aria-invalid="true"]{padding:11px 13px}
.cf-input[aria-invalid="true"]:focus,.cf-textarea[aria-invalid="true"]:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--cf-error) 20%,transparent)}

.cf-error{margin:0;font-size:14px;font-weight:500;line-height:1.6;color:var(--cf-error)}
.cf-hint{margin:0;font-size:14px;line-height:1.6;color:var(--cf-muted)}
.cf-hint button{
  padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--cf-link);
  text-decoration:underline;cursor:pointer;
}

.cf-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.cf-count{flex-shrink:0;margin-left:auto;font-size:13px;color:var(--cf-muted);font-variant-numeric:tabular-nums}
.cf-count.is-over{color:var(--cf-error);font-weight:700}

/* ハニーポット：人には見えず、キーボード操作や読み上げソフトでも到達しない */
.cf-hp{position:absolute !important;left:-10000px !important;top:auto !important;width:1px !important;height:1px !important;overflow:hidden !important}

.cf-turnstile{min-height:65px}

.cf-submit{
  height:52px;width:100%;border:0;border-radius:var(--cf-radius);
  background:var(--cf-btn-bg);color:var(--cf-btn-fg);
  font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;transition:opacity .2s;
}
.cf-submit:hover{opacity:.92}
.cf-submit:disabled{background:var(--cf-btn-disabled-bg);color:var(--cf-btn-disabled-fg);cursor:not-allowed;opacity:1}

/* 送信完了 */
.cf-done{display:flex;flex-direction:column;gap:24px}
.cf-card{
  padding:24px;background:var(--cf-card);border:1px solid var(--cf-border);border-radius:8px;
  display:flex;flex-direction:column;gap:14px;
}
.cf-card-done{align-items:flex-start;padding:28px 24px}
.cf-card-done svg{color:var(--cf-focus)}
.cf-card h2{margin:0;font-size:20px;font-weight:700;line-height:1.5;color:var(--cf-fg)}
.cf-card h2:focus{outline:none}
.cf-card-sent h2{font-size:16px}
.cf-card p{margin:0;font-size:15px;line-height:1.9}
.cf-sent{margin:0;display:flex;flex-direction:column;gap:14px}
.cf-sent div{display:flex;flex-direction:column;gap:4px}
.cf-sent dt{font-size:13px;font-weight:700;color:var(--cf-muted)}
.cf-sent dd{margin:0;font-size:15px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}
.cf-home{font-size:15px;font-weight:500;color:var(--cf-link);text-decoration:underline}