/* 年次レポート「年収白書」専用装丁（設計書§13・pattern-E＝誌面型）。
   見た目の正＝docs/mockups/salary-top-pattern-e.html。白書ページ以外に適用しない。 */
:root{
  --paper:#faf8f2; --paper-2:#f3f0e7;
  --ink:#211e19; --sub:#6f6a5e; --faint:#a39c8c;
  --rule:#cfc8b6; --rule-ink:#8b8474;
  --green:#1e5b48; --green-soft:#e4ece7; --down:#9a3b2e;
  --display:"Shippori Mincho B1",serif; --body:"Noto Serif JP",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--paper);color:var(--ink);font-size:15.5px;line-height:2;font-variant-numeric:lining-nums}
a{color:inherit;text-decoration:none}
a:hover{color:var(--green);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.container{max-width:820px;margin:0 auto;padding:0 24px}
.rule-double{border-top:4px double var(--rule-ink)}
.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:8px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:10}

/* 題字ヘッダー */
.site-header{border-bottom:1px solid var(--rule)}
.site-header .container{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:22px 24px 14px}
.brand{display:flex;align-items:baseline;gap:14px}
.brand-name{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:.14em}
.brand-sub{font-size:11px;color:var(--sub);letter-spacing:.22em}
.header-nav{display:flex;gap:22px;font-size:13px;letter-spacing:.1em}
.issue{font-size:11px;color:var(--sub);letter-spacing:.16em;text-align:right}

/* 特集ヒーロー */
.hero{position:relative;padding:64px 0 52px;border-bottom:1px solid var(--rule)}
.hero .vert{position:absolute;top:64px;left:24px;writing-mode:vertical-rl;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.42em;color:var(--green);border-right:1px solid var(--rule);padding-right:14px;height:15em}
.hero-inner{max-width:640px;margin:0 auto;text-align:center}
.hero .kicker{font-size:12px;letter-spacing:.34em;color:var(--sub)}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,6.6vw,46px);line-height:1.7;letter-spacing:.06em;margin-top:18px}
.hero h1 .accent{color:var(--green)}
.hero .standfirst{font-size:14px;color:var(--sub);margin-top:18px;line-height:2.1}
.hero-figure{margin-top:40px}
.hero-figure .cap{font-size:11.5px;letter-spacing:.22em;color:var(--sub)}
.hero-figure .big{font-family:var(--display);font-weight:800;font-size:clamp(72px,17vw,128px);line-height:1.1;letter-spacing:.02em}
.hero-figure .big small{font-size:.3em;letter-spacing:.1em;margin-left:.1em}
.hero-figure .note{font-size:12.5px;color:var(--sub);margin-top:10px;line-height:1.9}
.hero-figure .note b{color:var(--ink);font-weight:600}
.delta{color:var(--green);font-weight:600}
.delta.down{color:var(--down)}

/* 章 */
.section{margin-top:64px}
.chapter{display:flex;align-items:baseline;gap:18px;padding-bottom:12px}
.chapter .ch-label{writing-mode:vertical-rl;font-size:11px;letter-spacing:.3em;color:var(--green);border-left:1px solid var(--rule);padding-left:8px;height:5.5em;flex:none;transform:translateY(4px)}
.chapter h2{font-family:var(--display);font-weight:700;font-size:clamp(20px,4vw,25px);letter-spacing:.1em}
.chapter .more{margin-left:auto;font-size:12px;letter-spacing:.14em;color:var(--sub);white-space:nowrap}
.section .rule-double{margin-top:0}
.lead-note{margin-top:22px;font-size:14.5px;line-height:2.1}
.lead-note b{color:var(--green);font-weight:600}

/* 図版：構成比帯 */
.figure-block{margin-top:28px;background:#fff;border:1px solid var(--rule);padding:26px 26px 22px}
.figure-block .fig-no{font-size:11px;letter-spacing:.26em;color:var(--green);font-weight:600}
.figure-block h3{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:.08em;margin-top:6px}
.comp-bar{display:flex;height:54px;margin-top:20px;border:1px solid var(--ink)}
.comp-bar a{display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:600;letter-spacing:.04em;min-width:0;overflow:hidden;white-space:nowrap}
.comp-bar a:hover{filter:brightness(1.12);text-decoration:none;color:#fff}
.comp-bar .s1{background:#9fbcae;color:var(--ink)}
.comp-bar .s2{background:#5f9279}
.comp-bar .s3{background:#356f57}
.comp-bar .s4{background:#1e5b48}
.comp-bar .s5{background:#123e30}
.comp-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:12px;color:var(--sub)}
.comp-legend i{display:inline-block;width:10px;height:10px;margin-right:7px;vertical-align:-1px}
.comp-legend b{color:var(--ink);font-weight:600;margin-left:4px}
.fig-note{font-size:12px;color:var(--sub);margin-top:16px;line-height:1.9}

/* ランキング（漢数字） */
.rank-list{margin-top:26px}
.rank-row{display:flex;align-items:baseline;gap:18px;padding:16px 4px;border-bottom:1px solid var(--rule);font-size:15.5px;min-height:52px}
.rank-row .pos{font-family:var(--display);font-weight:700;width:2.4em;color:var(--green);font-size:17px;flex:none}
.rank-row .name{flex:1;font-weight:600;letter-spacing:.04em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-row .name small{font-size:11.5px;color:var(--sub);font-weight:400;margin-left:10px;letter-spacing:.06em}
.rank-row .val{font-family:var(--display);font-weight:700;white-space:nowrap}
.rank-row .val small{font-size:.68em;margin-left:1px}

/* 業種：目次風 */
.toc{margin-top:26px;columns:2;column-gap:44px}
.toc a{display:flex;align-items:baseline;gap:8px;padding:9px 0;font-size:14px;break-inside:avoid}
.toc .t-name{font-weight:600;letter-spacing:.04em;white-space:nowrap}
.toc .leader{flex:1;border-bottom:1px dotted var(--faint);transform:translateY(-4px);min-width:16px}
.toc .t-val{font-family:var(--display);font-weight:700;white-space:nowrap;font-size:14.5px}
.toc .t-yoy{font-size:11.5px;color:var(--green);white-space:nowrap;width:3.6em;text-align:right}
.toc .t-yoy.down{color:var(--down)}

/* トピック */
.topic{margin-top:26px;font-size:15px;line-height:2.05}
.topic p{margin-top:14px}
.topic b{color:var(--green);font-weight:600}

/* コラム */
.essay{margin-top:26px;display:grid;gap:0}
.essay a{display:block;padding:18px 4px;border-bottom:1px solid var(--rule)}
.essay .e-title{font-family:var(--display);font-weight:700;font-size:16.5px;letter-spacing:.06em;line-height:1.8}
.essay .e-date{font-size:11.5px;color:var(--sub);letter-spacing:.16em;margin-top:4px}

/* 年度一覧 */
.year-list{margin-top:30px;display:grid;gap:0}
.year-list a{display:flex;align-items:baseline;gap:16px;padding:22px 4px;border-bottom:1px solid var(--rule)}
.year-list .y-name{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.1em;color:var(--green)}
.year-list .y-desc{font-size:13px;color:var(--sub)}

/* 奥付 */
.site-footer{margin-top:80px;border-top:4px double var(--rule-ink);padding:30px 0 50px;font-size:12px;color:var(--sub);line-height:2}
.site-footer .container{display:grid;gap:8px;text-align:center}
.site-footer .f-brand{font-family:var(--display);font-weight:800;color:var(--ink);font-size:16px;letter-spacing:.18em}
.site-footer a{color:var(--sub)}

@media (max-width:880px){.hero .vert{display:none}}
@media (max-width:719px){.header-nav{display:none}.toc{columns:1}}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}