<div class="cf-wrap">
<h3 class="cf-title">お問い合わせ</h3>
<p class="cf-lead">ご不明な点やご相談は、下記フォームよりお気軽にお問い合わせください。</p>
<form class="cf-form" action="">
<label class="cf-field">
<span class="cf-label">お名前<span class="cf-required">必須</span></span>
<input class="cf-input" type="text" name="name" placeholder="山田 太郎" required>
</label>
<label class="cf-field">
<span class="cf-label">メールアドレス<span class="cf-required">必須</span></span>
<input class="cf-input" type="email" name="email" placeholder="example@mail.com" required>
</label>
<label class="cf-field">
<span class="cf-label">電話番号<span class="cf-optional">任意</span></span>
<input class="cf-input" type="tel" name="tel" placeholder="03-0000-0000">
</label>
<label class="cf-field">
<span class="cf-label">お問い合わせ内容<span class="cf-required">必須</span></span>
<textarea class="cf-textarea" name="message" rows="5" placeholder="お問い合わせ内容をご記入ください" required></textarea>
</label>
<p class="cf-note">みなと総合クリニック（東京都港区0-0-0／電話 03-0000-0000）</p>
<button class="cf-submit" type="submit">送信する</button>
</form>
</div>
.cf-wrap {
--cf-accent: #2f8f9d; /* ボタン・フォーカス枠の色（医院のテーマ色に変更してください） */
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
max-width: 560px;
margin: 0 auto;
box-sizing: border-box;
}
.cf-wrap * { box-sizing: border-box; }
.cf-title {
margin: 0 0 .5em;
text-align: center;
font-size: 1.2rem;
font-weight: 700;
color: #2d3339;
letter-spacing: .06em;
}
.cf-lead {
margin: 0 0 1.6em;
text-align: center;
font-size: .88rem;
line-height: 1.8;
color: #6b7280;
}
.cf-form {
background: #fff;
border: 1px solid #eef0f2;
border-radius: 14px;
padding: 1.8em 1.6em;
box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}
.cf-field {
display: block;
margin-bottom: 1.2em;
}
.cf-field:last-of-type {
margin-bottom: 1.4em;
}
.cf-label {
display: flex;
align-items: center;
gap: .5em;
margin-bottom: .5em;
font-size: .88rem;
font-weight: 700;
color: #2d3339;
}
.cf-required,
.cf-optional {
font-size: .68rem;
font-weight: 700;
padding: .15em .5em;
border-radius: 4px;
line-height: 1.5;
}
.cf-required {
color: #fff;
background: #e0685f;
}
.cf-optional {
color: #6b7280;
background: #f3f4f6;
}
.cf-input,
.cf-textarea {
display: block;
width: 100%;
padding: .75em .9em;
font-size: .92rem;
font-family: inherit;
color: #2d3339;
background: #fafafa;
border: 1px solid #e5e7eb;
border-radius: 8px;
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.cf-input::placeholder,
.cf-textarea::placeholder {
color: #b0b6bd;
}
.cf-textarea {
min-height: 7.5em;
line-height: 1.7;
resize: vertical;
}
.cf-input:focus,
.cf-textarea:focus {
outline: none;
background: #fff;
border-color: var(--cf-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-accent) 20%, transparent);
}
.cf-note {
margin: 0 0 1.4em;
font-size: .76rem;
line-height: 1.7;
color: #9aa1a9;
text-align: center;
}
.cf-submit {
display: block;
width: 100%;
padding: .9em 1em;
font-size: .95rem;
font-weight: 700;
font-family: inherit;
color: #fff;
background: var(--cf-accent);
border: none;
border-radius: 8px;
cursor: pointer;
letter-spacing: .05em;
transition: opacity .15s ease, transform .15s ease;
}
.cf-submit:hover {
opacity: .9;
}
.cf-submit:active {
transform: translateY(1px);
}
.cf-submit:focus-visible {
outline: 2px solid var(--cf-accent);
outline-offset: 2px;
}
@media (max-width: 480px) {
.cf-form { padding: 1.4em 1.1em; }
.cf-title { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
.cf-input,
.cf-textarea,
.cf-submit {
transition: none;
}
}