:root{
  /* Core color palette */
  --primary-red:#861c3c;
  --text-dark:#383635;

  /* Neutrals */
  --bg:#ffffff;
  --bg-alt:#f6f7f8;
  --line:#e5e7eb;
  --muted:#6a6867;

  /* Mapped tokens */
  --text: var(--text-dark);
  --link: var(--primary-red);

  /* Layout */
  --max: 960px;
  --radius: 14px;
}

/* Reset */
*{ box-sizing:border-box; }
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
}

/* Typography */
body{
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic UI",
    "Yu Gothic",
    "Meiryo",
    "Noto Sans JP",
    Arial,
    sans-serif;
  line-height:1.75;
  letter-spacing:.01em;
}

a{
  color:var(--link);
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}

/* Layout helpers */
.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 18px;
}

/* Skip link */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:18px;
  top:18px;
  width:auto;
  height:auto;
  background:#fff;
  border:1px solid var(--line);
  padding:10px 12px;
  border-radius:10px;
  z-index:1000;
}

/* Header */
.site-header{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:50;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.brand{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.brand .name{
  font-size:18px;
  font-weight:700;
  letter-spacing:.02em;
}
.brand .tag{
  font-size:12px;
  color:var(--muted);
}

/* Navigation */
.nav{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.nav a{
  font-size:13px;
  color:var(--text);
  padding:8px 10px;
  border-radius:10px;
}
.nav a:hover{
  background:var(--bg-alt);
  text-decoration:none;
}
.nav a[aria-current="page"]{
  background:var(--bg-alt);
  border:1px solid var(--line);
  box-shadow: inset 3px 0 0 var(--primary-red);
}

/* Main */
.main{
  padding:26px 0 40px;
}

/* Hero */
.hero{
  padding:26px 0 10px;
}
.hero h1{
  margin:0 0 10px;
  font-size:28px;
  letter-spacing:.02em;
}
.hero p{
  margin:0;
  max-width:70ch;
  color:var(--muted);
}

/* Sections */
.section{
  margin-top:22px;
}

/* Cards */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
}
.card + .card{
  margin-top:14px;
}

.h2{
  margin:0 0 10px;
  font-size:18px;
}

.lead{
  margin:0;
  max-width:75ch;
  color:var(--muted);
}

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

/* Notes / disclaimers */
.note{
  margin-top:12px;
  padding:12px 14px;
  background:var(--bg-alt);
  border-left:3px solid var(--primary-red);
  border-radius:12px;
  font-size:13px;
  color:var(--muted);
}

/* Tables */
.table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
}

.table th,
.table td{
  border-top:1px solid var(--line);
  padding:10px 8px;
  text-align:left;
  vertical-align:top;
}

.table tr:first-child th,
.table tr:first-child td{
  border-top:none;
}

.table th{
  width:120px;
  font-weight:600;
  white-space:nowrap;
}

@media (max-width: 640px){

  .table{
    border-collapse:separate;
  }

  .table tr{
    display:block;
    margin-bottom:14px;
  }

  .table th,
  .table td{
    display:block;
    width:100%;
    border-top:none;
    padding:4px 0;
  }

  .table th{
    font-size:13px;
    color:var(--muted);
    margin-bottom:2px;
  }

  .table td{
    font-size:15px;
  }
}

.table tr{
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}


.footnote{
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 640px){

  .container{
    padding-left:22px;
    padding-right:22px;
  }

  .brand .name{
    font-size:20px;
  }

  .brand .tag{
    font-size:12px;
    line-height:1.6;
  }

}

@media (max-width: 640px){

  .header-inner{
    padding:18px 0;
  }

}