/* お問い合わせページ（contact.html）と、トップのお問い合わせ欄のフォームボタン */

/* トップ・A1のお問い合わせ欄に置くフォームへのボタン */
.contact-form-button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;margin-top:28px;min-height:58px;padding:14px 24px;background:var(--ink);color:var(--paper);font-size:15px;font-weight:700;transition:background .2s,transform .2s}
.contact-form-button:hover{background:#303735;transform:translateY(-3px)}
@media(max-width:700px){.contact-form-button{display:flex;width:100%;margin-top:22px}}
@media(prefers-reduced-motion:reduce){.contact-form-button{transition:none}.contact-form-button:hover{transform:none}}

/* ここから下は shimizu-kogyo-form.html のデザインをそのまま、ページ内だけに効くようにしたもの */
.cf{
  --cf-black:#000;--cf-char:#1c1b19;--cf-line:#3a3834;--cf-yellow:#f6c200;--cf-yellow-dk:#c99d00;
  --cf-paper:#f4f3ef;--cf-ink:#1c1b19;--cf-muted:#6b6862;--cf-field:#fff;--cf-err:#c8321e;
  background:var(--cf-paper);color:var(--cf-ink);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  line-height:1.8;font-size:16px}
.cf *,.cf *::before,.cf *::after{box-sizing:border-box}
.cf .cf-head{background:var(--cf-black);color:#fff;position:relative;overflow:hidden}
.cf .cf-head::before{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;background:var(--cf-yellow)}
.cf .cf-head-in{max-width:760px;margin:0 auto;padding:44px 20px 56px}
.cf .cf-company{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:#fff;margin:0 0 8px;line-height:1.3}
.cf .cf-logo{height:1.6em;width:auto;max-width:none;display:block}
.cf h1{color:var(--cf-yellow);font-size:clamp(30px,7vw,44px);font-weight:900;margin:0;line-height:1.25;letter-spacing:.02em;white-space:normal}
.cf .lead{margin:14px 0 0;color:#d8d6d0;font-size:15px;max-width:34em}
.cf .cf-body{max-width:760px;margin:0 auto;padding:28px 16px 64px}
.cf .block{background:#fff;border:1px solid #dddad3;margin-bottom:18px;padding:22px 20px}
.cf .block h2{font-size:19px;font-weight:900;margin:0 0 16px;padding-left:12px;border-left:6px solid var(--cf-yellow);line-height:1.8;letter-spacing:normal}
.cf .detail{border:2px solid var(--cf-yellow);background:#fffbea}
.cf .detail[hidden]{display:none}
.cf .detail h2{border-left-color:var(--cf-black)}
.cf .field{margin-bottom:18px}
.cf .field:last-child{margin-bottom:0}
.cf .label{display:block;font-weight:700;margin-bottom:6px}
.cf .req,.cf .opt{display:inline-block;font-size:12px;font-weight:700;padding:0 7px;margin-left:8px;vertical-align:2px;line-height:1.7}
.cf .req{background:var(--cf-black);color:var(--cf-yellow)}
.cf .opt{background:#e7e5df;color:var(--cf-muted)}
.cf .hint{font-size:13px;color:var(--cf-muted);margin:2px 0 6px}
.cf input[type=text],.cf input[type=email],.cf input[type=tel],.cf select,.cf textarea{
  width:100%;font:inherit;padding:12px;border:1.5px solid #bdb9b0;background:var(--cf-field);color:var(--cf-ink);border-radius:2px}
.cf input[type=file]{font:inherit;max-width:100%}
.cf textarea{min-height:130px;resize:vertical}
.cf input:focus,.cf select:focus,.cf textarea:focus{outline:3px solid var(--cf-yellow);outline-offset:1px;border-color:var(--cf-black)}
.cf .choices{display:flex;flex-direction:column;gap:6px}
.cf .choice{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1.5px solid #d3d0c8;background:#fff;cursor:pointer;border-radius:2px;user-select:none}
.cf .choice input{appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;margin:0;border:2px solid #8f8b82;background:#fff;cursor:pointer;display:grid;place-items:center;border-radius:50%}
.cf .choice input:checked{background:var(--cf-black);border-color:var(--cf-black)}
.cf .choice input:checked::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--cf-yellow)}
.cf .choice input:focus-visible{outline:3px solid var(--cf-yellow);outline-offset:2px}
.cf .choice:has(input:checked){border-color:var(--cf-black);background:#fffbea}
.cf .choice:has(input:checked) span{font-weight:700}
.cf .choice span{font-size:16px;line-height:1.5}
.cf .services .choice span{font-weight:700}
.cf .error{color:var(--cf-err);font-size:14px;font-weight:700;margin-top:6px;display:none}
.cf .field.invalid .error{display:block}
.cf .field.invalid input,.cf .field.invalid select{border-color:var(--cf-err)}
.cf .submit-area{text-align:center;margin-top:28px}
.cf .privacy{font-size:13px;color:var(--cf-muted);margin-bottom:16px}
.cf button{font:inherit;font-weight:900;font-size:18px;background:var(--cf-yellow);color:var(--cf-black);border:none;
  padding:16px 48px;cursor:pointer;border-radius:2px;box-shadow:0 5px 0 var(--cf-yellow-dk)}
.cf button:active{transform:translateY(3px);box-shadow:0 2px 0 var(--cf-yellow-dk)}
.cf button:focus-visible{outline:3px solid var(--cf-black);outline-offset:3px}
.cf .thanks{display:none;background:#fff;border:1px solid #dddad3;padding:40px 22px;text-align:center}
.cf .thanks h2{font-size:24px;font-weight:900;margin:0 0 10px}
@media (max-width:480px){.cf .block{padding:18px 14px}.cf button{width:100%;padding:16px}}

/* 入力中は右下の電話ボタンを隠して、入力欄に重ならないようにする */
body:has(.cf input:focus,.cf select:focus,.cf textarea:focus) .floating-contact{visibility:hidden}