@charset "UTF-8";
/* ==========================================================
   来場予約・お問い合わせ（page-contact.php）
   見た目はトップページ・物件ページ v2 にそろえる（生成りの背景、しっぽり明朝の見出し、#7bd100 の線）
   入力欄だけは、読み書きしやすいよう白地・黒字・ゴシック体にする
   土台は css/page.css（枠組みと、ラジオ・チェックの作り）で、ここはその上書き
   page.css は濃い背景向けの指定なので、同じ深さの書き方で打ち消している
   ========================================================== */

#contact{background:var(--paper);color:var(--ink)}
#contact .inner-sct{width:100%;padding:clamp(120px,14vw,180px) 0 clamp(80px,9vw,120px)}
#contact .stl{width:var(--lp-w);margin:0 auto clamp(32px,4vw,48px)}

/* 来場予約特典の帯 */
#contact .tit{width:var(--lp-w);max-width:none;margin:0 auto clamp(40px,5vw,64px)}
#contact .tit::before{background:var(--rule)}
#contact .tit::after{display:none}
#contact .tit h3{color:var(--ink);font-family:var(--font-serif);font-weight:500;letter-spacing:.06em}
#contact .tit h3 span{padding-left:14px;background:var(--paper)}

/* 入力の枠組み */
#contact .ctn{width:var(--lp-w);margin:0 auto}
#contact .form-bloc{border-top:1px solid var(--rule)}
#contact .form-bloc .row{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:clamp(14px,2.4vw,36px);align-items:start;padding:clamp(20px,2.4vw,28px) 0;border-bottom:1px solid var(--rule)}
/* page.css はラベルを絶対配置にしているので、並べ方をここで作り直す */
#contact .form-bloc .row .item{position:static;left:auto;top:auto;width:auto;margin:0;padding:6px 0 0}
#contact .form-bloc .row .item p{padding-left:0}
#contact .form-bloc .row .item p span.require{position:static;display:inline-flex;align-items:center;width:auto;height:auto;border-radius:2px;text-align:center}
#contact .form-bloc .row .item p{display:flex;align-items:center;gap:10px;margin:0;color:var(--ink);font-family:var(--font-serif);font-size:clamp(14px,1.15vw,16px);font-weight:500;line-height:1.7;letter-spacing:.08em}
#contact .form-bloc .row .item .require{flex:none;padding:3px 10px;background:var(--green-dark);color:#fff;font-family:var(--font-gothic);font-size:11px;font-weight:500;letter-spacing:.08em}
#contact .form-bloc .row .item p.any{color:var(--copy)}
#contact .form-bloc .row .item .note-inline{color:var(--muted);font-family:var(--font-gothic);font-size:12px;font-weight:500;letter-spacing:.04em}
#contact .form-bloc .row .entry{width:auto;min-width:0}

/* 入力欄: 白地・黒字・ゴシック体 */
#contact .form-bloc .entry input[type="text"],
#contact .form-bloc .entry input[type="email"],
#contact .form-bloc .entry input[type="tel"],
#contact .form-bloc .entry input[type="date"],
#contact .form-bloc .entry input[type="number"],
#contact .form-bloc .entry textarea,
#contact .form-bloc .entry select,
#contact .form-bloc .entry .select-bloc .wpcf7-select{
  width:100%;padding:13px 16px;border:1px solid var(--rule);border-bottom:1px solid var(--rule);border-radius:4px;background:#fff;color:var(--ink);
  font-family:var(--font-gothic);font-size:16px;font-weight:500;line-height:1.7;letter-spacing:.02em;
  transition:border-color .25s ease,box-shadow .25s ease
}
#contact .form-bloc .entry textarea{height:auto;min-height:170px;resize:vertical}
#contact .form-bloc .entry input::placeholder,#contact .form-bloc .entry textarea::placeholder{color:#9b9d98}
#contact .form-bloc .entry input:focus,#contact .form-bloc .entry textarea:focus,#contact .form-bloc .entry select:focus{border-color:var(--green-dark);box-shadow:0 0 0 3px rgba(123,209,0,.16);outline:0}
#contact .form-bloc .entry select option{background:#fff;color:var(--ink)}
#contact .form-bloc .entry select,#contact .form-bloc .entry .select-bloc .wpcf7-select{padding-right:44px;background-image:linear-gradient(45deg,transparent 50%,var(--copy) 50%),linear-gradient(135deg,var(--copy) 50%,transparent 50%);background-position:calc(100% - 22px) calc(50% - 2px),calc(100% - 16px) calc(50% - 2px);background-size:6px 6px,6px 6px;background-repeat:no-repeat}
#contact .form-bloc .entry input#zip{width:220px}
#contact .form-bloc .entry .date input{max-width:280px}
#contact .form-bloc .entry .inline{display:flex;align-items:center;gap:10px}
#contact .form-bloc .entry .inline .down select{width:auto;min-width:98px}
#contact .form-bloc .entry .inline .ji,#contact .form-bloc .entry .inline .fun{font-family:var(--font-gothic);font-size:14px;color:var(--copy)}

/* 選ぶ欄（ラジオ・チェック）: 丸と四角を白地にし、選んだら緑にする */
#contact .form-bloc .entry .select-bloc .wpcf7-list-item,#contact .form-bloc .entry .check-bloc .wpcf7-list-item{display:inline-block;width:auto;min-width:min(100%,260px);margin:0 24px 12px 0;line-height:1.6}
#contact .form-bloc .entry label input[type='radio'] + .wpcf7-list-item-label,
#contact .form-bloc .entry label input[type='checkbox'] + .wpcf7-list-item-label{min-height:22px;padding-left:32px;color:var(--ink);font-family:var(--font-gothic);font-size:15px;font-weight:500;letter-spacing:.04em}
#contact .form-bloc .entry label input[type='radio'] + .wpcf7-list-item-label::before,
#contact .form-bloc .entry label input[type='checkbox'] + .wpcf7-list-item-label::before{top:1px;width:22px;height:22px;border:1px solid var(--rule);background:#fff}
#contact .form-bloc .entry label input[type='radio'] + .wpcf7-list-item-label::after{top:6px;left:5px;width:12px;height:12px;background:var(--green-dark)}
#contact .form-bloc .entry input[type='checkbox']:checked + .wpcf7-list-item-label::before{border-color:var(--green-dark);background:var(--green-dark)}
#contact .form-bloc .entry input[type='checkbox']:checked + .wpcf7-list-item-label::after{position:absolute;top:5px;left:8px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;background:none}
#contact .form-bloc .entry .wpcf7-list-item input[type='radio'],#contact .form-bloc .entry .wpcf7-list-item input[type='checkbox']{position:absolute;width:22px;height:22px;margin:0;opacity:0}
#contact .form-bloc .entry .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label::before{outline:2px solid var(--green-dark);outline-offset:2px}

/* 注記 */
#contact .form-bloc .entry .note{margin-top:10px;color:var(--muted);font-family:var(--font-gothic);font-size:12px;line-height:1.9;letter-spacing:.02em}
#contact .form-bloc .entry .note.red{color:#b4493c}

/* 送信ボタン: トップページの来場予約ボタンと同じ形 */
/* 以前はここに「#contact .wpcf7 p:last-of-type」もあり、注意書きの枠・同意文・内覧希望日の注記の p まで中央寄せ＋上に 32〜48px の余白になっていた（送信ボタンは p で囲まれていないので不要） */
#contact .submit,#contact .btn{margin-top:clamp(32px,4vw,48px);text-align:center}
#contact input[type="submit"],#contact .wpcf7-submit{display:inline-block;width:min(420px,100%);padding:20px 40px;border:0;border-radius:0;background:var(--ink);color:#fff;font-family:var(--font-serif);font-size:clamp(15px,1.3vw,17px);font-weight:500;letter-spacing:.12em;cursor:pointer;transition:background .3s ease}
#contact input[type="submit"]:hover,#contact .wpcf7-submit:hover{background:var(--green-dark)}

/* 案内文・注意書き: 「自動メールが届かない場合」の枠（見出しと本文）と同意文を中央にそろえる
   枠の中は見出しと本文を近づけ、上下と左右の余白をそろえる。同意文と送信ボタンのあいだもあける */
#contact .read,#contact .attention{width:var(--lp-w);margin:clamp(28px,3.5vw,44px) auto 0;font-family:var(--font-gothic);text-align:center}
#contact .attention{padding:clamp(22px,2.6vw,32px) clamp(18px,3vw,40px);border:1px solid var(--rule);background:#fff}
#contact .attention h4{margin:0 0 12px;color:var(--ink);font-family:var(--font-serif);font-size:15px;font-weight:500;letter-spacing:.06em}
#contact .btn-submit{margin-top:clamp(20px,2.4vw,28px)}
#contact .attention p,#contact .read p{margin:0;color:var(--copy);font-size:13px;line-height:2;letter-spacing:.02em}
#contact .attention a,#contact .read a{color:var(--green-dark)!important;text-decoration:underline}

/* 入力の案内（Contact Form 7） */
#contact .wpcf7-not-valid-tip{margin-top:8px;color:#b4493c;font-family:var(--font-gothic);font-size:13px;letter-spacing:.02em}
#contact .wpcf7-response-output{margin:28px auto 0;width:var(--lp-w);padding:16px 18px;border:1px solid var(--rule)!important;background:#fff;color:var(--ink);font-family:var(--font-gothic);font-size:14px;line-height:1.9}

@media (max-width:800px){
  #contact .form-bloc .row{grid-template-columns:1fr;gap:10px;padding:18px 0}
  #contact .form-bloc .row .item{padding:0}
  #contact .form-bloc .row .item p{font-size:14px}
  #contact .form-bloc .entry .select-bloc .wpcf7-list-item,#contact .form-bloc .entry .check-bloc .wpcf7-list-item{width:100%;min-width:0;margin-right:0}
  #contact input[type="submit"],#contact .wpcf7-submit{width:100%;padding:18px 24px}
}

/* 送信ボタン（page.css の .btn-submit より強く指定する） */
#contact .btn-submit input[type="submit"]{width:min(420px,100%);margin:0 auto;padding:20px 40px;border:0;border-radius:0;background:var(--ink);color:#fff;font-family:var(--font-serif);font-size:clamp(15px,1.3vw,17px);font-weight:500;letter-spacing:.12em}
#contact .btn-submit input[type="submit"]:hover{opacity:1;background:var(--green-dark)}

/* 幅と折り返しの調整（page.css の 980px 固定を、他のページと同じ本文幅にそろえる） */
#contact .inner-sct .ctn{width:var(--lp-w);max-width:none;margin:0 auto}
#contact .form-bloc .row .entry{max-width:720px}
#contact .form-bloc .row .item p{flex-wrap:wrap;gap:6px 10px}
#contact .form-bloc .row .item .note-inline{width:100%}
#contact .form-bloc .row .item p{justify-content:flex-start}
#contact .form-bloc .row .item .note-inline{text-align:left}