input,textarea,select {
  font-size: 16px;
}

#nokotsudo-special-background .sub-section {
        padding: 2rem 4rem 4rem;
            max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
}

.cf7-form input[type="date"].wpcf7-date {
    min-height: 0.8rem;
    width: 10rem;
    padding: 0.5rem;
}

.contactform-wrapper {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4rem;
}

/* ===== CF7 Minimal Dark-Friendly ===== */
.cf7-form, .parag-under-cf7 {
  margin-inline: auto;
  padding: 0 0 1.5rem 0;
}
.parag-under-cf7 {
  padding-top: 1.5rem;
}

/* b-n.css */

/* —— テーマ色（落ち着いた配色） —— */
.cf7-form {
    --ui-ink: #e9e9ea;
    --ui-line: #333333;
    --ui-active: var(--gold);
    --ui-active-ink: #ffffff;
    --ui-focus: var(--gold);
    --field-bg: #f6f7f8;         /* 入力欄のほのかな白（黒背景サイトでも馴染む） */
  color: var(--ui-ink);
}

/* 見出しの間隔など軽く整える */
.cf7-form h3 { margin: 2rem 0 .5rem; font-size: 1.25rem; line-height: 1.3; margin-top: 2rem; margin-bottom: 2rem; }
.cf7-form p  { margin: .75rem 0 1rem; }
.cf7-form a  { color: #ffffff; }

.cf7-form p, .cf7-form h3 {
    text-align: left;
}

.cf7-form h3 span {
    background: linear-gradient(transparent 60%, var(--deep-gold) 60%);
    display: inline;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    line-height: 1.6;
}

/* —— 単純フィールド（text / email / tel / date / number / textarea） —— */
.cf7-form input[type="text"],
.cf7-form input[type="email"],
.cf7-form input[type="tel"],
.cf7-form input[type="date"],
.cf7-form input[type="number"],
.cf7-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: .7rem .9rem;
  border-radius: .6rem;
  border: 1.5px solid var(--ui-line);
  background: var(--field-bg);
  color: #757575;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}

.cf7-form input:focus-visible,
.cf7-form textarea:focus-visible {
  border-color: var(--ui-active);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 55%, transparent);
}

/* —— 送信ボタン —— */
.cf7-form input[type="submit"] {
  appearance: none;
  border: none;
  border-radius: .8rem;
  padding: .9rem 1.2rem;
  background: var(--ui-active);
  text-shadow: 0 0 20px var(--deep-gold);
  color: var(--ui-active-ink);
  font-weight: 600;
  cursor: pointer;
  opacity: 1;
  transition: 0.3s;
}

.cf7-form input[type="submit"]:hover { background: var(--deep-gold); transition: 0.3s; }
.cf7-form input[type="submit"]:active { transform: translateY(1px); }

/* ——————————————————————————————
   CF7 チェックボックス / ラジオ（use_label_element前提）
   入力をネイティブからカスタム外観へ。画像ファイル不要（SVG data URL）。
   —————————————————————————————— */

/* ラベル行：タップ領域を広く */
.cf7-form .wpcf7-list-item { display: inline-block; margin: .35rem 1.2rem .35rem 0; }
.cf7-form .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  user-select: none;
  line-height: 1.3;
}

/* 入力をカスタムUI化（iOS/Safari配慮のため -webkit-appearance も指定） */
.cf7-form input[type="checkbox"],
.cf7-form input[type="radio"]{
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  margin: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--ui-line);
  box-sizing: border-box;
  background: transparent;
  outline: none;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, background-size .12s ease;
}

/* チェックボックスの角丸 */
.cf7-form input[type="checkbox"]{ border-radius: .35rem; }

/* ラジオの完全な円形 */
.cf7-form input[type="radio"]{ border-radius: 999px; }

/* hover（マウス環境のみ） */
@media (hover:hover){
  .cf7-form .wpcf7-list-item label:hover input[type="checkbox"],
  .cf7-form .wpcf7-list-item label:hover input[type="radio"]{
    border-color: var(--ui-active);
  }
}

/* キーボードフォーカス */
.cf7-form input[type="checkbox"]:focus-visible,
.cf7-form input[type="radio"]:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 60%, transparent);
}

/* —— チェックボックス（SVGのチェックマークを塗り） —— */
.cf7-form input[type="checkbox"]:checked{
  background-color: var(--ui-active);
  border-color: var(--ui-active);
  background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'>\
      <path d='M5 10.5l3.2 3.4L15 7' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/>\
    </svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80% 80%;
}

/* —— ラジオ（中心ドットをSVGで） —— */
.cf7-form input[type="radio"]:checked{
  border-color: var(--ui-active);
  background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23" /* %23 = # */ 
  );
  /* ↑ 一旦閉じずに続けると扱いにくいので下で上書きします */
}

/* iOS Safariでの data URI 改行シビア対策として、上の書き方が不安定な場合は以下を使う */
.cf7-form input[type="radio"]:checked{
  background-color: transparent; /* 背景は透明のまま */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><circle cx='10' cy='10' r='5.2' fill='%235a8a8f'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70% 70%;
}

/* 無効状態 */
.cf7-form input[type="checkbox"]:disabled,
.cf7-form input[type="radio"]:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* —— アクセントカラーの素朴フォールバック —— */
/* 古い環境で appearance が効かない場合、ネイティブUIに色だけ合わせる */
@supports (accent-color: auto){
  .cf7-form input[type="checkbox"],
  .cf7-form input[type="radio"]{
    -webkit-appearance: auto;
    appearance: auto;
    accent-color: var(--ui-active);
    width: 1.15rem; height: 1.15rem; /* 多少小さく */
  }
}

/* —— 細かい余白調整 —— */
.cf7-form .wpcf7-list-item { vertical-align: middle; }
.cf7-form .wpcf7-list-item:last-child { margin-right: 0; }

/* —— 高コントラスト設定の配慮 —— */
@media (prefers-contrast: more){
  .cf7-form input[type="checkbox"],
  .cf7-form input[type="radio"]{ border-width: 2.5px; }
}


.wpcf7 form.sent .wpcf7-response-output {
    text-align: left;
    color: #cc0000;
    margin-left: 0;
    padding-left: 0;
}

.wpcf7 form .wpcf7-response-output {
    margin: 0em 0.5em 2em 0;
    padding: 0.2em 1em 0.2em 0;
    border: none;
    text-align: left;
}

input[name="your-tel"] {
    max-width: 200px;
}

input[name="zip-code"] {
    max-width: 200px;
}

@media (max-width: 820px){
	#nokotsudo-special-background .sub-section {
	    padding-left: 4rem;
	    padding-right: 4rem;
	}
}
/* —— 小さめ画面での並び崩れ抑制 —— */
@media (max-width: 500px){
  .cf7-form .wpcf7-list-item { display:block; margin-right:0; }
  
  
  .cf7-form input[type="submit"] {
    padding: .9rem .9rem;
  }
}

@media (max-width: 360px){
  .cf7-form .wpcf7-list-item { display:block; margin-right:0; }
  
  
  .cf7-form input[type="submit"] {
    padding: .5rem .5rem;
  }
}