/* スマホ版お問い合わせ（sp/contact/）2026-10-27
   入力欄は16px以上（iPhoneで入力時に画面が拡大されないように）・横幅いっぱい・項目名は欄の上 */
.ctf { padding: 20px 16px 32px; color: #333; font-size: 15px; line-height: 1.7; text-align: left; }
.ctf * { box-sizing: border-box; }
.ctf-title { margin: 0 0 14px; font-size: 22px; font-weight: bold; color: #12402b; text-align: center; letter-spacing: .05em; }
.ctf-steps { display: flex; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: ctf; }
.ctf-steps li { flex: 1; position: relative; padding: 6px 0; background: #eef3f0; color: #888; font-size: 13px; font-weight: bold; text-align: center; counter-increment: ctf; }
.ctf-steps li + li { margin-left: 3px; }
.ctf-steps li:before { content: counter(ctf) ". "; }
.ctf-steps li.is-current { background: #12402b; color: #fff; }
.ctf-lead, .ctf-note { margin: 0 0 18px; font-size: 14px; }
.ctf-field { margin: 0 0 18px; }
.ctf-label { display: block; margin: 0 0 6px; font-size: 15px; font-weight: bold; color: #222; }
.ctf-req, .ctf-opt { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 3px; font-size: 11px; font-weight: bold; line-height: 1.6; vertical-align: 2px; }
.ctf-req { background: #c8102e; color: #fff; }
.ctf-opt { background: #e6e6e6; color: #555; }
.ctf .ctf-input {
  display: block; width: 100%; margin: 0; padding: 12px; border: 1px solid #b9c4be; border-radius: 6px; background: #fff;
  font-size: 16px; line-height: 1.5; color: #222; font-family: inherit; -webkit-appearance: none; appearance: none;
}
.ctf .ctf-input:focus { border-color: #12402b; outline: 0; box-shadow: 0 0 0 3px rgba(18, 64, 43, .2); }
.ctf textarea.ctf-input { min-height: 10em; resize: vertical; }
.ctf .ctf-input::placeholder { color: #aaa; }
.ctf-select { position: relative; }
.ctf-select:after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid #12402b; border-bottom: 2px solid #12402b; transform: rotate(45deg); pointer-events: none; }
.ctf-select .ctf-input { padding-right: 40px; }
.ctf-post { display: flex; align-items: center; gap: 8px; }
.ctf-post .ctf-input { width: 6em; }
.ctf-post .ctf-input + span + .ctf-input { width: 7em; }
.ctf p.err { margin: 6px 0 0; font-size: 14px; color: #c8102e !important; }
.ctf-privacy { margin: 4px 0 20px; font-size: 13px; color: #666; }
.ctf-btns { margin: 8px 0 0; }
.ctf-btn { display: block; width: 100%; margin: 0 0 12px; padding: 15px 10px; border: 0; border-radius: 8px; font-size: 17px; font-weight: bold; font-family: inherit; line-height: 1.4; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ctf-btn--main { background: #12402b; color: #fff; box-shadow: 0 3px 0 #082819; }
.ctf-btn--main:active { transform: translateY(2px); box-shadow: 0 1px 0 #082819; }
.ctf-btn--sub { background: #fff; color: #12402b; border: 1px solid #12402b; font-size: 15px; }
.ctf-confirm { margin: 0 0 20px; padding: 0; border-top: 1px solid #dde3df; }
.ctf-confirm dt { margin: 0; padding: 12px 0 2px; font-size: 13px; font-weight: bold; color: #12402b; }
.ctf-confirm dd { margin: 0; padding: 0 0 12px; border-bottom: 1px solid #dde3df; font-size: 16px; word-break: break-all; }
.ctf-confirm .ctf-hidden { display: none; }
.ctf-done { margin: 0 0 20px; padding: 18px 16px; border-radius: 8px; background: #eef3f0; }
.ctf-done h2 { margin: 0 0 8px; font-size: 18px; color: #12402b; }
.ctf-done p { margin: 0 0 10px; font-size: 14px; }
.ctf-done p:last-child { margin-bottom: 0; }
.ctf a.ctf-back { display: block; padding: 14px 10px; border: 1px solid #12402b; border-radius: 8px; color: #12402b; font-weight: bold; text-align: center; text-decoration: none !important; }
.ctf-tel { margin: 28px 0 0; padding: 16px; border: 1px solid #dde3df; border-radius: 8px; text-align: center; }
.ctf-tel p { margin: 0 0 4px; font-size: 13px; color: #555; }
.ctf-tel a { font-size: 22px; font-weight: bold; color: #12402b; text-decoration: none !important; letter-spacing: .03em; }
.ctf-tel a small { font-size: 13px; font-weight: normal; }