/* =========================================================
   お問い合わせページ＋Contact Form 7
   ========================================================= */
.contact-ways { padding: 64px 0 24px; }
.contact-ways__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.contact-card { background: #fff; border: 2px solid #2f3336; border-radius: 6px; box-shadow: 6px 6px 0 var(--c-lime); padding: 32px 24px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.contact-card__icon { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; color: #fff; margin-bottom: 14px; }
.contact-card__icon .icon { width: 38px; height: 38px; }
.contact-card__icon--tel { background: #2f3336; }
.contact-card__icon--line { background: var(--c-line); }
.contact-card__icon--mail { background: var(--c-teal); }
.contact-card__title { font-size: 19px; font-weight: 700; color: #222; margin: 0 0 8px; }
.contact-card__tel { font-family: var(--font-en); font-size: clamp(26px, 2.6vw, 32px); font-weight: 600; color: #222; text-decoration: none; line-height: 1.3; margin-bottom: 6px; }
.contact-card__big { font-size: 18px; font-weight: 700; color: #222; margin: 0 0 6px; line-height: 1.5; }
.contact-card__text { font-size: 14px; color: #555; margin: 0 0 20px; flex: 1; }
.contact-card .btn { min-width: 0; width: 100%; max-width: 260px; min-height: 52px; }
.contact-card .btn--pill-line, .contact-card .btn--pill-line:hover { background: var(--c-line); color: #fff; border-color: #2b2b2b; }

.contact-steps { list-style: none; margin: 40px auto 0; padding: 0; max-width: 900px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.contact-steps li { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 14px 16px; position: relative; }
.contact-steps li:not(:last-child)::after { content: ""; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); border: 7px solid transparent; border-left-color: #2f3336; }
.contact-steps__num { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #2f3336; color: #fff; display: grid; place-items: center; font-family: var(--font-en); font-weight: 600; }
.contact-steps strong { display: block; color: #222; font-size: 15px; }
.contact-steps li > span:last-child { font-size: 13px; color: #555; line-height: 1.5; }

.contact-form-section { padding: 48px 0 88px; }
.contact-form-box { background: #fff; border: 1px solid #d9d9d9; border-top: 4px solid #2f3336; border-radius: 6px; padding: 48px 48px 36px; }
.contact-form-box .section__head { margin-bottom: 24px; }
.contact-form-box__note { font-size: 14px; color: #555; text-align: center; margin-bottom: 28px; }
.contact-form-box__privacy { font-size: 13px; color: #666; text-align: center; margin: 24px 0 0; }

/* Contact Form 7 */
.cf-req { display: inline-block; background: #c0392b; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; padding: 4px 6px; border-radius: 3px; margin-left: 8px; vertical-align: middle; }
.cf-opt { display: inline-block; background: #e3e3e3; color: #555; font-size: 11px; font-weight: 700; line-height: 1; padding: 4px 6px; border-radius: 3px; margin-left: 8px; vertical-align: middle; }
.wpcf7-form .cf-row { display: grid; grid-template-columns: 220px 1fr; gap: 8px 24px; align-items: start; padding: 16px 0; border-bottom: 1px dashed #ddd; }
.wpcf7-form .cf-row:first-of-type { border-top: 1px solid #ddd; }
.wpcf7-form .cf-label { font-weight: 700; color: #222; padding-top: 10px; font-size: 15px; }
.wpcf7-form .cf-field { min-width: 0; }
.wpcf7-form p { margin: 0; }
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form select, .wpcf7-form textarea { width: 100%; max-width: 100%; font: inherit; font-size: 16px; color: #222; background: #f7f8f8; border: 1px solid #c8c8c8; border-radius: 4px; padding: 12px 14px; transition: border-color .2s, background .2s, box-shadow .2s; }
.wpcf7-form textarea { min-height: 180px; resize: vertical; }
.wpcf7-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #555 50%), linear-gradient(135deg, #555 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus { outline: none; border-color: #2f3336; background: #fff; box-shadow: 0 0 0 3px rgba(220, 239, 58, .6); }
.wpcf7-form ::placeholder { color: #9aa0a3; }
.wpcf7-form .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.wpcf7-form .wpcf7-list-item { margin: 0; }
.wpcf7-form .wpcf7-radio .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #c8c8c8; border-radius: 999px; padding: 8px 16px; background: #f7f8f8; cursor: pointer; font-size: 15px; font-weight: 400; }
.wpcf7-form .wpcf7-radio .wpcf7-list-item label:has(input:checked) { border-color: #2f3336; background: #fff; box-shadow: 3px 3px 0 var(--c-lime); font-weight: 700; }
.wpcf7-form input[type="radio"], .wpcf7-form input[type="checkbox"] { width: 18px; height: 18px; accent-color: #2f3336; margin: 0; }
.wpcf7-form .cf-agree { text-align: center; margin: 28px 0 8px; }
.wpcf7-form .cf-agree .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.wpcf7-form .cf-submit { text-align: center; margin-top: 16px; position: relative; }
.wpcf7-form input[type="submit"] { appearance: none; font: inherit; font-size: 17px; font-weight: 700; color: #222; background: #fff; border: 3px solid #2b2b2b; border-radius: 999px; min-width: 300px; min-height: 64px; padding: 12px 40px; box-shadow: 6px 6px 0 var(--c-lime); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.wpcf7-form input[type="submit"]:hover:not(:disabled) { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--c-lime); }
.wpcf7-form input[type="submit"]:disabled { opacity: .45; cursor: not-allowed; }
.wpcf7-form .wpcf7-spinner { position: absolute; margin: 22px 0 0 12px; }
.wpcf7-not-valid-tip { color: #c0392b; font-size: 13px; margin-top: 6px; }
.wpcf7-form .wpcf7-not-valid { border-color: #c0392b; background: #fff6f5; }
.wpcf7 form .wpcf7-response-output { margin: 24px 0 0; padding: 14px 18px; border-radius: 4px; font-size: 15px; text-align: center; }

/* 旧レイアウト（label の中に入力欄）のフォームにも対応 */
.wpcf7-form > label, .wpcf7-form > p > label { display: block; font-weight: 700; margin-bottom: 16px; }
.wpcf7-form > label input, .wpcf7-form > label select, .wpcf7-form > label textarea { margin-top: 6px; }

@media (max-width: 860px) {
	.contact-ways { padding: 40px 0 16px; }
	.contact-ways__grid { grid-template-columns: 1fr; gap: 18px; }
	.contact-steps { grid-template-columns: 1fr; gap: 10px; }
	.contact-steps li:not(:last-child)::after { display: none; }
	.contact-form-box { padding: 32px 18px 28px; }
	.wpcf7-form .cf-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
	.wpcf7-form .cf-label { padding-top: 0; }
	.wpcf7-form input[type="submit"] { min-width: 0; width: 100%; }
}