@import url('https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap');
:root{font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;color:#172b45;background:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}a{color:#176675}header{background:#142b48;color:white;padding:17px max(24px,calc((100vw - 1320px)/2))}header a{color:white;text-decoration:none}.brand{font-size:1.27rem;font-weight:800}main{max-width:1320px;margin:auto;padding:42px 28px 100px}h1{font-size:clamp(2.1rem,3.6vw,3.25rem);line-height:1.28;letter-spacing:-.035em;margin:0 0 14px}h2{font-size:1.5rem;line-height:1.4;margin:0 0 19px}h3{font-size:1.13rem;margin:0 0 12px}p{line-height:1.8}.intro{font-size:1.08rem;color:#41546a;max-width:880px;margin:0 0 26px}.section,.discover,.detail section{border-top:1px solid #d7e0e8;padding-top:28px;margin-top:36px}.career-start{margin:32px 0}.career-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.career-choice{display:flex;justify-content:space-between;align-items:center;text-align:left;min-height:80px;border:1px solid #bfcdd9;border-radius:6px;background:#f5f8fb;color:#142b48;padding:16px;font-weight:700;cursor:pointer}.career-choice:hover,.career-choice:focus-visible{border-color:#176675;background:#e8f3f4}.discover{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.7fr);gap:34px}.discover h2,.popular h2{font-size:1.23rem}.genre-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.genre-card{border:1px solid #d7e0e8;background:white;color:#172b45;padding:11px;text-align:left;border-radius:4px;cursor:pointer}.genre-card:hover,.genre-card.active{border-color:#176675;background:#eef7f7}.popular-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.item{display:flex;align-items:center;gap:11px;padding:13px 4px;text-decoration:none;border-bottom:1px solid #d7e0e8;color:#172b45;min-width:0}.item:hover{color:#176675;border-color:#176675}.item strong{font-size:1rem}.item>span:last-child{margin-left:auto}.tag{font-size:.78rem;color:#176675;white-space:nowrap}.list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}.meta{font-size:.83rem;color:#5b6c7d}.list .meta{margin-left:auto}.list .item>span:last-child{margin-left:0}.navigator{max-width:1050px}.purpose{border:0;padding:0;margin:0 0 24px}.purpose legend{font-size:1.12rem;font-weight:750;margin-bottom:12px}.purpose label{display:block;padding:8px 0;cursor:pointer}.purpose input{width:auto;min-height:auto;margin-right:10px;accent-color:#176675}.navgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;margin:0 0 22px}.field{display:flex;flex-direction:column;gap:7px;font-weight:650;font-size:.93rem}input,select,button{font:inherit}input:not([type=radio]):not([type=checkbox]),select{width:100%;min-height:46px;padding:10px 12px;border:1px solid #aebdca;border-radius:4px;background:#fff;color:#172b45}button#diagnose{background:#176675;border:0;border-radius:4px;padding:13px 25px;color:white;font-weight:750;cursor:pointer}button#diagnose:hover{background:#0e4e5d}.owned{grid-column:1/-1;border:0;border-top:1px solid #d7e0e8;padding:14px 0}.owned summary{font-weight:650;cursor:pointer}.owned-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 14px;max-height:210px;overflow:auto;margin:18px 0}.owned-list label{font-size:.9rem}.owned-list input{accent-color:#176675;margin-right:7px}.result{border-top:2px solid #176675;margin-top:30px;padding-top:22px}.result h3{font-size:1.35rem}.route{list-style:none;margin:14px 0;padding:0 0 0 24px;border-left:2px solid #c8d5df}.route li{position:relative;padding:7px 0 16px 18px;line-height:1.5}.route li::before{content:"";position:absolute;left:-30px;top:16px;width:10px;height:10px;border-radius:50%;background:#176675}.route li:last-child{padding-bottom:4px}.route a{font-size:.87rem;margin-left:8px}.reference{border-top:1px solid #d7e0e8;padding-top:12px;margin:18px 0 0;font-size:.95rem}.crumb{font-size:.88rem;color:#53677e;margin-bottom:25px}.category{font-size:.86rem;color:#176675;margin:0 0 10px}.detail{max-width:1120px}.detail .intro{max-width:1000px}.detail section{margin-top:42px}.fact{display:grid;grid-template-columns:210px minmax(0,1fr);gap:24px;border-bottom:1px solid #e3e8ed;padding:15px 0;line-height:1.7}.fact strong{color:#354e68}.detail .meta{margin-top:18px}.official{border-top:1px solid #d7e0e8;padding-top:22px;margin-top:42px;font-weight:700}.inline{font-weight:700}footer{border-top:1px solid #d7e0e8;padding:28px;color:#5b6c7d;font-size:.82rem;line-height:1.7;text-align:center}@media(max-width:850px){main{padding:30px 20px 70px}.career-options{grid-template-columns:repeat(3,1fr)}.discover{grid-template-columns:1fr}.popular-grid{grid-template-columns:repeat(2,1fr)}.genre-grid{grid-template-columns:repeat(3,1fr)}.owned-list{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){header{padding:15px 18px}main{padding:27px 18px 65px}.career-options,.genre-grid,.popular-grid,.list,.navgrid{grid-template-columns:1fr}.career-choice{min-height:54px}.discover{gap:25px}.item{min-height:50px}.owned-list{grid-template-columns:1fr}.fact{grid-template-columns:1fr;gap:2px}.detail section{margin-top:34px}.list .meta{font-size:.75rem}}
.genre-card{text-decoration:none;display:block}.popular-grid .item a{font-weight:700;text-decoration:none;color:#172b45}.popular-grid .item a:hover{text-decoration:underline;color:#176675}
.mode-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid #bccbd7;margin:0 0 24px}.mode-tabs button{appearance:none;background:transparent;color:#42566c;border:0;border-bottom:3px solid transparent;padding:12px 18px;margin-bottom:-1px;cursor:pointer;font-weight:650;text-align:left}.mode-tabs button:hover,.mode-tabs button:focus-visible{color:#176675;background:#f1f7f8}.mode-tabs button.active{color:#142b48;border-bottom-color:#176675}.navgrid{max-width:850px}.recommended{font-size:1.13rem;font-weight:700;margin:0 0 8px}.result p:not(.recommended){margin:6px 0;max-width:780px}.index-group{border-top:1px solid #d7e0e8;padding:24px 0 10px}.index-group h3{font-size:1.27rem;margin:0 0 12px}.index-group h3 a{text-decoration:none;color:#172b45}.index-group h3 a:hover{text-decoration:underline;color:#176675}.index-group ul{list-style:none;margin:0;padding:0;columns:2;column-gap:45px}.index-group li{break-inside:avoid;padding:7px 0}.index-group li a{text-decoration:none;color:#172b45}.index-group li a:hover{text-decoration:underline;color:#176675}
.detail section:first-of-type{border-top:0;margin-top:8px;padding-top:0}.detail section p{max-width:980px}.detail section h2{margin-bottom:12px}.genre-index{display:flex;flex-wrap:wrap;gap:10px 22px;border-top:1px solid #d7e0e8;border-bottom:1px solid #d7e0e8;padding:20px 0}.genre-index a{text-decoration:none}.genre-index a:hover{text-decoration:underline}.compare-scroll{overflow-x:auto;max-width:100%;border:1px solid #d7e0e8;scrollbar-width:thin}.comparison{border-collapse:collapse;text-align:left;table-layout:fixed;width:max-content;min-width:100%}.comparison th,.comparison td{border-right:1px solid #e2e8ee;border-bottom:1px solid #e2e8ee;padding:12px 14px;vertical-align:top;line-height:1.55;min-width:190px;max-width:235px;overflow-wrap:anywhere}.comparison th:first-child{min-width:145px;width:145px;background:#f4f7fa;position:sticky;left:0;z-index:1}.comparison thead th{background:#f4f7fa;position:sticky;top:0;z-index:2}.comparison thead th:first-child{z-index:3}.comparison th a{color:#142b48}.comparison tr:last-child th,.comparison tr:last-child td{border-bottom:0}.comparison td{font-size:.93rem}
@media(max-width:600px){.index-group ul{columns:1}.mode-tabs{display:grid;grid-template-columns:repeat(3,1fr)}.mode-tabs button{font-size:.84rem;padding:10px 7px;line-height:1.4}.comparison th,.comparison td{min-width:175px;max-width:205px}.comparison th:first-child{min-width:110px;width:110px}.compare-scroll{margin-right:-18px}}
/* 趣味資格は仕事資格の索引と分け、軽い辞典として読む。 */
.career-options{grid-template-columns:repeat(4,minmax(0,1fr))}
.hobby-categories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
.hobby-categories a{display:block;border-bottom:1px solid #d7e0e8;padding:17px 4px;text-decoration:none;color:#172b45;font-weight:700}
.hobby-categories a:hover,.hobby-list a:hover{color:#176675;text-decoration:underline}
.hobby-categories small{color:#64778a;font-weight:400}
.hobby-list{list-style:none;padding:0;margin:15px 0;max-width:900px}
.hobby-list li{display:grid;grid-template-columns:minmax(180px,290px) 1fr;gap:18px;border-bottom:1px solid #e2e8ee;padding:16px 2px;line-height:1.65}
.hobby-list a{font-weight:700;text-decoration:none;color:#172b45}
.hobby-list span{color:#52667a}
#owned-slot{grid-column:1/-1}
#owned-slot:empty{display:none}
.owned-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;overflow:visible}
.flow-arrow{color:#176675;font-size:1.35rem;line-height:1.2;margin:5px 0}
.trend-definition{color:#52667a;font-size:.91rem;margin:0 0 15px}
.trend-scroll{overflow-x:auto;max-width:760px}
.trend svg{display:block;width:760px;height:auto}
.trend svg text{font:14px system-ui,sans-serif;fill:#344e64}
.trend svg .axis-title{font-weight:700;fill:#15354d}.trend svg .x-label{font-size:12px}.chart-point{cursor:pointer;stroke:#fff;stroke-width:1.5}.chart-point:hover,.chart-point:focus{stroke:#142b48;stroke-width:3;outline:none}.chart-readout{min-height:1.6em;margin:9px 0 3px;font-weight:650;color:#17334a}.hobby-index{scroll-margin-top:16px}
.trend svg .chart-value{font-size:12px;font-weight:700;pointer-events:none}
.compare-group{margin:12px 0 40px}.compare-group h2{font-size:1.25rem;margin:0 0 12px}.compare-scroll{max-height:70vh;overflow:auto;overscroll-behavior:contain}.comparison thead th{top:0;z-index:4;box-shadow:0 1px #c9d4dd}.comparison tbody th:first-child{z-index:2}.comparison thead th:first-child{z-index:5}.comparison th{background:#f4f7fa}.comparison td{background:#fff}
.compare-tabs{display:flex;gap:4px;overflow-x:auto;white-space:nowrap;border-bottom:1px solid #cad7e1;margin:14px 0 10px;scrollbar-width:thin}.compare-tabs button{flex:none;border:0;border-bottom:3px solid transparent;background:transparent;color:#526478;font:inherit;font-size:.92rem;font-weight:600;padding:11px 15px 9px;cursor:pointer}.compare-tabs button:hover{background:#edf4f7;color:#17334a}.compare-tabs button[aria-selected="true"]{border-bottom-color:#176675;color:#14364d}.compare-tabs button:focus-visible{outline:2px solid #176675;outline-offset:-3px}[role="tabpanel"][hidden]{display:none}[role="tabpanel"] .compare-group{margin-top:0}
@media(max-width:600px){.compare-scroll{max-height:68vh}.comparison th:first-child{min-width:112px;width:112px}.comparison th,.comparison td{min-width:180px}}
@media(max-width:850px){.career-options{grid-template-columns:repeat(2,1fr)}.hobby-categories{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.career-options,.hobby-categories,.hobby-list li,.owned-list{grid-template-columns:1fr}.hobby-list li{gap:2px}.mode-tabs{grid-template-columns:repeat(2,1fr)}}
/* Compact information-site layout */
main{padding-top:20px}.career-start{padding:0 0 18px}.career-start h1{font-size:1.55rem;line-height:1.35;margin:4px 0 15px}.career-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}.career-choice{min-height:0;padding:10px 2px;border:0;border-bottom:1px solid #d8e2e9;border-radius:0;background:transparent;text-align:left;box-shadow:none;font-size:1rem}.career-choice:hover{background:#eef7f8;color:#124b62}.career-choice span{float:right}.discover{display:block;margin-top:5px}.discover .genre-grid{margin-top:12px}.hobby-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}.hobby-categories details{border-bottom:1px solid #d6e0e8;padding:8px 0}.hobby-categories summary{cursor:pointer;font-weight:650;color:#15334e;list-style:none}.hobby-categories summary::after{content:'⌄';float:right}.hobby-categories details[open] summary::after{content:'⌃'}.hobby-categories ul{margin:8px 0 5px 18px;padding:0}.hobby-categories li{margin:5px 0}.detail-summary{font-size:1.06rem;line-height:1.8;max-width:78ch;margin:12px 0 28px}.legend{display:inline-block;font-weight:650}.comparison th,.comparison td{min-width:150px}.comparison th:first-child{min-width:145px}
@media(max-width:760px){main{padding-top:14px}.career-options{grid-template-columns:1fr}.career-choice{padding:9px 2px}.career-start h1{font-size:1.38rem}.hobby-categories{grid-template-columns:1fr}.detail-summary{margin-bottom:20px}}
/* 資格詳細の系統ナビ。比較表のタブ分類をそのまま使う。 */
.qualification-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:34px;align-items:start}.qualification-main{min-width:0}.qualification-main .detail{max-width:none}.qualification-side{position:sticky;top:18px;align-self:start;max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;border-top:1px solid #d7e0e8;padding:14px 4px 14px 0}.qualification-nav-group{font-size:.9rem;font-weight:700;color:#354e68;line-height:1.5;margin:0 0 10px}.qualification-side ul,.qualification-mobile-nav ul{list-style:none;padding:0;margin:0}.qualification-side li,.qualification-mobile-nav li{border-bottom:1px solid #e4eaf0}.qualification-side li a,.qualification-mobile-nav li a{display:block;padding:9px 10px;border-left:3px solid transparent;color:#243b54;text-decoration:none;line-height:1.5;font-size:.9rem;overflow-wrap:anywhere}.qualification-side li a:hover,.qualification-mobile-nav li a:hover{color:#176675;background:#f1f7f8}.qualification-side li a[aria-current="page"],.qualification-mobile-nav li a[aria-current="page"]{border-left-color:#176675;background:#eef5f6;color:#14364d;font-weight:750}.qualification-nav-back{display:inline-block;margin:16px 0 0 11px;font-size:.84rem;text-decoration:none}.qualification-nav-back:hover{text-decoration:underline}.qualification-mobile-nav{display:none}
@media(max-width:900px){.qualification-layout{display:block}.qualification-side{display:none}.qualification-mobile-nav{display:block;border-top:1px solid #d7e0e8;border-bottom:1px solid #d7e0e8;margin:15px 0 18px}.qualification-mobile-nav summary{cursor:pointer;padding:13px 5px;font-weight:700;color:#15334e}.qualification-mobile-nav summary::after{content:'▾';margin-left:8px}.qualification-mobile-nav[open] summary::after{content:'▴'}.qualification-mobile-nav .qualification-nav-group{margin:3px 8px 7px}.qualification-mobile-nav ul{max-height:45vh;overflow:auto}.qualification-mobile-nav .qualification-nav-back{margin:13px 10px 17px}}
/* 職種を起点にしたMVPの入口と結果 */
.home-start{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.45fr);gap:34px;border-bottom:1px solid #d7e0e8;padding-bottom:27px}.home-career{border-right:1px solid #d7e0e8;padding-right:32px}.home-start h1,.home-start h2{font-size:1.45rem;margin:0 0 12px}.home-career p{margin:0 0 18px;line-height:1.6}.home-career .field{max-width:380px}.home-career button{margin-top:12px;border:0;border-radius:4px;background:#176675;color:#fff;padding:11px 16px;font-weight:700;cursor:pointer}.home-career button:hover{background:#104c58}.home-start .discover{margin:0}.home-start .genre-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}.home-start .genre-card{padding:8px 0;border-bottom:1px solid #dce5ec}.home-start .genre-card:hover{background:#f1f7f8}.career-page{max-width:1040px}.career-page h1{margin-bottom:22px}.career-page section{border-top:1px solid #d7e0e8;padding-top:20px;margin-top:25px}.career-page section h2{margin:0 0 13px;font-size:1.3rem}.career-page section h3{font-size:1rem;margin:20px 0 6px}.career-decision>p{max-width:80ch;line-height:1.75}.career-recommendations>div{border-bottom:1px solid #e0e7ed;padding:12px 0}.career-recommendations strong{font-size:1.1rem}.career-recommendations small{margin-left:12px;color:#52667a}.career-qualification-meta{display:block;color:#52667a;font-size:.86rem;line-height:1.7;margin-top:4px}.career-next{font-weight:650}.career-alternatives{margin:8px 0;padding-left:21px}.career-alternatives li{padding:5px 0}.salary-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #d7e0e8;border-bottom:1px solid #d7e0e8}.salary-stages>div{padding:15px 20px;border-right:1px solid #e0e7ed}.salary-stages>div:first-child{padding-left:0}.salary-stages>div:last-child{border:0}.salary-stages strong,.salary-stages span,.salary-stages b{display:block}.salary-stages span{font-size:.84rem;color:#52667a;margin:3px 0}.salary-stages b{font-size:1.15rem}.salary-method,.salary-sources{font-size:.82rem;color:#53677a;line-height:1.65}.salary-sources a{color:#176675}.career-back{border-top:1px solid #d7e0e8;margin-top:25px;padding-top:18px}.related-careers ul{margin:0;padding-left:20px}.related-careers li{margin:7px 0}.info-page{max-width:72ch;line-height:1.85}footer nav{margin-top:9px}footer nav a{color:#284a65}
@media(max-width:850px){.home-start{grid-template-columns:1fr;gap:23px}.home-career{border-right:0;border-bottom:1px solid #d7e0e8;padding:0 0 22px}}
@media(max-width:600px){.home-start .genre-grid{grid-template-columns:1fr}.salary-stages{grid-template-columns:1fr}.salary-stages>div,.salary-stages>div:first-child{padding:10px 0;border-right:0;border-bottom:1px solid #e0e7ed}.salary-stages>div:last-child{border:0}.salary-stages b{font-size:1.05rem}.career-recommendations small{display:block;margin-left:0}}

/* A quiet, continuous reading surface. */
:root{--ink:#172b45;--subtle:#52677a;--hairline:#e8edf1;--tint:#f5f9f9;--accent:#176675}
body{background:#fff;color:var(--ink);-webkit-font-smoothing:antialiased}
main{max-width:1380px;padding:32px 32px 88px}
h1{font-size:clamp(1.85rem,2.7vw,2.55rem);line-height:1.3;margin-bottom:22px}
h2{font-size:1.4rem;letter-spacing:-.018em}
p{line-height:1.75}
a,button,summary,.compare-tabs button{transition:color .18s ease,background-color .18s ease,border-color .18s ease}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.crumb{margin-bottom:24px}
.home-start{gap:clamp(35px,5vw,76px);border:0;padding:0;align-items:start}
.home-career{border:0;padding:0}
.home-start .discover{border:0;padding:0;margin:0}
.home-start .genre-grid{gap:0 28px}
.home-start .genre-card{display:inline-block;width:max-content;max-width:100%;min-height:0;padding:8px 0;border:0;background:transparent;border-radius:0;box-shadow:none;color:var(--ink);text-decoration:none;line-height:1.5}
.home-start .genre-card:hover,.home-start .genre-card:focus-visible{background:transparent;color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.home-start~.section{border:0;padding:0;margin-top:62px}
.home-start~.section h2{margin-bottom:20px}
.index-group{border:0!important;margin-top:16px}
.popular-grid .item{border-color:var(--hairline)}
.popular-grid .item:hover{border-color:var(--accent)}
.career-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(32px,4vw,60px);align-items:start}
.career-page{max-width:none;min-width:0}
.career-page section{border:0;padding:0;margin-top:36px}
.career-page section h2{font-size:1.32rem}
.career-decision>p{max-width:76ch}
.salary-stages{border:0;gap:12px}
.salary-stages>div,.salary-stages>div:first-child{padding:2px 16px 2px 0;border-right:1px solid var(--hairline)}
.salary-stages>div:last-child{border:0}
.salary-stages strong{font-size:.92rem;color:var(--subtle);font-weight:650;line-height:1.45;min-height:2.8em}
.salary-stages b{font-size:1.12rem;letter-spacing:-.015em;margin-top:8px}
.career-side{position:sticky;top:20px;align-self:start;max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 7px 8px 0}
.career-nav-group{margin:0 0 18px}
.career-nav-group h2{font-size:.84rem;font-weight:750;color:var(--subtle);letter-spacing:.02em;margin:0 0 6px;padding:0 9px}
.career-side ul,.career-mobile-nav ul{list-style:none;margin:0;padding:0}
.career-side a,.career-mobile-nav a{display:block;padding:6px 9px;border-left:3px solid transparent;color:var(--ink);font-size:.9rem;line-height:1.5;text-decoration:none}
.career-side a:hover,.career-mobile-nav a:hover{color:var(--accent);background:var(--tint)}
.career-side a[aria-current="page"],.career-mobile-nav a[aria-current="page"]{border-left-color:var(--accent);background:var(--tint);font-weight:750}
.career-mobile-nav{display:none}
.qualification-side{border-top-color:var(--hairline)}
.qualification-side li,.qualification-mobile-nav li{border-bottom-color:var(--hairline)}
.comparison th,.comparison td{border-color:var(--hairline)}
.compare-scroll{border-color:var(--hairline)}
.comparison thead th,.comparison th:first-child,.comparison th{background:#f7f9fa}
.comparison thead th:first-child{background:#f7f9fa}
.compare-tabs{border-color:var(--hairline)}
@media(max-width:900px){
 .career-layout{display:block}
 .career-side{display:none}
 .career-mobile-nav{display:block;margin:0 0 24px;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
 .career-mobile-nav summary{cursor:pointer;padding:12px 4px;font-weight:700;list-style:none}
 .career-mobile-nav summary::-webkit-details-marker{display:none}
 .career-mobile-nav summary::after{content:'▾';margin-left:8px}
 .career-mobile-nav[open] summary::after{content:'▴'}
 .career-mobile-nav nav{max-height:56vh;overflow:auto;padding:8px 0 12px}
 .career-mobile-nav .career-nav-group{margin:0 0 15px}
 .home-start{grid-template-columns:1fr;gap:36px}
 .home-career{border:0;padding:0}
}
@media(max-width:600px){
 main{padding:22px 18px 68px}
 .home-start .genre-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
 .home-start .genre-card{font-size:.95rem}
 .home-start~.section{margin-top:48px}
 .salary-stages{grid-template-columns:1fr;gap:0}
 .salary-stages>div,.salary-stages>div:first-child{border:0;border-bottom:1px solid var(--hairline);padding:12px 0}
 .salary-stages>div:last-child{border:0}
 .salary-stages strong{min-height:0}
 .salary-stages b{margin-top:3px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* Final editorial system: typography, index rhythm, and restrained surfaces. */
:root{
 --paper:#f8f8f5;
 --ink:#171d20;
 --subtle:#5a6468;
 --hairline:#dadfdd;
 --tint:#edf1ef;
 --accent:#176675;
 font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
 color:var(--ink);
 background:var(--paper);
}
body{background:var(--paper);color:var(--ink);font-size:1rem;letter-spacing:-.012em}
header{
 background:var(--paper);
 color:var(--ink);
 padding:19px max(28px,calc((100vw - 1390px)/2));
 border-bottom:1px solid var(--hairline);
}
header a{color:var(--ink)}
header a:hover{color:var(--accent)}
.brand{font-size:1.15rem;font-weight:800;letter-spacing:.025em}
main{max-width:1390px;padding:42px 28px 112px}
h1,h2,h3{color:var(--ink);letter-spacing:-.045em}
h1{font-size:clamp(2.5rem,4vw,4rem);line-height:1.2;font-weight:800;margin:0 0 28px}
h2{font-size:clamp(1.45rem,2vw,1.9rem);font-weight:760;line-height:1.35}
h3{font-size:1.2rem;font-weight:730}
p{line-height:1.85}
a{color:var(--accent);text-underline-offset:3px}
.meta,.salary-method,.salary-sources{color:var(--subtle)}
.crumb{font-size:.84rem;letter-spacing:0;color:var(--subtle);margin-bottom:35px}
.crumb a{color:var(--subtle);text-decoration:none}
.crumb a:hover{color:var(--accent);text-decoration:underline}
footer{background:var(--paper);border-top:1px solid var(--hairline);color:var(--subtle)}
footer nav a{color:var(--ink)}

/* Home: a prominent working entrance, then a compact editorial index. */
.home-start{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(48px,8vw,136px);padding:18px 0 0}
.home-start .home-career h1{font-size:clamp(2.9rem,4.55vw,4.85rem);line-height:1.22;letter-spacing:-.065em;max-width:12ch;margin:0 0 24px}
.home-start .home-career p{font-size:1.02rem;color:var(--subtle);margin:0 0 30px}
.home-career .field{max-width:420px;font-size:.91rem;font-weight:700;gap:9px}
.home-career select{border-color:#aeb7b5;border-radius:0!important;background:#fff;min-height:50px!important}
.home-career button{margin-top:15px;background:var(--ink);border-radius:0;padding:13px 20px;transition:background-color .2s ease,color .2s ease}
.home-career button:hover{background:var(--accent)}
.home-start .discover h2{font-size:clamp(1.4rem,1.9vw,1.75rem);margin:4px 0 22px}
.home-start .genre-grid{gap:0 28px}
.home-start .genre-card{
 display:block;width:auto;max-width:none;
 border-bottom:1px solid var(--hairline);
 padding:12px 1px 12px 0;
 font-size:1.04rem;font-weight:650;
 transition:color .2s ease,padding-left .2s ease;
}
.home-start .genre-card:hover,.home-start .genre-card:focus-visible{padding-left:5px;border-bottom-color:var(--ink)}
.home-start~.section{margin-top:96px}
.home-start~.section h2{margin-bottom:26px}
.popular h2{font-size:1.45rem}
.popular-grid{gap:clamp(15px,2vw,34px)}
.popular-grid .item{padding:14px 0 18px;border-color:var(--hairline)}
.popular-grid .item a{font-size:clamp(1.12rem,1.6vw,1.42rem);font-weight:760;color:var(--ink);letter-spacing:-.035em}
.popular-grid .item a:hover{color:var(--accent)}
.index h2{font-size:clamp(1.8rem,2.8vw,2.55rem);margin-bottom:38px!important}
.index h2 .meta,.hobby-index h2 .meta{font-size:.79rem;font-weight:500;letter-spacing:0;vertical-align:middle;margin-left:9px}
.index #listing{columns:2;column-gap:clamp(48px,7vw,114px)}
.index-group{break-inside:avoid-column;display:inline-block;width:100%;padding:0 0 25px;margin:0 0 26px}
.index-group h3{font-size:1.36rem;margin:0 0 12px}
.index-group h3 a{color:var(--ink);text-decoration:none}
.index-group h3 a:hover{color:var(--accent)}
.index-group ul{columns:1}
.index-group li{border-bottom:1px solid var(--hairline);padding:9px 0;line-height:1.45}
.index-group li a{display:inline-block;text-underline-offset:4px}
.hobby-index h2{font-size:clamp(1.8rem,2.8vw,2.55rem)}
.hobby-categories{gap:0 clamp(26px,5vw,70px)}
.hobby-categories details{border-bottom-color:var(--hairline);padding:13px 0}
.hobby-categories summary{color:var(--ink);font-size:1.04rem}
.hobby-categories summary:hover{color:var(--accent)}
.hobby-categories ul{margin-top:14px}

/* Detail and career pages share the same reading hierarchy. */
.qualification-layout,.career-layout{grid-template-columns:225px minmax(0,1fr);gap:clamp(45px,6vw,96px)}
.qualification-main,.career-page{min-width:0}
.detail h1,.career-page h1{font-size:clamp(2.75rem,4.15vw,4.35rem);line-height:1.2;max-width:18ch;margin-bottom:38px}
.detail section{border:0;padding:0;margin-top:54px}
.detail section:first-of-type{margin-top:0}
.detail section h2,.career-page section h2{font-size:1.42rem;margin-bottom:18px}
.fact{grid-template-columns:minmax(155px,205px) minmax(0,1fr);gap:clamp(22px,3vw,48px);border-bottom-color:var(--hairline);padding:17px 0}
.fact strong{color:var(--subtle);font-size:.9rem;font-weight:640}
.fact span{max-width:80ch}
.detail .meta{font-size:.8rem}
.official{border-top-color:var(--hairline);margin-top:60px}
.qualification-side,.career-side{border:0;padding-top:0;scrollbar-color:#c6ceca transparent}
.qualification-nav-group,.career-nav-group h2{color:var(--subtle);font-size:.82rem;letter-spacing:.015em}
.qualification-side li,.qualification-mobile-nav li{border:0}
.qualification-side li a,.career-side a{padding:7px 10px;font-size:.9rem;color:var(--ink)}
.qualification-side li a:hover,.career-side a:hover{background:transparent;text-decoration:underline;text-underline-offset:3px}
.qualification-side li a[aria-current="page"],.career-side a[aria-current="page"]{background:var(--tint);color:var(--ink);text-decoration:none}
.career-page section{margin-top:54px}
.career-decision>p{max-width:68ch}
.career-recommendations>div{border-color:var(--hairline);padding:17px 0}
.career-recommendations strong{font-size:1.18rem}
.career-qualification-meta{color:var(--subtle)}
.salary-stages{gap:22px}
.salary-stages>div,.salary-stages>div:first-child{border-color:var(--hairline);padding-right:20px}
.salary-stages b{font-size:clamp(1.1rem,1.55vw,1.4rem);letter-spacing:-.04em}

/* Dense comparison stays functional; title and labels do the visual work. */
.genre-page h1,.genre-detail h1{font-size:clamp(2.75rem,4.1vw,4.2rem)}
.compare-tabs{border-bottom-color:var(--hairline);gap:18px;margin:26px 0 22px}
.compare-tabs button{padding:10px 2px 12px;color:var(--subtle);font-size:.95rem;background:transparent;transition:color .2s ease,border-color .2s ease}
.compare-tabs button:hover{background:transparent;color:var(--ink)}
.compare-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.compare-scroll{border-color:var(--hairline);background:#fff}
.comparison th,.comparison td{border-color:#e7ebe8;padding:14px 16px}
.comparison thead th,.comparison thead th:first-child{background:#e9eeeb;color:var(--ink);box-shadow:0 1px #cdd5d0}
.comparison tbody th,.comparison tbody th:first-child{background:#f3f5f2;color:var(--ink)}
.comparison td{background:#fff;color:var(--ink)}
.comparison th a{font-weight:750;color:var(--ink);text-decoration:none}
.comparison th a:hover{color:var(--accent);text-decoration:underline}
.trend svg text{fill:#4c5857}
.trend svg .axis-title{fill:var(--ink)}
.trend-definition{color:var(--subtle)}

@media(max-width:900px){
 main{padding:28px 24px 80px}
 .home-start{grid-template-columns:1fr;gap:58px}
 .home-start .home-career h1{max-width:14ch}
 .qualification-layout,.career-layout{display:block}
 .qualification-side,.career-side{display:none}
 .qualification-mobile-nav,.career-mobile-nav{display:block}
}
@media(max-width:600px){
 header{padding:16px 18px}
 main{padding:28px 18px 76px}
 h1,.detail h1,.career-page h1{font-size:clamp(2.15rem,8vw,2.9rem);line-height:1.25}
 .home-start{gap:52px;padding-top:2px}
 .home-start .home-career h1{font-size:clamp(2.5rem,10vw,3.45rem);max-width:12ch}
 .home-start .genre-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
 .home-start .genre-card{font-size:.93rem;padding:10px 0}
 .home-start~.section{margin-top:70px}
 .popular-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
 .popular-grid .item a{font-size:1.05rem}
 .index #listing{columns:1}
 .index-group{display:block;padding:0 0 9px;margin-bottom:31px}
 .index-group h3{font-size:1.2rem}
 .hobby-categories{grid-template-columns:1fr}
 .detail section,.career-page section{margin-top:42px}
 .fact{grid-template-columns:1fr;gap:4px;padding:14px 0}
 .salary-stages{gap:0}
 .salary-stages b{font-size:1.2rem}
 .compare-tabs{gap:17px}
 .comparison th,.comparison td{padding:11px 12px}
}

/* Editorial finishing: restrained hierarchy over a continuous index. */
:root{--paper:#f8f8f6;--ink:#1c2528;--subtle:#596467;--hairline:#d9dfdc;--tint:#edf1ef;--accent:#176675}
body{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif}
header{padding-top:16px;padding-bottom:16px;border-bottom-color:var(--hairline)}
.brand{font-size:1.1rem;font-weight:720;letter-spacing:.015em}
h1{font-weight:780}
h2{font-weight:680}
h3{font-weight:650}
.home-start .home-career h1{font-weight:790}
.home-start .discover h2,.popular h2{font-weight:660}
.home-career .field{font-weight:550;gap:7px}
.home-career select{min-height:44px!important;padding:8px 12px;border:1px solid #aeb8b4;border-radius:2px!important}
.home-career button{padding:10px 17px;margin-top:13px;font-weight:650;border-radius:2px;transition:background-color .18s ease,color .18s ease}
.home-start .genre-card{font-weight:540;line-height:1.6;transition:color .18s ease,transform .18s ease,border-color .18s ease}
.home-start .genre-card:hover,.home-start .genre-card:focus-visible{padding-left:0;transform:translateX(3px);text-decoration:none;border-bottom-color:#9cacaa}
.home-start~.section{margin-top:78px}
.popular-grid{counter-reset:popular}
.popular-grid .item{position:relative;align-items:baseline;gap:12px}
.popular-grid .item::before{counter-increment:popular;content:"0" counter(popular);font-size:.72rem;letter-spacing:.05em;color:var(--subtle);font-variant-numeric:tabular-nums}
.popular-grid .item a{font-weight:670}
.index h2,.hobby-index h2{font-weight:720}
.index-group h3{font-weight:650}
.index-group li{padding:8px 0}
.index-group li a{font-weight:430}
.hobby-categories summary{font-weight:580}
.qualification-side li a,.career-side a{color:var(--subtle);font-weight:450;transition:color .18s ease,border-color .18s ease}
.qualification-side li a[aria-current="page"],.career-side a[aria-current="page"]{background:transparent;color:var(--ink);font-weight:680;border-left-color:var(--accent)}
.qualification-side li a[aria-current="page"]::before{content:"□";font-size:.7em;margin-right:6px;color:var(--accent)}
.fact strong{font-weight:550}
.compare-scroll{border:0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.comparison thead th,.comparison thead th:first-child{background:#e9eeeb;font-weight:650}
.comparison tbody th,.comparison tbody th:first-child{background:#f3f5f2}
.comparison th a{font-weight:650}
.compare-tabs button{font-weight:500;transition:color .18s ease,border-color .18s ease}
.compare-tabs button[aria-selected="true"]{font-weight:700}
.trend svg .axis-title{font-weight:650}
@media(min-width:901px){
 .home-start{grid-template-columns:minmax(0,1.09fr) minmax(0,.91fr);gap:clamp(48px,7vw,112px)}
 .home-start .discover{padding-top:14px}
 .index #listing{column-gap:clamp(58px,8vw,125px)}
 .qualification-layout,.career-layout{grid-template-columns:205px minmax(0,1fr);gap:clamp(54px,7vw,108px)}
}
@media(max-width:600px){
 header{padding:14px 18px}
 main{padding-top:24px}
 .home-start{gap:37px}
 .home-start .home-career h1{font-size:clamp(2.05rem,8.2vw,2.75rem);line-height:1.27;max-width:7.5em;letter-spacing:-.052em;margin-bottom:18px}
 .home-start .home-career p{margin-bottom:23px}
 .home-start .discover h2{margin-bottom:12px}
 .home-start .genre-grid{gap:0 12px}
 .home-start .genre-card{font-size:clamp(.86rem,3.75vw,.96rem);padding:10px 0;overflow-wrap:anywhere}
 .home-start~.section{margin-top:56px}
 .home-start~.section h2{margin-bottom:19px}
 .popular-grid .item{padding:11px 0 14px;gap:7px}
 .popular-grid .item a{font-size:1.02rem}
 .index h2,.hobby-index h2{font-size:clamp(1.65rem,6.5vw,2rem);margin-bottom:21px!important}
 .index-group{margin-bottom:23px}
 .index-group h3{margin-bottom:8px}
 .index-group li{padding:7px 0}
 .hobby-categories details{padding:10px 0}
 .detail h1,.career-page h1,.genre-page h1,.genre-detail h1{font-size:clamp(2.1rem,8vw,2.85rem);overflow-wrap:anywhere}
 .qualification-mobile-nav,.career-mobile-nav{margin-top:15px}
 .compare-tabs{gap:13px}
 .compare-tabs button{padding:10px 2px 11px;font-size:.89rem}
 .comparison th,.comparison td{padding:10px 11px}
}
@media(max-width:360px){.home-start .genre-grid{column-gap:9px}.home-start .genre-card{font-size:.84rem}}
/* The home title has an intentional desktop break; mobile wraps to its width. */
@media(min-width:901px){.home-start{padding-top:0}.home-start .home-career h1{max-width:none}}
@media(max-width:900px){.desktop-title-break{display:none}}

/* THEN: only the HOME entrance is photographic; the indexes below keep their layout. */
.home-start{display:block;padding:0}
.then-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(260px,.78fr) minmax(120px,.4fr);gap:clamp(16px,3vw,52px);align-items:start;min-height:455px;margin:0 -28px;padding:34px clamp(28px,4vw,56px) 34px;background:#eee9df url('/then-hero.webp') center center/cover no-repeat;overflow:hidden}
.then-hero-lead{position:relative;z-index:1;min-width:0}
.then-brand{display:flex;flex-direction:column;align-items:flex-start;width:max-content;color:#1b2326;font-size:clamp(2.65rem,3.7vw,4.15rem);font-style:italic;font-weight:800;letter-spacing:-.07em;line-height:.95;transform:rotate(-2deg)}
.then-brand span{align-self:flex-end;margin:9px 2px 0;font-family:"Yu Kyokasho","Hiragino Mincho ProN","Yu Mincho",serif;font-size:.28em;font-style:normal;font-weight:500;letter-spacing:.16em;line-height:1.4}
.then-hero-lead h1{max-width:none;margin:38px 0 16px;color:#1c2528;font-family:"Yu Kyokasho","Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(2.35rem,3.25vw,3.75rem);font-weight:500;letter-spacing:.035em;line-height:1.35;white-space:nowrap;transform:rotate(-1deg);transform-origin:left center}
.then-hero-lead p{max-width:35ch;margin:0;color:#293338;font-size:.96rem;font-weight:550;line-height:1.7}
.then-hero .home-career{position:relative;z-index:1;align-self:center;width:100%;margin:38px 0 0;padding:17px 18px 18px;background:rgba(249,248,244,.78);backdrop-filter:blur(7px)}
.then-hero .home-career .field{max-width:none;color:#253034;font-size:.88rem;font-weight:600}
.then-hero .home-career select{min-height:47px!important;border-color:#aeb9b6;background:#fff}
.then-hero .home-career button{margin-top:12px;padding:11px 18px;background:#1b2528}
.then-steps{position:relative;z-index:1;justify-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin:0;color:#1c2528;font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;font-size:clamp(1.25rem,2vw,1.9rem);font-style:italic;line-height:1.25;text-shadow:0 1px 4px rgba(255,255,255,.85);transform:rotate(-6deg)}
.then-steps strong{display:block;margin-top:5px;border-bottom:1px solid currentColor;font-weight:700}
.home-start .discover{display:block;margin-top:48px}
.home-start .discover h2{margin:0 0 15px}
.home-start .discover .genre-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 26px}
@media(max-width:1050px){
 .then-hero{grid-template-columns:minmax(0,1fr) minmax(245px,.88fr) 100px;gap:18px;min-height:430px}
 .then-hero-lead h1{font-size:clamp(2.15rem,3.4vw,3rem)}
 .then-steps{font-size:1.3rem}
}
@media(max-width:900px){
 .then-hero{margin:0 -24px;padding:30px 28px;grid-template-columns:minmax(0,1fr) minmax(240px,.9fr);min-height:430px}
 .then-hero .home-career{margin-top:90px}
 .then-steps{position:absolute;top:auto;right:28px;bottom:22px}
 .home-start .discover .genre-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
 .then-hero{display:block;min-height:0;margin:0 -18px;padding:26px 22px 274px;background-image:none;background-color:#f1eee7}
 .then-hero::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:252px;background:url('/then-hero.webp') 66% center/cover no-repeat}
 .then-brand{font-size:clamp(2.6rem,11vw,3.35rem)}
 .then-hero-lead h1{font-size:clamp(2.13rem,8vw,2.85rem);white-space:normal;margin:28px 0 12px;line-height:1.35}
 .then-hero-lead p{font-size:.9rem}
 .then-hero .home-career{width:min(100%,440px);margin:24px 0 0;padding:0;background:transparent;backdrop-filter:none}
 .then-steps{top:auto;right:22px;bottom:19px;color:#fff;font-size:1.35rem;text-shadow:0 1px 5px rgba(0,0,0,.75)}
 .home-start .discover{margin-top:36px}
 .home-start .discover h2{margin-bottom:12px}
}
@media(max-width:360px){.then-hero-lead h1{font-size:2.05rem}}

/* HOME hero composition and scroll cover. */
.home-scroll{position:relative}
.home-content{
 position:relative;
 z-index:2;
 width:100vw;
 margin-left:calc(50% - 50vw);
 padding:48px max(28px,calc((100vw - 1390px)/2 + 28px)) 0;
 background:var(--paper);
}
.home-content .home-start .discover{margin-top:0}
.then-hero{
 position:sticky;
 top:0;
 z-index:1;
 width:100vw;
 height:90vh;
 min-height:0;
 margin:0 0 0 calc(50% - 50vw);
 padding:48px clamp(28px,4.2vw,72px);
 display:grid;
 grid-template-columns:minmax(0,40%) minmax(0,60%);
 grid-template-rows:auto auto;
 align-content:center;
 align-items:start;
 gap:28px 0;
 background:#faf9f5;
}
.then-hero::before{
 content:"";
 position:absolute;
 z-index:0;
 top:0;
 right:0;
 bottom:0;
 width:60%;
 pointer-events:none;
 background:url('/then-hero.webp') right center/cover no-repeat;
}
.then-hero-lead{grid-column:1;grid-row:1}
.then-hero-lead h1{
 margin-top:34px;
 font-family:"Zen Kurenaido","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
 font-weight:400;
 letter-spacing:.015em;
}
.then-brand span{
 font-family:"Zen Kurenaido","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
 font-weight:400;
 letter-spacing:.09em;
}
.then-hero .home-career{
 grid-column:1;
 grid-row:2;
 align-self:start;
 width:min(100%,380px);
 margin:0;
 padding:0;
 border:0;
 background:transparent;
 backdrop-filter:none;
}
.then-steps{
 position:absolute;
 top:8%;
 right:clamp(24px,4vw,72px);
 margin:0;
 text-shadow:0 1px 5px rgba(255,255,255,.9);
}
@media(max-width:900px){
 .then-hero{position:relative;top:auto;height:90vh;grid-template-columns:minmax(0,48%) minmax(0,52%);padding:38px 28px}
 .then-hero::before{width:52%}
 .then-hero .home-career{margin:0}
 .then-steps{top:8%;right:25px;bottom:auto}
}
@media(max-width:700px){
 .home-content{padding:36px 18px 0}
 .then-hero{
  position:relative;
  top:auto;
  display:block;
  width:100vw;
  height:auto;
  min-height:0;
  margin:0 0 0 calc(50% - 50vw);
  padding:28px 22px 310px;
  background:#faf9f5;
 }
 .then-hero::before{display:none}
 .then-hero::after{height:286px;background:url('/then-hero.webp') 72% center/cover no-repeat}
 .then-hero .home-career{width:min(100%,440px);margin:24px 0 0}
 .then-steps{top:auto;right:22px;bottom:22px}
}

/* The index scrolls normally across a short sticky hero; only the hero fades. */
main#app:has(.home-scroll){max-width:none;padding:0 0 112px}
.home-scroll{--hero-height:max(70vh,500px);--fade-travel:50vh}
.home-hero-stage{height:calc(var(--hero-height) + var(--fade-travel));background:var(--paper)}
.home-content{
 z-index:2;
 margin-top:calc(-1 * var(--fade-travel));
 background:transparent;
}
.then-hero{
 height:var(--hero-height);
 padding-top:18px;
 padding-bottom:18px;
 gap:16px 0;
 opacity:1;
 background:#faf9f5 url('/then-hero.webp') center center/cover no-repeat;
}
.then-hero::before{content:none}
.then-hero-lead h1,.then-brand,.then-hero-lead p{
 text-shadow:0 1px 2px rgba(255,255,255,.55);
}
.then-hero-lead h1{margin-bottom:0}
.then-home-nav{
 position:absolute;
 z-index:3;
 top:25px;
 right:clamp(24px,4vw,72px);
 display:flex;
 align-items:center;
 gap:clamp(18px,2.2vw,34px);
 white-space:nowrap;
 font-size:.88rem;
 font-weight:600;
}
.then-home-nav a{
 padding:2px 0 4px;
 border-bottom:1px solid transparent;
 color:#1b2326;
 text-decoration:none;
 text-shadow:0 1px 3px rgba(255,255,255,.8);
}
.then-home-nav a:hover,.then-home-nav a:focus-visible{border-bottom-color:currentColor;color:var(--accent)}
.then-steps{top:19%}
#listing-section{scroll-margin-top:18px}
.genre-top{
 display:grid;
 grid-template-columns:minmax(0,1fr) minmax(0,75%);
 align-items:start;
 gap:22px;
 margin-bottom:24px;
}
.genre-top .crumb{margin-bottom:0}
.genre-switch{
 display:flex;
 gap:12px;
 overflow-x:auto;
 scrollbar-width:thin;
}
.genre-switch a{
 flex:none;
 padding:1px 0 4px;
 border-bottom:1px solid transparent;
 color:var(--subtle);
 font-size:.88rem;
 text-decoration:none;
 white-space:nowrap;
}
.genre-switch a:hover,.genre-switch a:focus-visible{color:var(--accent)}
.genre-switch a[aria-current="page"]{border-bottom-color:var(--ink);color:var(--ink);font-weight:700}
.genre-switch a[aria-current="page"]::before{content:"□";font-size:.7em;margin-right:6px;color:var(--accent)}
@media(min-width:901px){.genre-switch a:first-child{margin-left:auto}}
.subpage-header{
 display:flex;
 align-items:center;
 height:50px;
 padding:7px max(18px,calc((100vw - 1390px)/2 + 28px));
 background:var(--paper);
 border-bottom:1px solid var(--hairline);
}
.subpage-header .then-logo{
 display:inline-block;
 color:#1b2326;
 font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
 font-size:1.55rem;
 font-style:italic;
 font-weight:800;
 letter-spacing:-.07em;
 line-height:1;
 text-decoration:none;
 transform:rotate(-2deg);
}
.subpage-header .then-logo:hover{color:var(--accent)}
.subpage-header+main#app{padding-top:16px}
@media(max-width:900px){
 .home-hero-stage{height:auto}
 .home-content{margin-top:0}
 .then-hero{position:relative;height:90vh;padding-top:38px;padding-bottom:38px;gap:28px 0}
 .genre-top{display:block}
 .genre-top .crumb{margin-bottom:12px}
 .genre-switch{
  display:flex;
  justify-content:flex-start;
  gap:18px;
  overflow-x:auto;
  padding-bottom:5px;
  scrollbar-width:thin;
 }
}
@media(max-width:700px){
 .home-scroll{--hero-height:max(82svh,700px);--fade-travel:48svh}
 .home-hero-stage{height:calc(var(--hero-height) + var(--fade-travel))}
 .home-content{margin-top:calc(-1 * var(--fade-travel))}
 main#app:has(.home-scroll){padding-bottom:76px}
 .then-hero{
  position:sticky;
  top:0;
  height:var(--hero-height);
  background:#faf9f5 url('/then-hero.webp') 52% center/cover no-repeat;
  padding-top:22px;
  padding-bottom:170px;
 }
 .then-home-nav{
  position:relative;
  top:auto;
  right:auto;
  width:100%;
  gap:16px;
  margin-bottom:23px;
  overflow-x:auto;
  font-size:.78rem;
  scrollbar-width:thin;
 }
 .then-steps{top:auto}
 .then-hero::after{content:none}
 .then-hero-lead h1,.then-brand,.then-hero-lead p{
  text-shadow:0 1px 3px rgba(255,255,255,.82);
 }
 .subpage-header{height:46px;padding:6px 18px}
 .subpage-header .then-logo{font-size:1.4rem}
 .subpage-header+main#app{padding-top:14px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .home-hero-stage{height:auto}
 .home-content{margin-top:0}
 .then-hero{position:relative;top:auto;opacity:1!important}
}