:root{
--bg:#f4f6f9;
--card:#ffffff;
--text:#1a1f2b;
--muted:#556070;
--border:#d7dde6;
--primary:#0b5cab;
--primary-hover:#084a89;
--danger:#b42318;
--radius:14px;}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
margin:0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
color:var(--text);
background:var(--bg);
line-height:1.6;}
a{ color:var(--primary); }
.container{
max-width: 820px;
margin: 0 auto;
padding: 18px 14px 40px;}
.page-header{
margin: 10px 0 14px;}
.page-header h1,
.page-header h2,
.page-header h3{
margin:0;
font-weight: 700;
letter-spacing: .02em;}
.page-header .subtitle{
margin-top:6px;
color:var(--muted);
font-size: .95rem;}
.card{
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 1px 2px rgba(16,24,40,.06);
padding: 18px;}
@media (min-width: 768px){
.card{ padding: 22px 24px; }}
hr{
border:0;
border-top: 1px solid var(--border);
margin: 16px 0;}
form{ margin:0; }
.card{
word-break: break-word;}
label{
display: inline-flex;
align-items: center;
gap: .45rem;
margin: .25rem .9rem .25rem 0;}
input[type="radio"], input[type="checkbox"]{
transform: translateY(1px);}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea{
width: 100%;
max-width: 520px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: #fff;
color: var(--text);
font-size: 16px;
line-height: 1.4;}
select{ max-width: 220px; }
input[size]{ width: 100%; }
small, .note{
color: var(--muted);
font-size: .92rem;}
.form-actions{
margin-top: 18px;
display: flex;
flex-wrap: wrap;
gap: 10px;}
button,
input[type="submit"],
input[type="button"],
input[type="reset"]{
appearance: none;
border-radius: 12px;
border: 1px solid var(--border);
background: #fff;
color: var(--text);
padding: 12px 16px;
font-size: 1rem;
cursor: pointer;}
input[type="submit"], .btn-primary{
background: var(--primary);
border-color: var(--primary);
color: #fff;
font-weight: 700;}
input[type="submit"]:hover, .btn-primary:hover{
background: var(--primary-hover);
border-color: var(--primary-hover);}
input[type="reset"], .btn-secondary{
background: #fff;}
@media (max-width: 640px){
.form-actions > *{ width: 100%; }}
.kv{
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-top: 10px;}
.kv .row{
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 12px;
background: #fff;}
.kv .label{
color: var(--muted);
font-size: .92rem;}
.kv .value{
margin-top: 2px;
font-weight: 600;}
.alert{
padding: 12px 14px;
border-radius: 12px;
border: 1px solid #f4c7c7;
background: #fff6f6;
color: var(--danger);}