:root {
    --ink:#172d45;
    --blue:#163d69;
    --red:#ad303d;
    --muted:#526576;
    --line:#dce2e6;
    --paper:#f5f6f6}
* {
    box-sizing:border-box}
html {
    scroll-behavior:smooth;
    scroll-padding-top:90px}
body {
    margin:0;
    background:#fff;
    color:var(--ink);
    font-family:'Noto Sans JP','Hiragino Sans','Yu Gothic',sans-serif;
    font-size:15px;
    line-height:1.8}
a {
    color:inherit;
    text-decoration:none}
button,select,input,textarea {
    font:inherit}
button,a,select {
    touch-action:manipulation}
button {
    cursor:pointer}
a:hover {
    text-decoration:underline;
    text-underline-offset:5px}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible {
    outline:3px solid #bd7820;
    outline-offset:4px}
.pixel-font {
    font-family:inherit}
.portal-container {
    max-width:1200px;
    margin:auto;
    padding:0 32px}
.official-strip {
    background:var(--blue);
    color:white;
    font-size:11px;
    letter-spacing:.08em}
.official-strip>div {
    display:flex;
    justify-content:space-between;
    padding-top:7px;
    padding-bottom:7px}
.masthead {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:23px;
    padding-bottom:23px;
    gap:24px}
.national-brand {
    display:flex;
    align-items:center;
    gap:16px}
.national-brand img {
    width:57px;
    height:57px;
    object-fit:contain}
.national-brand strong {
    display:block;
    font-size:29px;
    letter-spacing:.16em;
    font-weight:700;
    line-height:1.3}
.national-brand small {
    display:block;
    font-size:10px;
    letter-spacing:.26em;
    margin-top:5px;
    color:var(--muted)}
.header-tools {
    display:flex;
    align-items:center;
    gap:24px;
    font-size:12px}
.header-tools select {
    width:auto;
    margin:0;
    padding:8px 30px 8px 12px;
    background:white!important;
    color:var(--ink)!important;
    border:1px solid var(--line)!important}
.portal-navigation {
    border-block:1px solid var(--line);
    background:white}
.portal-navigation>div {
    display:flex}
.tab-btn {
    flex:1;
    text-align:center;
    padding:17px 12px;
    color:var(--muted);
    border-bottom:3px solid transparent;
    font-size:13px;
    white-space:nowrap}
.tab-btn.active {
    color:var(--blue);
    border-color:var(--red);
    background:#f6f8fa;
    font-weight:700}
.portal-main {
    max-width:1200px!important;
    margin:auto;
    padding:0 32px!important;
    min-height:60vh}
.tab-content {
    display:none}
.tab-content.active {
    display:block}
.national-hero {
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:58px;
    align-items:center;
    padding:64px 0 52px}
.eyebrow {
    font-size:10px;
    letter-spacing:.17em;
    font-weight:700;
    color:var(--blue);
    margin:0 0 16px}
.hero-copy h1 {
    font-family:'Noto Serif JP','Yu Mincho',serif;
    font-size:44px;
    font-weight:700;
    line-height:1.55;
    letter-spacing:.06em;
    margin:0 0 23px}
.hero-copy>p:not(.eyebrow) {
    max-width:460px;
    font-size:14px;
    line-height:2;
    color:var(--muted)}
.primary-link {
    display:inline-block;
    background:var(--blue);
    color:white;
    padding:13px 22px;
    margin-top:22px;
    font-size:13px;
    font-weight:700}
.national-hero figure {
    margin:0}
.national-hero img {
    display:block;
    width:100%;
    aspect-ratio:1.6;
    object-fit:cover}
.national-hero figcaption {
    font-size:10px;
    margin-top:12px;
    color:var(--muted)}
.travel-advisory {
    display:flex;
    gap:24px;
    align-items:center;
    background:#faf7f2;
    border-left:4px solid var(--red);
    padding:20px 24px;
    font-size:12px}
.advisory-label {
    white-space:nowrap;
    font-weight:700;
    color:var(--red)}
.travel-advisory p {
    margin:0;
    flex:1}
.travel-advisory a {
    color:var(--blue);
    white-space:nowrap;
    font-weight:700}
.portal-section {
    padding:52px 0;
    border-bottom:1px solid var(--line)}
.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:24px;
    gap:16px}
.section-heading .eyebrow {
    margin-bottom:7px}
.section-heading h2,.country-summary h2 {
    font-size:23px;
    font-weight:700;
    margin:0}
.section-heading>p {
    font-size:12px;
    color:var(--muted);
    margin:0}
.service-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px}
.service-card {
    border:1px solid var(--line);
    padding:25px 26px 38px;
    position:relative;
    transition:background .2s,transform .2s}
.service-card:hover {
    background:#f2f6fa;
    transform:translateY(-2px);
    text-decoration:none}
.service-number {
    font-size:10px;
    font-weight:700;
    letter-spacing:.12em;
    color:var(--blue)}
.service-card h3 {
    font-size:19px;
    font-weight:700;
    margin:16px 0 8px}
.service-card p {
    font-size:12px;
    color:var(--muted);
    margin:0}
.card-arrow {
    position:absolute;
    right:23px;
    bottom:12px;
    color:var(--red)}
.information-grid {
    display:grid;
    grid-template-columns:1.7fr 1fr;
    gap:56px;
    border:0;
    padding-bottom:64px}
.information-row {
    display:flex;
    align-items:center;
    gap:18px;
    padding:18px 0;
    border-top:1px solid var(--line);
    font-size:12px}
.information-row>span:last-child {
    margin-left:auto}
.info-tag {
    background:#eef2f6;
    padding:2px 8px;
    font-size:10px;
    min-width:58px;
    text-align:center;
    color:var(--blue)}
.country-summary {
    background:var(--paper);
    padding:28px}
.country-summary .eyebrow {
    margin-bottom:8px}
.country-summary h2 {
    font-size:20px}
.country-summary>p:not(.eyebrow) {
    font-size:12px;
    color:var(--muted);
    margin:18px 0}
.country-summary dl {
    margin:20px 0}
.country-summary dl>div {
    display:flex;
    border-top:1px solid var(--line);
    padding:9px 0;
    font-size:12px;
    gap:20px}
.country-summary dt {
    color:var(--muted);
    min-width:42px}
.country-summary dd {
    margin:0}
.country-summary>a {
    font-size:12px;
    font-weight:700;
    color:var(--blue)}
.page-heading {
    padding:40px 0 28px}
.page-heading h1 {
    font-size:30px;
    font-weight:700;
    margin:0}
.page-heading>p:last-child:not(.eyebrow) {
    font-size:14px;
    color:var(--muted)}
.tab-content:not(#tab-home) {
    padding-bottom:56px}
#tab-map {
    padding-top:40px}
.card,.news-card {
    background:white!important;
    border:1px solid var(--line)!important;
    box-shadow:none}
.news-card {
    border-top:3px solid var(--blue)!important}
.map-container {
    border:1px solid var(--line);
    position:relative;
    overflow:hidden;
    background:#eef2f6}
.map-image {
    width:100%;
    height:auto;
    display:block}
#tab-map .absolute {
    display:none}
.government-footer {
    background:var(--blue);
    color:white;
    padding:40px 0!important}
.government-footer [class*="text-"] {
    color:white!important}
.fiction-note {
    font-size:11px;
    color:#d4dfe9;
    margin-bottom:16px}
.modal {
    position:fixed;
    inset:0;
    z-index:100;
    background:#122237b8!important;
    overflow-y:auto;
    padding:24px}
.hidden {
    display:none!important}
.modal>div {
    background:white!important;
    color:var(--ink);
    position:relative;
    max-width:540px;
    margin:24px auto;
    padding:32px;
    border:1px solid var(--line)}
.modal-close {
    position:absolute;
    right:16px;
    top:8px;
    background:none;
    border:0;
    font-size:30px}
.form-note {
    font-size:12px;
    color:var(--muted);
    margin:12px 0}
input,select,textarea {
    background:white!important;
    border:1px solid #a1afbc!important;
    color:var(--ink)!important;
    padding:12px;
    width:100%;
    margin-top:8px;
    border-radius:2px}
input[type=checkbox] {
    width:20px;
    flex-shrink:0}
input[type=range] {
    padding:0}
#msgBox {
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:200;
    width:min(92vw,500px)}
#msgBox>div {
    background:white!important;
    color:var(--ink);
    padding:32px;
    border:2px solid var(--blue);
    box-shadow:0 20px 80px #14283b60;
    text-align:center}
#msgBox button,.modal button[type=submit] {
    background:var(--blue)!important;
    color:white!important;
    padding:12px 24px;
    border:0}
#msgText {
    font-size:17px}
.skip-link {
    position:absolute;
    top:-100px;
    left:12px;
    background:white;
    padding:12px;
    z-index:300}
.skip-link:focus {
    top:8px}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap}

/* Keep the archive's existing layouts, using the portal's paper-and-ink palette. */
.tab-content [class*="bg-black"],.tab-content [class*="bg-zinc"],.tab-content [class*="bg-yellow"] {
    background-color:#f4f6f8!important}
.tab-content [class*="text-zinc"],.tab-content [class*="text-gray"],.modal [class*="text-zinc"] {
    color:var(--muted)!important}
.tab-content [class*="text-red"],.tab-content [class*="text-yellow"],.tab-content [class*="text-blue"],.tab-content [class*="text-purple"],.tab-content [class*="text-green"] {
    color:var(--blue)!important}
.tab-content [class*="border-white"],.tab-content [class*="border-yellow"],.tab-content [class*="border-zinc"] {
    border-color:var(--line)!important}
.tab-content button.bg-red-600 {
    background:var(--blue)!important;
    color:white!important}
.tab-content button {
    border:1px solid #9aaabd}
.tab-content a.bg-white {
    border:1px solid var(--line)}
.tab-content .italic {
    font-style:normal}
.tab-content .text-xs {
    font-size:13px}
.tab-content [class*="text-[10px]"] {
    font-size:11px}
.tab-content .shadow-2xl,.tab-content .shadow-lg {
    box-shadow:none}

@media(max-width:800px) {
    .portal-container {
    padding-inline:20px}
.masthead {
    padding-block:20px}
.national-brand strong {
    font-size:24px}
.national-brand img {
    width:44px;
    height:44px}
.header-tools {
    gap:12px}
.header-tools>a {
    display:none}
.portal-navigation>div {
    padding:0;
    overflow-x:auto}
.tab-btn {
    flex:0 0 auto;
    padding:14px 20px}
.portal-main {
    padding:0 20px!important}
.national-hero {
    gap:28px;
    padding:36px 0}
.hero-copy h1 {
    font-size:34px}
.travel-advisory {
    flex-wrap:wrap;
    gap:8px 18px;
    padding:18px}
.travel-advisory p {
    flex-basis:100%;
    order:2}
.service-grid {
    gap:12px}
.service-card {
    padding:20px 16px 36px}
.service-card h3 {
    font-size:16px}
.information-grid {
    gap:24px;
    grid-template-columns:1.4fr 1fr}
.portal-section {
    padding:36px 0}
.section-heading>p {
    display:none}
}

@media(max-width:580px) {
    .official-strip>div>span:last-child {
    display:none}
.national-brand {
    gap:9px}
.national-brand strong {
    font-size:21px}
.national-brand small {
    font-size:8px}
.header-tools select {
    font-size:12px;
    max-width:108px;
    padding:7px}
.national-hero {
    grid-template-columns:1fr;
    gap:28px}
.hero-copy h1 {
    font-size:36px}
.hero-copy>p:not(.eyebrow) {
    font-size:13px}
.national-hero figure {
    max-width:100%}
.national-hero img {
    aspect-ratio:1.8}
.service-grid,.information-grid {
    grid-template-columns:1fr}
.service-card {
    padding:18px 22px}
.service-card h3 {
    margin:6px 0;
    font-size:19px}
.service-card p {
    padding-right:20px}
.section-heading h2 {
    font-size:22px}
.country-summary {
    margin-top:12px}
.information-row {
    gap:12px}
.modal {
    padding:12px}
.modal>div {
    padding:26px 20px}
.page-heading h1 {
    font-size:26px}
}

@media(prefers-reduced-motion:reduce) {
    html {
    scroll-behavior:auto}
*,*::before,*::after {
    animation:none!important;
    transition:none!important}
}