<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>お問い合わせフォーム</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
background:
radial-gradient(circle at top, #dbeafe 0%, #f8fafc 45%, #e2e8f0 100%);
color: #1e293b;
}
.container {
width: min(100%, 420px);
padding: 32px 28px;
border-radius: 24px;
background-color: rgba(255, 255, 255, 0.92);
box-shadow: 0 20px 45px rgba(15, 23, 42, 0.14);
border: 1px solid rgba(148, 163, 184, 0.25);
}
.btn {
min-width: 160px;
padding: 14px 20px;
border: none;
border-radius: 999px;
background-color: #333;
color: #fff;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.05em;
cursor: pointer;
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
filter 0.2s ease;
}
.btn.primary {
background: linear-gradient(135deg, #2563eb, #7c3aed);
box-shadow: 0 14px 30px rgba(37, 99, 235, 0.28);
}
.btn:hover {
filter: brightness(105%);
transform: translateY(-2px);
}
.align-center {
text-align: center;
}
.form-title {
margin: 0 0 8px;
font-size: 28px;
text-align: center;
}
.form-description {
margin: 0 0 28px;
text-align: center;
color: #475569;
line-height: 1.7;
font-size: 14px;
}
form {
display: grid;
gap: 20px;
}
.form-control {
display: grid;
gap: 8px;
}
.form-label {
font-size: 14px;
font-weight: 700;
color: #334155;
}
.form-input {
width: 100%;
padding: 12px 14px;
border: 1px solid #cbd5e1;
border-radius: 14px;
background-color: #f8fafc;
font-size: 16px;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
background-color 0.2s ease;
}
textarea.form-input {
min-height: 140px;
resize: vertical;
line-height: 1.7;
}
.form-input:focus {
outline: none;
border-color: #60a5fa;
background-color: #fff;
box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18);
}
.radio-group {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.radio-label {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border: 1px solid #cbd5e1;
border-radius: 999px;
background-color: #f8fafc;
cursor: pointer;
font-weight: 500;
}
.radio-input {
accent-color: #2563eb;
}
</style>
</head>
<body>
<div class="container">
<form action="confirm.php" method="post">
<h1 class="form-title">お問い合わせ</h1>
<p class="form-description">
必要事項を入力して、送信ボタンを押してください。
</p>
<div class="form-control">
<label class="form-label" for="name">氏名</label>
<input type="text" class="form-input" id="name" name="name" placeholder="例: 山田 太郎">
</div>
<div class="form-control">
<label class="form-label" for="email">メールアドレス</label>
<input type="email" class="form-input" id="email" name="email" placeholder="例: taro@example.com">
</div>
<div class="form-control">
<div class="form-label">性別</div>
<div class="radio-group">
<label class="radio-label" for="gender-man">
<input type="radio" class="radio-input" id="gender-man" name="gender" value="man">
男
</label>
<label class="radio-label" for="gender-woman">
<input type="radio" class="radio-input" id="gender-woman" name="gender" value="woman">
女
</label>
</div>
</div>
<div class="form-control">
<label class="form-label" for="message">お問い合わせ内容</label>
<textarea class="form-input" id="message" name="message" placeholder="お問い合わせ内容を入力してください"></textarea>
</div>
<div class="align-center">
<button type="submit" class="btn primary">送信</button>
</div>
</form>
</div>
</body>
</html>
