@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");
:root{--main-soft: #edf3f9; --main-line: #cbd5e1;}
a, button, .opt{min-width: 44px; min-height: 44px;}
a{overflow-wrap: anywhere;}
.h4{font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--color-navy);}
h4{margin: 0px;}
.grid3, .g3{display: grid; gap: 20px;}
.grid3 > .card, .g3 > *{min-width: 0px;}
.chips{display: flex; flex-wrap: wrap; gap: 8px;}
.chip, .yn{display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border: 1px solid rgb(102, 117, 138); border-radius: 999px; background: white; color: var(--color-primary); text-decoration: none; font-size: 14px;}
.chip[aria-pressed="true"], .yn[aria-pressed="true"]{background: var(--color-navy); color: white; border-color: var(--color-navy);}
.yn[aria-pressed="true"]{outline: 2px solid var(--color-primary); outline-offset: 3px;}
.badge{max-width: 100%; white-space: normal;}
.sample{display: inline-block; background: rgb(237, 243, 249); color: var(--color-navy); padding: 8px 12px; font-size: 14px; font-weight: 700; border: 1px solid var(--color-border); border-radius: 6px;}
.jobhead{margin-bottom: 12px;}
.mini, .hint{font-size: 14px; color: var(--color-text-sub);}
.warn{padding: 24px; background: rgb(255, 248, 225); border: 2px solid var(--color-navy); border-radius: 12px;}
.stat{font-size: 30px; line-height: 1.5; font-weight: 700; color: var(--color-navy);}
.main-icon{width: 48px; height: 48px; color: var(--color-navy); margin-bottom: 16px;}
.person-icon{width: 64px; height: 64px; padding: 10px; background: var(--main-soft); border-radius: 50%; color: var(--color-navy);}
.karte-icon{display: inline-block; width: 20px; height: 20px; vertical-align: middle; margin-right: 8px; color: var(--color-navy);}
.karte-download{display: flex; justify-content: center;}
#karte > .grid3{max-width: var(--width-wide);}
.kno{font-size: 22px; margin-right: 8px;}
.w{width: 25%;}
.table-scroll{max-width: 100%;}
table{font-size: 14px;}
table .small{font-size: 14px;}
.table-scroll caption{background: rgb(244, 246, 249);}
#jobtypes .card{display: flex; flex-direction: column; gap: 16px;}
#jobtypes .card > *{margin: 0px;}
#jobtypes .table-scroll{margin-top: auto;}
#jobtypes table{min-width: 0px;}
#jobtypes th{min-width: 4em;}
#jobtypes td{min-width: 0px;}
#fv > .main-fv{display: grid; gap: 20px; max-width: var(--width-wide);}
#fv .main-fv > *{order: initial; grid-area: auto; margin: 0px; min-width: 0px;}
#fv .main-fv > .h1{order: 1;}
#fv .main-fv > .catch{order: 2;}
#fv .main-fv > .cta{order: 3;}
#fv .main-fv > .main-photo{order: 4;}
#fv .main-fv > .lead{order: 5;}
#fv .main-fv > p:not(.h1, .catch, .lead){order: 6;}
#fv .main-fv > .main-badges{order: 7;}
#fv .main-fv > .honest{order: 8 !important;}
.main-badges{display: flex; flex-wrap: wrap; gap: 8px;}
.main-photo{margin: 0px; min-width: 0px;}
.main-photo img{width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px;}
#fv .main-photo img{aspect-ratio: 4 / 5;}
.main-photo .photo-note{margin-top: 8px; font-size: 13px;}
.team-placeholder{aspect-ratio: 1 / 1; max-width: 200px; margin-inline: auto;}
#toc{padding-block: 32px; background: var(--main-soft);}
#toc > ol{display: grid; gap: 4px;}
#toc a{font-size: 15px;}
#worry{display: flex; flex-direction: column;}
#worry > .h2{order: 1;}
#worry > .worry-illustration{order: 2; width: 140px; height: 140px; color: var(--color-navy);}
#worry > .grid2{order: 3;}
#worry > .lead{order: 4;}
#promise .stack > .card{position: relative;}
#promise .stack > .card > .main-icon{margin-bottom: 16px;}
.employment-diagrams{display: grid; gap: 16px;}
.employment-card{padding: 20px; border: 1px solid var(--color-border); border-radius: 12px; background: white; display: flex; flex-direction: column; gap: 12px;}
.employment-card > .strong{color: var(--color-navy); font-size: 18px;}
.employment-box{padding: 16px; border: 1px solid var(--color-navy); border-radius: 8px; background: var(--main-soft); text-align: center; font-size: 14px;}
.contract-arrow{position: relative; min-height: 70px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 14px; padding-bottom: 24px;}
.contract-arrow::before{content: ""; position: absolute; bottom: 0px; height: 18px; border-left: 3px solid var(--color-navy);}
.contract-arrow::after{content: ""; position: absolute; bottom: 1px; width: 8px; height: 8px; border-right: 2px solid var(--color-navy); border-bottom: 2px solid var(--color-navy); transform: rotate(45deg);}
.contract-arrow.workplace::before{border-left-style: dotted;}
.wage-figure{padding: 24px; border: 1px solid var(--color-border); border-radius: 12px; background: white;}
.wage-legend{display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; margin-block: 20px;}
.wage-legend p{margin: 0px; display: flex; align-items: center; gap: 8px;}
.wage-legend p::before{content: ""; width: 24px; height: 4px; background: var(--color-navy);}
.wage-legend .series-b::before{background: var(--color-primary); height: 0px; border-top: 3px dashed var(--color-primary);}
.wage-plot{position: relative; height: 320px; border-left: 1px solid var(--main-line); border-bottom: 1px solid var(--main-line);}
.wage-plot > svg{position: absolute; width: 100%; height: 100%; overflow: visible;}
.wage-line{stroke-width: 3px;}
.line-0{stroke: var(--color-navy);}
.line-1{stroke: var(--color-primary); stroke-dasharray: 6, 5;}
.wage-value{position: absolute; transform: translate(-50%, -125%); font-size: 14px; white-space: nowrap; font-weight: 700; background: white; padding: 1px 3px;}
.value-1{color: var(--color-primary); transform: translate(-50%, 10%);}
.wage-axis{display: flex; justify-content: space-between; padding: 12px 8%; font-size: 14px;}
.wage-figure > .src{margin-top: 20px;}
.chart{padding: 24px; border: 1px solid var(--color-border); border-radius: 12px; background: white;}
.chart .refline{display: none;}
.bar{display: grid; grid-template-columns: 1fr 64px; gap: 8px; align-items: center; margin-block: 20px;}
.bar .lab{grid-column: 1 / -1; font-size: 14px;}
.track{height: 16px; position: relative; background: rgb(244, 246, 249);}
.track::after{content: ""; position: absolute; left: var(--reference); top: -8px; bottom: -8px; border-left: 2px dashed rgb(75, 85, 99);}
.fill{height: 100%; width: var(--bar-size); background: rgb(154, 170, 190);}
.fill.hi{background: var(--color-navy);}
.bar .val{font-size: 14px; text-align: right; font-variant-numeric: tabular-nums;}
#check .q{display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--color-border); border-radius: 12px; background: white; gap: 16px;}
#check .q > div{display: flex; gap: 16px;}
.qno{display: inline-block; margin-right: 10px; color: var(--color-navy); font-weight: 700;}
#quiz-result{padding-bottom: 20px;}
#quiz-result > p + p{margin-top: 16px;}
.factory-day{padding: 24px; border: 1px solid var(--color-border); border-radius: 12px; background: white;}
.day-row{margin-top: 20px;}
.day-row > ol{display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0px; margin-top: 16px;}
.day-row li{padding: 12px; background: var(--main-soft); border-left: 3px solid var(--color-primary); font-size: 14px;}
.factory-day > .small{margin-top: 20px;}
.roadmap > .step{display: flex; flex-direction: column; gap: 16px; padding: 24px; border-bottom: 3px solid var(--color-navy); border-radius: 8px; background: var(--main-soft);}
.roadmap > .step::after{display: none;}
.roadmap .when{font-size: 20px; font-weight: 700; color: var(--color-navy);}
.roadmap .step p{margin: 0px;}
.roadmap .step p:last-child{font-size: 15px;}
.flow-icon{width: 36px; height: 36px; color: var(--color-navy); grid-column: 1;}
.flow .step{grid-template-columns: 48px minmax(0px, 1fr);}
.flow .step > div{grid-area: 1 / 2 / 4;}
.tokai-map{padding: 24px; border: 1px solid var(--color-border); border-radius: 12px; background: white;}
.map-canvas{position: relative; width: 100%; max-width: 620px; margin: auto;}
.map-canvas svg{width: 100%; height: auto; display: block;}
.province{stroke: white; stroke-width: 3; fill: rgb(219, 230, 242);}
.province-1{fill: rgb(195, 212, 233);}
.province-2{fill: rgb(174, 197, 225);}
.province-3{fill: rgb(228, 237, 247);}
.city-dot{fill: var(--color-navy); stroke: white; stroke-width: 1;}
.map-name{position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 14px; font-weight: 700; background: white; border: 1px solid var(--color-primary); border-radius: 999px; padding: 4px 8px;}
.map-links{display: grid; gap: 16px; margin-top: 16px;}
.map-detail{border-top: 1px solid var(--color-border); padding-top: 16px;}
.map-detail > p{margin: 0px;}
.map-detail > p + p{margin-top: 8px;}
.map-buttons{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 8px; margin-top: 24px;}
.qa{padding: 20px; border: 1px solid var(--color-border); border-radius: 12px; background: white;}
.qa > .q{display: flex; gap: 12px; align-items: start;}
.qa > .a{display: flex; gap: 12px; margin-top: 16px;}
.qa > .a > div{min-width: 0px;}
.qa + .qa{margin-top: 16px;}
.cat{margin-block: 24px !important;}
#form > div.card > form{border: 0px; padding: 0px; margin-top: 24px;}
.main-sticky{min-height: 56px; padding: 6px 12px calc(6px + env(safe-area-inset-bottom)) !important;}
.main-sticky .btn, .main-sticky .btn2{min-height:44px;padding:4px 6px;font-size:12px;line-height:1.35}
@media (min-width: 768px){
.grid3, .g3{grid-template-columns: repeat(3, minmax(0px, 1fr));}
#toc > ol{grid-template-columns: repeat(2, minmax(0px, 1fr));}
.employment-diagrams{grid-template-columns: repeat(4, minmax(0px, 1fr));}
.employment-card{padding: 16px;}
.employment-box{padding: 12px 8px;}
.bar{grid-template-columns: 180px minmax(0px, 1fr) 70px;}
.bar .lab{grid-column: auto;}
.day-row > ol{flex-direction: row; align-items: stretch; gap: 8px;}
.day-row li{flex: 1 1 0%; min-width: 0px;}
.map-links{grid-template-columns: repeat(4, minmax(0px, 1fr));}
.map-buttons{display: none;}
.roadmap{grid-template-columns: repeat(3, minmax(0px, 1fr)); align-items: start; max-width: var(--width-wide) !important;}
.roadmap > .step:nth-child(2){margin-top: 24px;}
.roadmap > .step:nth-child(3){margin-top: 48px;}
.roadmap > .step:nth-child(4){margin-top: 24px;}
.roadmap > .step:nth-child(5){margin-top: 48px;}
.roadmap > .step:nth-child(6){margin-top: 72px;}
#flow > .stack{grid-template-columns: repeat(3, minmax(0px, 1fr)); max-width: var(--width-wide);}
.flow .step{display: flex; flex-direction: column; gap: 12px;}
.flow .step::after{display: none;}
#fv > .main-fv{grid-template-columns: minmax(0px, 1.2fr) minmax(0px, 1fr); gap: 24px;}
#fv .main-fv > *{order: initial !important;}
#fv .main-fv > .h1{grid-area: 1 / 1 / 2 / -1;}
#fv .main-fv > .catch{grid-area: 2 / 1 / 3 / -1;}
#fv .main-fv > .lead{grid-area: 3 / 1 / 4 / 2;}
#fv .main-fv > .main-photo{grid-area: 3 / 2 / 7 / 3;}
#fv .main-fv > .main-photo img{aspect-ratio: 16 / 9;}
#fv .main-fv > .main-badges{grid-column: 1 / -1;}
#fv .main-fv > .cta{grid-column: 1 / -1;}
#fv .main-fv > .honest{grid-column: 1 / -1;}
.main-sticky{display: none !important;}
}
@media print{
.main-sticky, #header, #footer{display: none !important;}
.main-photo, .employment-card, .qa{break-inside: avoid;}
}
@media (min-width: 1100px){
.roadmap{grid-template-columns: repeat(6, minmax(0px, 1fr)); align-items: end; gap: 10px;}
.roadmap > .step{padding: 16px; min-height: 360px; margin-top: 0px !important;}
.roadmap > .step:nth-child(2){min-height: 420px;}
.roadmap > .step:nth-child(3){min-height: 580px;}
.roadmap > .step:nth-child(4){min-height: 640px;}
.roadmap > .step:nth-child(5){min-height: 700px;}
.roadmap > .step:nth-child(6){min-height: 760px;}
.roadmap .step p:last-child{font-size: 14px; line-height: 1.75;}
#flow > .stack{grid-template-columns: repeat(6, minmax(0px, 1fr)); gap: 16px;}
.flow .step .h4{font-size: 18px;}
.flow .step p{font-size: 15px;}
}
.province{cursor: pointer;}
.province:hover{fill: rgb(145, 176, 216);}
.wage-marker{position: absolute; width: 8px; height: 8px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--color-navy);}
.marker-b{background: var(--color-primary);}
@media (min-width: 1100px){
.flow .step:not(:last-child)::after{display: block; inset: 18px -12px auto 44px; width: auto; height: 1px; background: var(--color-border); z-index: 0;}
.flow-icon{position: relative; z-index: 1; background: var(--color-bg-alt);}
}
.flow .step > .no{font-size: 12px; font-weight: 700; color: white; background: var(--color-navy); border-radius: 6px; padding: 4px 6px; max-width: 80px; text-align: center;}




.line-qr-placeholder{display:none}
@media(min-width:768px){.line-qr-placeholder{display:grid;place-items:center;max-width:160px;aspect-ratio:1;margin:20px auto 0;padding:16px;border:1px dashed var(--color-border);border-radius:8px;background:var(--color-bg-alt);color:var(--color-text-sub);font-size:14px;text-align:center}}
@media print{.line-qr-placeholder{display:none}}