/* ===== Design Tokens (Corporate JP) ===== */
:root{
  --bg:#ffffff;
  --text:#1f2937;            /* gray-800 */
  --muted:#6b7280;           /* gray-500 */
  --line:#e5e7eb;            /* gray-200 */
  --panel:#ffffff;
  --elev:#f8fafc;            /* slate-50 */
  --primary:#0a5eb0;         /* corporate blue */
  --primary-600:#0b4f93;
  --primary-50:#f0f7ff;
  --accent:#0ea5e9;          /* cyan-ish for tiny highlights */
  --success:#15803d;
  --danger:#b91c1c;
  --radius:12px;
  --radius-sm:10px;
  --maxw:1120px;
  --shadow:0 4px 16px rgba(0,0,0,.06);
  --shadow-sm:0 2px 10px rgba(0,0,0,.04);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:"Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height:1.75; font-size:16px;
}
img{max-width:100%; height:auto; border:0}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
small,.small{font-size:12px; color:var(--muted)}

.wrap{max-width:var(--maxw); margin:0 auto; padding:28px 16px}
section{padding:44px 0; scroll-margin-top:84px}
h1{font-size:clamp(26px,3.4vw,34px); line-height:1.3; margin:0 0 10px; font-weight:700}
h2{font-size:clamp(22px,2.6vw,26px); margin:0 0 14px; font-weight:700}
h3{font-size:18px; margin:6px 0 10px; font-weight:600}
p{margin:10px 0}
.muted{color:var(--muted)}
.kicker{font-size:12px; letter-spacing:.12em; color:var(--primary-600); text-transform:uppercase}

/* ===== Header / Nav ===== */
header{
  position:sticky; top:0; z-index:20;
  background:#fffcc0; /* prevent iOS overscroll flash */ 
  background:#fff;
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(1.2) blur(6px);
}
.nav{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
}
.brand{
  font-weight:700; color:var(--primary-600); letter-spacing:.2px;
}
.nav a{
  margin:0 10px; color:#111827; /* gray-900 */
  padding:8px 6px; border-radius:8px;
}
.nav a:hover{
  text-decoration:none; background:var(--elev);
  box-shadow:var(--shadow-sm);
}
.nav .btn{margin-left:6px}

/* ===== Hero ===== */
.hero{
  padding:70px 16px 36px;
  background:
    linear-gradient(180deg, var(--primary-50), transparent 60%),
    linear-gradient(90deg, rgba(10,94,176,.05), rgba(14,165,233,.0));
  border-bottom:1px solid var(--line);
}
.hero p{color:#475569} /* slate-600 */
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}

/* ===== Buttons ===== */
.btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:10px;
  background:var(--primary); color:#fff;
  font-weight:700; border:1px solid rgba(0,0,0,.02);
  box-shadow:var(--shadow);
}
.btn:hover{filter:brightness(0.98)}
.btn.ghost{
  background:#fff; color:var(--primary);
  border:1px solid var(--primary); box-shadow:none;
}
.btn.text{background:transparent; border:none; color:var(--primary-600); font-weight:600; padding:8px 4px}

/* ===== Grid / Card ===== */
.grid{display:grid; gap:18px}
.grid.cols-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width:960px){
  .grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow-sm);
}
.card h3{margin-top:4px}
.badge{
  display:inline-block; font-size:12px;
  color:#0b3f6a; background:#edf6ff; border:1px solid #cfe6ff;
  padding:2px 8px; border-radius:999px; margin-right:6px;
}

/* ===== Lists / Tables ===== */
.list{padding-left:18px}
.list li{margin:6px 0}

.table{width:100%; border-collapse:separate; border-spacing:0}
.table thead th{
  text-align:left; font-weight:600; background:#f6f7fb; border-bottom:1px solid var(--line);
  padding:12px 14px;
}
.table td{
  padding:12px 14px; border-bottom:1px solid var(--line);
}
.table tbody tr:hover td{background:#fafafa}

/* ===== Breadcrumb ===== */
.breadcrumb{
  font-size:12px; color:#6b7280; margin:6px 0 0;
}
.breadcrumb a{color:#6b7280}
.breadcrumb a:hover{color:#374151}

/* ===== Forms ===== */
.input, textarea{
  width:100%; padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff; color:var(--text);
}
textarea{min-height:140px; resize:vertical}
.stack{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.note{
  background:#f0f9ff; border-left:3px solid var(--accent);
  padding:10px 12px; border-radius:8px;
}
.error{color:var(--danger); font-weight:600}
.ok{color:var(--success); font-weight:700}
.qr{
  width:120px; height:120px;
  background:repeating-linear-gradient(45deg, rgba(0,0,0,.06), rgba(0,0,0,.06) 6px, transparent 6px, transparent 12px);
  border-radius:10px; border:1px dashed var(--line);
}

/* ===== Footer ===== */
footer{
  border-top:1px solid var(--line);
  background:#fff;
  padding:28px 0; margin-top:40px;
}
footer .wrap{padding-top:0; padding-bottom:0}

/* ===== Responsive Header (追加) ===== */
.nav{
  display:flex; align-items:center; justify-content:space-between;
}
.nav-toggle{
  display:none; margin-left:auto;
  width:44px; height:40px; border:1px solid var(--line);
  border-radius:10px; background:#fff; cursor:pointer;
}
.nav-toggle:focus{outline:2px solid #9ac7ff; outline-offset:2px}
.nav-toggle-bar{
  display:block; width:22px; height:2px; background:#111827; margin:5px auto; border-radius:2px;
}
.nav-links{display:flex; gap:10px; align-items:center}
@media (max-width: 960px){
  .nav-toggle{display:block}
  .nav-links{
    position:absolute; top:60px; left:0; right:0;
    background:#fff; border-top:1px solid var(--line);
    display:block; padding:10px 16px; box-shadow:var(--shadow);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
  }
  .nav-links a{display:block; padding:10px 8px; margin:0; border-radius:8px}
  .nav-links.open{transform:translateY(0); opacity:1; pointer-events:auto}
  .nav .btn{display:block; margin-top:6px}
}