/* ==== Rirekisho UI — Sky Blue / Black / White Theme (merged) ==== */
:root{
  --sky:#1e90ff; --sky-2:#0f6bd8; --ink:#0b0f14; --ink-2:#222831;
  --paper:#ffffff; --muted:#6b7280; --ring:rgba(30,144,255,.35);
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#f8fbff,#eef6ff);
  color:var(--ink);
  font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}

/* ---- App bar ---- */
.appbar{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(10px); background:rgba(255,255,255,.75); border-bottom:1px solid rgba(0,0,0,.06) }
.appbar .wrap{ max-width:1100px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between }
.appbar h1{ margin:0; font-size:18px; font-weight:700; letter-spacing:.2px }
.appbar .home{ color:var(--sky); text-decoration:none; font-weight:600; padding:8px 12px; border-radius:8px; border:1px solid rgba(30,144,255,.25); transition:all .2s ease }
.appbar .home:hover{ background:rgba(30,144,255,.08) }

/* ---- Layout ---- */
.wrap{ max-width:1100px; margin:24px auto; padding:0 20px }
.card{ background:var(--paper); border-radius:16px; box-shadow:var(--shadow); padding:22px; border:1px solid rgba(0,0,0,.06) }

/* ---- Headings ---- */
h2{ margin:0 0 14px; font-size:18px; font-weight:800; display:flex; align-items:center; gap:10px }
h2::before{ content:''; width:8px; height:22px; border-radius:8px; background:linear-gradient(180deg,var(--sky),var(--sky-2)) }

/* ---- Grid ---- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.grid-2 .col-2{ grid-column:1 / -1 }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr } }

/* ---- Inputs ---- */
label{ display:flex; flex-direction:column; gap:6px; font-weight:600; color:var(--ink-2) }
input[type="text"],input[type="email"],input[type="tel"],input[type="number"],select,textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid #dfe7f3; background:#fff; color:#0b1220;
  outline:none; transition:border .15s ease, box-shadow .15s ease, transform .05s ease;
}
textarea{ resize:vertical }
input:focus,select:focus,textarea:focus{ border-color:var(--sky); box-shadow:0 0 0 4px var(--ring) }
input:hover,select:hover,textarea:hover{ border-color:#c9d9f0 }
input.date-ym,#dob{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace }

/* ---- Buttons ---- */
.btn{ appearance:none; border:none; cursor:pointer; user-select:none; border-radius:12px; padding:12px 18px; font-weight:700;
  background:#eef5ff; color:#0b1220; border:1px solid #dbe8ff; transition:transform .06s ease, box-shadow .2s ease, background .2s ease, border .2s ease }
.btn:hover{ background:#e6f0ff; box-shadow:0 6px 16px rgba(30,144,255,.18) }
.btn:active{ transform:translateY(1px) }
.btn.primary{ background:linear-gradient(180deg,var(--sky),var(--sky-2)); color:#fff; border:1px solid rgba(0,0,0,.05) }
.btn.primary:hover{ box-shadow:0 10px 22px rgba(30,144,255,.35) }

.nav{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px }

/* ---- Repeater tables ---- */
.table{ width:100%; border-collapse:separate; border-spacing:0 8px }
.table thead th{ text-align:left; font-size:12px; letter-spacing:.2px; color:var(--muted); font-weight:800; padding:6px 6px 4px }
.table tbody tr{ background:#fff; box-shadow:var(--shadow) }
.table tbody td{ padding:10px; border-top:1px solid rgba(0,0,0,.05); border-bottom:1px solid rgba(0,0,0,.05) }
.table tbody tr td:first-child{ border-left:1px solid rgba(0,0,0,.05); border-top-left-radius:12px; border-bottom-left-radius:12px }
.table tbody tr td:last-child{ border-right:1px solid rgba(0,0,0,.05); border-top-right-radius:12px; border-bottom-right-radius:12px }

.row-add,.row-del{ padding:8px 12px; border-radius:10px; border:1px solid #e5ecfb; background:#f6f9ff; cursor:pointer; transition:all .15s ease }
.row-add:hover{ background:#e9f2ff }
.row-del{ background:#fff3f3; border-color:#ffdada }
.row-del:hover{ background:#ffe8e8 }

/* ---- Column widths to match Kaigo feel ---- */
.table.edu col.yy{width:110px}
.table.edu col.mm{width:80px}
.table.edu col.inst{width:40%}    /* 学校名（＝institution） */
.table.edu col.fac{width:140px}
.table.edu col.level{width:120px}
.table.edu col.status{width:140px}
.table.edu col.yy2{width:110px}
.table.edu col.mm2{width:80px}

.table.exp col.yy{width:80px}
.table.exp col.mm{width:60px}
.table.exp col.org{width:280px}   /* 会社名 */
.table.exp col.title{width:140px}
.table.exp col.status{width:110px}
.table.exp col.yy2{width:80px}
.table.exp col.mm2{width:60px}

.table.lic col.yy{width:110px}
.table.lic col.mm{width:80px}
.table.lic col.name{width:auto}

/* ---- Photo preview ---- */
.photo-preview{ margin-top:8px; padding:8px; border:1px dashed #cfe0ff; border-radius:12px; background:#f8fbff }
.photo-preview img{ display:block; max-width:180px; max-height:240px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.12) }

/* ---- Notes / boxes ---- */
.rule-box{ margin-top:14px; border:1px solid #e5e7eb; background:#fafafa; border-radius:8px; padding:12px 14px; color:#64748b; font-size:12.5px; line-height:1.5 }
.rule-box ol{ margin:0 0 0 1.2em; padding:0 }
.rule-box li{ margin:3px 0 }
.rule-box .ban{ color:#b91c1c; font-weight:700 }
.banner{ margin:10px 0 0 0; font-size:.9rem; color:#0b3772 }

/* ---- Footer ---- */
.site-footer{ position:relative; left:0; right:0; bottom:0; z-index:5; background:#000; color:#fff; text-align:center; padding:10px 12px; font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center; height:50px; margin-top:10px }

/* === Step slider (absolute, no flicker) === */
.steps{ position:relative; overflow:hidden; transition:height .28s ease }
.step-pane{ position:absolute; inset:0; width:100%; display:block; opacity:0; pointer-events:none; transform:translateX(24px); will-change:transform,opacity }
.step-pane.is-active{ opacity:1; pointer-events:auto; transform:none; z-index:1 }
.slide-in-right{ animation:slideInFromRight .28s ease forwards; z-index:2 }
.slide-out-left{ animation:slideOutToLeft .22s ease forwards; z-index:1 }
.slide-in-left{ animation:slideInFromLeft .28s ease forwards; z-index:2 }
.slide-out-right{ animation:slideOutToRight .22s ease forwards; z-index:1 }
@keyframes slideInFromRight{ from{ transform:translateX(24px); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes slideOutToLeft{ from{ transform:none; opacity:1 } to{ transform:translateX(-24px); opacity:0 } }
@keyframes slideInFromLeft{ from{ transform:translateX(-24px); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes slideOutToRight{ from{ transform:none; opacity:1 } to{ transform:translateX(24px); opacity:0 } }



/* --- Progress Bar (labels + thin bar) --- */
#progressWrap{
  max-width:1100px;
  margin:16px auto 0;
  padding:0 20px; /* visually 20px margins L/R */
}
#progressWrap .progress-labels{
  list-style:none; margin:0 0 6px 0; padding:0;
  display:flex; align-items:center; justify-content:space-between;
}
#progressWrap .progress-labels li{
  font-weight:800; font-size:10px; letter-spacing:.5px;
  color:#111; opacity:.75; user-select:none;
}
#progressWrap .progress-labels li.is-active{ opacity:1 }
#progressWrap .progress-labels li.is-dim   { opacity:.45 }

#progressWrap .progress-track{
  height:10px;
  border:1px solid #000;        /* black border like sample */
  border-radius:5px;
  overflow:hidden;
  background:#fff;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.15);
}
#progressWrap .progress-fill{
  height:100%;
  width:0%;
  background:#1e90ff;           /* sky */
  transition:width .35s ease;   /* smooth raise */
}