<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title></title>
<style>
html, body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
color: #222;
background: #fff;
line-height: 1.6;
font-size: 14px;
}
.page { padding: 20px; }
.title { margin: 0 0 18px 0; color: #6b6b6b; font-size: 14px; }
.form-wrap {
margin-left: 150px;
margin-top: 10px;
max-width: 500px;
}
.name-row {
display: flex;
gap: 16px;
margin-bottom: 12px;
}
.field-group {
display: flex;
flex-direction: column;
flex: 1;
}
.field-label {
font-weight: 700;
margin-bottom: 4px;
}
.req {
color: #f0b400;
margin-left: 2px;
}
input[type="text"], input[type="email"] {
width: 100%;
height: 28px;
border: 1px solid #c9c9c9;
border-radius: 2px;
padding: 2px 6px;
outline: none;
box-sizing: border-box;
}
.form-row {
display: flex;
flex-direction: column;
margin-bottom: 12px;
}
.submit-row { margin-top: 12px; }
button[type="submit"] {
width: 50px;
height: 28px;
border: 1px solid #bdbdbd;
background: #e9e9e9;
border-radius: 3px;
cursor: pointer;
}
button[type="submit"]:hover { filter: brightness(0.97); }
@media (max-width: 768px){
.form-wrap{ margin-left: 0; max-width: 100%; }
.name-row { flex-direction: column; }
}
</style>
</head>
<body>
<div class="page">
<form class="form-wrap" action="#" method="post">
<div class="name-row">
<div class="field-group">
<label class="field-label">姓<span class="req">＊</span></label>
<input type="text" name="last_name" autocomplete="family-name">
</div>
<div class="field-group">
<label class="field-label">名<span class="req">＊</span></label>
<input type="text" name="first_name" autocomplete="given-name">
</div>
</div>
<div class="form-row">
<label class="field-label">会社<span class="req">＊</span></label>
<input type="text" name="company">
</div>
<div class="form-row">
<label class="field-label">メール<span class="req">＊</span></label>
<input type="email" name="email" autocomplete="email">
</div>
<div class="submit-row">
<button type="submit" aria-label="送信">送信</button>
</div>
</form>
</div>
</body>
</html>