/* ============================================================================
   /ja/ja.css — Japanese overrides on top of /landing.css (spec 2026-10-05-japanese-site-design)
   ----------------------------------------------------------------------------
   Playfair Display and Plus Jakarta Sans have no Japanese glyphs. Unlike /ko/,
   NO Japanese web font is loaded: Cloudflare's font optimisation inlines every
   @font-face subset of a Google CJK font into the HTML (that is why each /ko/
   page is ~400 KB). Every Japanese device already ships good fonts, so the
   stacks below name them (Hiragino on Apple, Yu / Meiryo on Windows, Noto on
   Android). Latin letters keep the brand fonts because they come first.

   Japanese wraps between any two characters, so no keep-all; line-break:
   strict keeps 、。」ー etc. off the start of a line.
   ========================================================================== */
html[lang="ja"] body { font-family: 'Plus Jakarta Sans', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', YuGothic, Meiryo, 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif; line-break: strict; overflow-wrap: anywhere; line-height: 1.85; }
html[lang="ja"] .hero h1,
html[lang="ja"] .section-head h2,
html[lang="ja"] .price-card .pc-amount,
html[lang="ja"] .nbhd h3,
html[lang="ja"] .product-card h3,
html[lang="ja"] .inv-fallback h3,
html[lang="ja"] .cta-band h2,
html[lang="ja"] .ja-steps h3 { font-family: 'Playfair Display', 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Noto Serif JP', 'Noto Serif CJK JP', serif; letter-spacing: .01em; font-feature-settings: 'palt'; }
/* Headings break between phrases, not inside a word (Chrome/Edge 119+; others ignore it). */
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3 { word-break: auto-phrase; text-wrap: balance; }
html[lang="ja"] .hero h1 { line-height: 1.4; font-size: clamp(1.75rem, 3.2vw, 2.55rem); }
html[lang="ja"] .section-head h2 { line-height: 1.45; font-size: clamp(1.45rem, 2.7vw, 2.05rem); }
html[lang="ja"] .eyebrow, html[lang="ja"] .compare-table thead th { text-transform: none; letter-spacing: .04em; }
/* Italic has no meaning in Japanese typography; keep the accent colour only. */
html[lang="ja"] .italic { font-style: normal; }

/* Language switch in the desktop nav (links to the English twin). */
.lang-switch { color: var(--ink-2); font-size: .85rem; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
@media (max-width: 700px) {
  /* The mobile header only has room for the logo and the menu button; English
     stays reachable from the drawer and the footer. */
  .nav-right .lang-switch, .nav-right .nav-link { display: none; }
}
.lang-switch:hover { color: var(--red); text-decoration: none; }
.lang-alt { margin-left: .8rem; }
/* "How booking from Japan works" steps. */
.ja-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.ja-steps li { counter-increment: step; background: var(--cream-card); border: 1px solid var(--line); border-radius: 8px; padding: 1.3rem 1.2rem 1.2rem; position: relative; }
.ja-steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: var(--cream-card); font-weight: 700; font-size: .9rem; margin-bottom: .7rem; }
.ja-steps h3 { font-size: 1.1rem; color: var(--ink); margin-bottom: .35rem; }
.ja-steps p { font-size: .92rem; color: var(--ink-2); }

/* Included / checklist grid. */
.ja-checks { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem 1.4rem; margin-top: 1.4rem; }
.ja-checks li { padding-left: 1.6rem; position: relative; color: var(--ink-2); font-size: .95rem; }
.ja-checks li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--red); font-weight: 700; }
.ja-checks strong { color: var(--ink); }

/* Plain-language notice / glossary box. */
.ja-note { background: var(--cream-card); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 6px; padding: 1.1rem 1.3rem; margin-top: 1.4rem; color: var(--ink-2); font-size: .94rem; }
.ja-note strong { color: var(--ink); }
.ja-note ul { margin: .5rem 0 0 1.1rem; }
.ja-note li { margin-bottom: .3rem; }
.ja-glossary { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .9rem; margin-top: 1.4rem; }
.ja-glossary div { background: var(--cream-card); border: 1px solid var(--line); border-radius: 6px; padding: .9rem 1.1rem; }
.ja-glossary dt { font-weight: 700; color: var(--ink); }
.ja-glossary dd { color: var(--ink-2); font-size: .92rem; margin-top: .2rem; }
.band .prose { max-width: 760px; }
.band .prose p { color: var(--ink-2); margin-top: .9rem; }
.lead-form textarea { min-height: 90px; resize: vertical; }
.lf-error { color: var(--red); font-size: .88rem; margin-top: .6rem; min-height: 1.2em; }

/* LINE (公式LINE) — the Japan team's channel. A darker LINE green so white text passes WCAG AA (4.6:1). */
.ja-line { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; background: var(--cream-card); border: 1px solid var(--line); border-left: 4px solid #06C755; border-radius: 8px; padding: 1.2rem 1.4rem; margin-top: 1.4rem; }
.ja-line p { flex: 1 1 260px; color: var(--ink-2); font-size: .95rem; margin: 0; }
.ja-line strong { color: var(--ink); }
.line-btn { display: inline-flex; align-items: center; gap: .55rem; background: #04873D; color: #fff; font-weight: 700; font-size: .95rem; padding: .75rem 1.25rem; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.line-btn:hover { background: #036E32; color: #fff; text-decoration: none; }
.line-btn svg { width: 20px; height: 20px; flex: none; }
.lf-success .line-btn { margin-top: .9rem; }
.mobile-cta .mc-line { background: #04873D; color: #fff; }