:root{
  /* Brand palette sourced from habilis-co.jp (--habilis-blue / --bgc-blue /
     --habilis-dark / --main-bg / --light-blue custom properties on the
     corporate site) so the portal reads as the same brand, not a lookalike. */
  --navy:#005BAC;
  --teal:#0072BF;
  --sky:#0084CF;
  --sky-pale:#E5F4FD;
  --bg:#F1FAFF;
  --card:#FFFFFF;
  --coral:#F2846B;
  --coral-pale:#FDECE7;
  --ink:#1A1A1A;
  --muted:#5C7480;
  --line:#D9ECF7;

  --tag-pre:#005BAC;
  --tag-pre-bg:#E3EEF4;
  --tag-day1:#2E8B6E;
  --tag-day1-bg:#E4F5EE;
  --tag-field:#B9622A;
  --tag-field-bg:#FBEADE;

  --danger:#B23B3B;
  --warn:#C79A2E;
  --low:#8C9AA1;

  --radius-lg:16px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow-card:0 10px 22px rgba(0,91,172,0.10);
  --shadow-pop:0 12px 30px rgba(0,60,110,0.25);

  --sidebar-width:232px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Noto Sans JP",sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand{font-family:"Zen Maru Gothic",sans-serif;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

.gradient-header{
  background:linear-gradient(135deg,var(--navy) 0%, var(--teal) 55%, var(--sky) 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.gradient-header::after{
  content:"";
  position:absolute; right:-60px; top:-60px;
  width:220px;height:220px;border-radius:50%;
  background:rgba(255,255,255,0.08);
}