*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --c-01: #2c3138;
    --c-02: #454d57;
    --c-03: #f0761f;
    --c-04: #f5f5f3;
    --c-05: #1c1f24;
    --c-06: #ffffff;
    --c-07: #5f6771;
    --c-08: #e3e2dd;
    --c-09: #fdf1e6;
    --c-10: #c25a10;
    --c-11: #faf9f6;
    --f-01: "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
    --f-02: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --r-01: 6px;
    --r-02: 14px;
    --r-03: 24px;
    --sh-01: 0 2px 8px rgba(28, 31, 36, .06);
    --sh-02: 0 10px 28px rgba(28, 31, 36, .10);
    --sh-03: 0 18px 46px rgba(28, 31, 36, .18);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--f-01);
    background: var(--c-04);
    color: var(--c-05);
    line-height: 1.7;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--c-10); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--c-03); }

/* ---- header ---- */
.head-01 {
    background: var(--c-01);
    padding: 20px;
    text-align: center;
    border-bottom: 3px solid var(--c-03);
}
.head-02 { max-width: 1100px; margin: 0 auto; }
.brand-02 {
    display: inline-block;
    font-family: var(--f-02);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--c-06);
    text-decoration: none;
}
.brand-02:hover { color: var(--c-03); }

/* ---- hero ---- */
.hero-01 {
    padding: 52px 20px 26px;
    text-align: center;
}
.tag-02 {
    display: inline-block;
    padding: 5px 14px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: var(--c-03);
    color: var(--c-06);
    font-family: var(--f-02);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.title-03 {
    max-width: 860px;
    margin: 0 auto 12px;
    font-family: var(--f-02);
    font-size: clamp(27px, 4.4vw, 44px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.01em;
    color: var(--c-01);
}
.sub-04 {
    max-width: 640px;
    margin: 0 auto;
    color: var(--c-07);
    font-size: 16px;
}

/* ---- layout ---- */
.wrap-02 { max-width: 960px; margin: 0 auto; padding: 0 20px 70px; }

/* ---- summary panel ---- */
.sum-01 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1px;
    background: var(--c-08);
    border: 1px solid var(--c-08);
    border-radius: var(--r-02);
    overflow: hidden;
    box-shadow: var(--sh-02);
    margin-bottom: 34px;
}
.sum-02 { background: var(--c-06); padding: 18px 20px; }
.sum-03 {
    font-family: var(--f-02);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-03);
    margin-bottom: 5px;
}
.sum-04 { font-size: 15px; line-height: 1.55; color: var(--c-02); }

/* ---- sections ---- */
.zone-01 { margin-bottom: 34px; }
.zone-02 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--f-02);
    font-size: clamp(19px, 2.6vw, 25px);
    font-weight: 800;
    line-height: 1.25;
    color: var(--c-01);
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--c-08);
}
.zone-03 {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 800;
    color: var(--c-03);
    letter-spacing: .06em;
}
.zone-04 { color: var(--c-07); font-size: 15px; margin-bottom: 14px; }

/* ---- zebra table ---- */
.grid-01 {
    width: 100%;
    border-collapse: collapse;
    background: var(--c-06);
    border: 1px solid var(--c-08);
    border-radius: var(--r-02);
    overflow: hidden;
    box-shadow: var(--sh-01);
    font-size: 15px;
}
.grid-01 caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 8px;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--c-07);
}
.grid-01 th {
    background: var(--c-01);
    color: var(--c-06);
    text-align: left;
    padding: 12px 16px;
    font-family: var(--f-02);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    vertical-align: top;
}
.grid-01 td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--c-08);
    color: var(--c-02);
    vertical-align: top;
    line-height: 1.62;
}
.grid-01 tbody tr:nth-child(odd) td { background: var(--c-06); }
.grid-01 tbody tr:nth-child(even) td { background: var(--c-11); }
.grid-01 tbody tr:last-child td { border-bottom: none; }
.grid-01 tbody tr:hover td { background: var(--c-09); }
.grid-01 td:first-child {
    color: var(--c-05);
    font-weight: 700;
    width: 34%;
    border-left: 3px solid transparent;
}
.grid-01 tbody tr:hover td:first-child { border-left-color: var(--c-03); }
.grid-01 strong { color: var(--c-05); }

.hold-03 { width: 100%; overflow-x: auto; }
@media (max-width: 600px) {
    .grid-01 { font-size: 14px; min-width: 460px; }
    .grid-01 td:first-child { width: 40%; }
}

/* ---- callout ---- */
.note-03 {
    margin: 18px 0 0;
    padding: 16px 18px;
    border-radius: var(--r-01);
    background: var(--c-09);
    border-left: 4px solid var(--c-03);
    color: var(--c-02);
    font-size: 15px;
    line-height: 1.62;
}
.note-03 strong { color: var(--c-05); }

/* ---- footer ---- */
.foot-01 {
    margin-top: 20px;
    background: var(--c-01);
    color: #9aa2ac;
    padding: 26px 20px 22px;
    text-align: center;
    border-top: 3px solid var(--c-03);
}
.foot-02 { max-width: 900px; margin: 0 auto; }
.foot-03 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    margin-bottom: 14px;
}
.foot-03 a { color: #c9ced4; font-size: 12px; text-decoration: none; }
.foot-03 a:hover { color: var(--c-03); }
.foot-04 { font-size: 12px; color: #b3bac1; margin-bottom: 10px; }
.foot-05 {
    font-size: 11px;
    line-height: 1.7;
    color: #858e98;
    max-width: 760px;
    margin: 0 auto;
}