/* 導入前お問い合わせ（1枚もの）
   2025本番のデザイン言語（#01a0e9 / 橙CTA / .section）に統一 */

.cf-section { padding: 8px 0 64px; background: transparent; }
.cf { max-width: 680px; margin: 0 auto; background: #fff; border: 1px solid #e3eef5; border-radius: 20px;
  padding: 34px 32px 30px; box-shadow: 0 30px 70px -50px rgba(1, 160, 233, .6); }
.cf__lead { margin: 0 0 22px; font-size: .92rem; line-height: 1.85; color: #46586a; text-align: center; }

/* チップ */
.cf-chipsWrap { margin-bottom: 26px; }
.cf-chips__label { font-size: .82rem; font-weight: 700; color: #2c3e4a; margin: 0 0 10px; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.cf-chip { border: 2px solid #cfe3f1; background: #fff; color: #0561c5; font-weight: 700; font-size: .85rem;
  border-radius: 99px; padding: 9px 15px; cursor: pointer; transition: .15s; line-height: 1.3; }
.cf-chip:hover { border-color: #51bfeb; background: #f4fbff; }
.cf-chip.is-on { background: linear-gradient(180deg, #5fc9ee, #0288c2); border-color: #0288c2; color: #fff; }
.cf-chip--other { color: #6b7d88; border-color: #dce6ec; }
.cf-chips__sub { margin: 18px 0 10px; font-size: .78rem; color: #8295a1; }
.cf-chips--trap .cf-chip { color: #5a6b75; border-color: #e3eef5; background: #f8fafc; font-weight: 600; font-size: .82rem; }
.cf-chips--trap .cf-chip:hover { border-color: #bcd0db; background: #f1f5f8; }

/* フォーム */
.cf-label { display: block; font-size: .84rem; font-weight: 700; color: #2c3e4a; margin: 18px 0 7px; }
.cf-label i { color: #d9534f; font-style: normal; margin-left: 4px; }
.cf-input, .cf-textarea { width: 100%; box-sizing: border-box; padding: 13px 15px; border: 2px solid #cfe3f1;
  border-radius: 12px; font-size: 1rem; color: #073b52; background: #fff; transition: .15s; }
.cf-input:focus, .cf-textarea:focus { outline: none; border-color: #01a0e9; box-shadow: 0 0 0 3px rgba(1, 160, 233, .15); }
.cf-textarea { resize: vertical; line-height: 1.8; }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.cf-consent { display: flex; align-items: flex-start; gap: 9px; margin: 20px 0 0; font-size: .88rem; color: #46586a; cursor: pointer; }
.cf-consent input { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 auto; }
.cf-consent a { color: #0561c5; font-weight: 700; text-decoration: underline; }
.cf-consent i { color: #d9534f; font-style: normal; }

.cf-msg { min-height: 0; margin-top: 12px; font-size: .85rem; line-height: 1.7; }
.cf-msg.is-err { color: #c0392b; font-weight: 700; }

.cf-submit { display: block; width: 100%; margin-top: 18px; color: #fff; font-weight: 800; font-size: 1.05rem;
  border: 2px solid #d78d04; border-radius: 99px; cursor: pointer; padding: 15px 22px;
  background-image: linear-gradient(150deg, rgb(252, 176, 108), rgb(255, 119, 0)); box-shadow: 0 8px 20px -6px rgba(255, 119, 0, .5); transition: .15s; }
.cf-submit:hover { filter: brightness(1.03); transform: translateY(-2px); }
.cf-submit:disabled { filter: grayscale(.3) brightness(.97); transform: none; cursor: default; opacity: .7; }

.cf-soft { margin: 20px 0 0; text-align: center; font-size: .82rem; color: #8aa1ad; }
.cf-soft a { color: #0561c5; font-weight: 700; text-decoration: underline; }

/* 罠チップ モーダル */
.cf-modal[hidden] { display: none; }
.cf-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cf-modal__overlay { position: absolute; inset: 0; background: rgba(7, 59, 82, .5); }
.cf-modal__panel { position: relative; z-index: 1; width: 100%; max-width: 440px; background: #fff; border-radius: 18px;
  padding: 34px 28px 26px; text-align: center; box-shadow: 0 30px 80px -30px rgba(8, 59, 82, .5); }
.cf-modal__close { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 26px; line-height: 1; color: #9fb3bf; cursor: pointer; }
.cf-modal__title { font-size: 1.15rem; font-weight: 800; color: #073b52; margin: 0 0 12px; }
.cf-modal__desc { font-size: .9rem; line-height: 1.85; color: #5a6b75; margin: 0 0 22px; }
.cf-modal__btn { display: block; width: 100%; box-sizing: border-box; color: #fff; font-weight: 800; text-decoration: none;
  border-radius: 99px; padding: 14px 20px; background-image: linear-gradient(150deg, #51bfeb, #01a0e9 70%, #0288c2);
  box-shadow: 0 10px 24px -10px rgba(1, 160, 233, .6); transition: .15s; }
.cf-modal__btn:hover { filter: brightness(1.03); transform: translateY(-2px); color: #fff; opacity: 1; }
.cf-modal__back { margin-top: 14px; border: 0; background: none; color: #6b7d88; font-size: .85rem; font-weight: 700; cursor: pointer; text-decoration: underline; }

@media (max-width: 575px) {
  .cf { padding: 26px 18px 24px; }
}