/* Shared page navigation. Existing education and FAQ content keeps its own styles. */
:root { --site-nav-height:80px; }
.site-header.with-page-navigation { min-height:var(--site-nav-height); padding:14px max(24px,calc((100vw - 1280px)/2)); flex-wrap:nowrap; gap:24px; background:#fbfcfff5; border-bottom:1px solid #cbd6e5; }
.site-header.with-page-navigation .wordmark { font-size:18px; }
.site-pages { display:flex; align-items:center; gap:8px; font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif; }
.site-pages a { display:flex; justify-content:center; align-items:center; min-height:44px; padding:10px 16px; border:1px solid #c4d0e4; border-radius:12px; color:#283854; background:#fff; font-size:13px; font-weight:700; line-height:1.45; text-decoration:none; }
.site-pages a[aria-current="page"] { background:#3f4cb6; border-color:#3f4cb6; color:#fff; }
.site-pages a:hover { border-color:#3f4cb6; }
.site-pages a:focus-visible,.site-breadcrumb a:focus-visible,.site-return-actions a:focus-visible,.site-learning-entry a:focus-visible { outline:3px solid #3146bd; outline-offset:3px; }
.site-label-compact { display:none; }
.site-breadcrumb { max-width:1280px; padding:8px 24px; margin:0 auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:13px; line-height:1.5; color:#40516b; }
.site-breadcrumb a { display:inline-flex; align-items:center; min-height:44px; color:#3448aa; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.site-breadcrumb [aria-current] { font-weight:700; }
.site-learning-entry { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px 28px; align-items:center; max-width:1232px; margin:8px auto 28px; padding:24px 32px; background:linear-gradient(115deg,#f0efff,#fffef5 64%,#e7f5df); border:2px solid #6672bf; border-radius:22px; box-shadow:0 5px 0 #d4ddf0; color:#25334e; }
.site-learning-entry .site-entry-kicker { margin:0 0 6px; font-size:12px; font-weight:700; color:#4654ad; letter-spacing:.04em; }
.site-learning-entry h2 { margin:0; font:700 26px/1.45 "Yu Gothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif; letter-spacing:0; }
.site-learning-entry .site-entry-description { margin:8px 0 0; font-size:14px; line-height:1.8; }
.site-learning-entry .site-entry-side { display:flex; flex-direction:column; align-items:stretch; gap:12px; }
.site-characters { display:flex; justify-content:center; gap:10px; }
.site-characters figure { margin:0; width:52px; text-align:center; }
.site-characters img { display:block; width:52px; height:52px; border-radius:50%; border:2px solid #fff; outline:1px solid #aab9d9; object-fit:cover; object-position:50% 15%; background:#e9f2ff; }
.site-characters figcaption { margin-top:4px; color:#40516b; font-size:10px; line-height:1.4; }
.site-navigation-cta { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:54px; padding:12px 18px; border:2px solid #263679; border-radius:12px; background:#4351b9; color:#fff; text-decoration:none; font-size:15px; font-weight:700; line-height:1.5; box-shadow:0 3px 0 #263679; }
.site-navigation-cta span:first-child { min-width:0; }
.site-navigation-cta span:last-child { flex:none; font-size:21px; }
.site-navigation-cta:hover { background:#34419c; }
.site-return-actions { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:1160px; padding:28px 24px; margin:0 auto 28px; font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif; }
.site-return-actions a { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:54px; padding:14px 20px; border:1px solid #b9c9e0; border-radius:12px; color:#304492; background:#fff; text-decoration:none; font-size:14px; font-weight:700; line-height:1.6; }
.site-return-actions a:hover { border-color:#304492; background:#f3f5ff; }
html { scroll-padding-top:calc(var(--site-nav-height) + 12px); }
body [id] { scroll-margin-top:calc(var(--site-nav-height) + 12px); }
@media(max-width:1100px) {
 .site-learning-entry { margin-inline:24px; }
}
@media(max-width:820px) {
 :root { --site-nav-height:120px; --header-height:120px; }
 .site-header.with-page-navigation { padding:12px 16px; flex-wrap:wrap; gap:6px; align-items:center; }
 .site-header.with-page-navigation .wordmark { font-size:16px; }
 .site-pages { display:grid; grid-template-columns:.7fr 1.25fr 1fr; gap:6px; width:100%; }
 .site-pages a { padding:9px 6px; font-size:13px; }
 .site-label-wide { display:none; }
 .site-label-compact { display:inline; }
 .site-breadcrumb { padding:4px 16px; gap:8px; font-size:12px; }
 .site-learning-entry { margin:4px 16px 24px; padding:20px; grid-template-columns:minmax(0,1fr); gap:16px; }
 .site-learning-entry h2 { font-size:23px; }
 .site-learning-entry .site-entry-side { flex-direction:row; align-items:center; }
 .site-learning-entry .site-characters { flex:none; }
 .site-learning-entry .site-navigation-cta { flex:1; }
 .site-return-actions { padding:20px 16px; gap:10px; }
 .site-return-actions a { padding:12px; font-size:13px; }
}
@media(max-width:560px) {
 .site-learning-entry .site-entry-side { flex-direction:column; align-items:stretch; }
 .site-characters { gap:10px; }
 .site-characters figure,.site-characters img { width:40px; }
 .site-characters img { height:40px; }
 .site-learning-entry .site-navigation-cta { font-size:14px; }
 .site-return-actions { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }


/* The three page destinations and the learning shortcut have distinct roles. */
:root { --site-nav-height:92px; --header-height:92px; }
.site-header.with-page-navigation { min-height:var(--site-nav-height); padding:12px max(24px,calc((100vw - 1280px)/2)); gap:18px; flex-wrap:nowrap; }
.site-menu { display:flex; align-items:center; gap:12px; min-width:0; }
.site-pages { display:grid; grid-template-columns:repeat(3,minmax(112px,1fr)); gap:6px; width:auto; }
.site-pages a { display:flex; flex-direction:column; min-height:56px; gap:2px; padding:6px 14px; font-size:14px; line-height:1.35; }
.site-pages a small { display:block; font:500 10px/1.35 Arial,sans-serif; opacity:.85; }
.site-tab-title { display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
.site-page-number { font-size:11px; font-weight:800; }
.site-character-shortcut { display:flex; align-items:center; justify-content:center; gap:8px; min-height:56px; padding:7px 12px; border:2px solid #637e21; border-radius:12px; background:#d8f38e; color:#2a4215; line-height:1.4; text-decoration:none; flex:none; }
.site-character-shortcut img { width:32px; height:32px; object-fit:cover; object-position:50% 15%; border-radius:50%; border:1px solid #fff; }
.site-character-shortcut small { display:block; font-size:10px; }
.site-character-shortcut strong { display:block; font-size:14px; }
.site-character-shortcut:hover,.site-home-character-cta:hover { background:#c9ed70; }
.site-character-shortcut:focus-visible,.site-character-hub a:focus-visible,.site-home-character-cta:focus-visible { outline:3px solid #3146bd; outline-offset:3px; }
.site-home-character-cta { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:50px; margin-top:14px; padding:10px 18px; border:2px solid #637e21; border-radius:12px; color:#2a4215; background:#ddf3a8; font-size:14px; font-weight:700; line-height:1.5; text-decoration:none; }
.site-entry-start-link { display:flex; align-items:center; justify-content:center; min-height:44px; color:#3448aa; font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.site-character-hub { max-width:1160px; margin:24px auto 48px; padding:28px; border:2px solid #8aabd0; border-radius:24px; background:linear-gradient(115deg,#eff4ff,#fcffe8); color:#25334e; font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif; }
.site-hub-heading { margin-bottom:22px; }
.site-hub-kicker { margin:0 0 8px; color:#4456a2; font-size:13px; font-weight:700; }
.site-hub-heading h2 { margin:0 0 10px; font-size:clamp(25px,3vw,34px); line-height:1.45; letter-spacing:0; }
.site-hub-heading p:last-child { margin:0; font-size:14px; line-height:1.8; }
.site-character-links { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.site-character-links a { display:flex; flex-direction:column; align-items:center; min-width:0; padding:16px 8px; gap:5px; border:1px solid #b9cae2; border-radius:16px; background:#fff; color:#263954; text-align:center; text-decoration:none; line-height:1.5; }
.site-character-links a:hover { border-color:#3f4cb6; background:#f4f5ff; }
.site-character-links img { width:90px; height:90px; max-width:100%; object-fit:cover; object-position:50% 15%; border-radius:50%; border:2px solid #d2dbf3; }
.site-character-links strong { font-size:18px; }
.site-character-links a>span { font-size:12px; }
.site-character-links small { margin-top:4px; color:#3549a4; font-size:11px; }
.site-hub-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.site-hub-actions a { display:flex; align-items:center; justify-content:center; min-height:48px; padding:10px 16px; border:1px solid #b7c7dc; border-radius:12px; background:#fff; color:#3448aa; font-size:13px; font-weight:700; text-decoration:none; line-height:1.5; }
.site-hub-actions a.site-character-video-link { background:#4351b9; border-color:#263679; color:#fff; }
html { scroll-padding-top:0; }
body [id] { scroll-margin-top:calc(var(--site-nav-height) + 12px); }
@media(max-width:1100px) {
 .site-character-hub { margin-inline:24px; }
 .site-header.with-page-navigation { padding-inline:20px; gap:12px; }
 .site-header.with-page-navigation .wordmark { font-size:16px; }
 .site-pages a { padding-inline:10px; }
}
@media(max-width:950px) {
 :root { --site-nav-height:162px; --header-height:162px; }
 .site-header.with-page-navigation { flex-wrap:wrap; padding:10px 16px; gap:8px; }
 .site-menu { display:flex; flex-direction:column; align-items:stretch; width:100%; gap:6px; }
 .site-pages { grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:6px; }
 .site-pages a { padding:6px 4px; min-height:48px; font-size:13px; }
 .site-character-shortcut { min-height:44px; padding:5px 10px; gap:8px; }
 .site-character-shortcut img { width:26px; height:26px; }
 .site-character-shortcut>span { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 10px; }
 .site-character-shortcut small { font-size:10px; }
 .site-character-shortcut strong { font-size:13px; }
 .site-breadcrumb { padding:4px 16px; font-size:12px; }
}
@media(max-width:560px) {
 .site-character-hub { margin:20px 16px 32px; padding:20px 16px; }
 .site-hub-heading p:last-child { font-size:13px; }
 .site-character-links { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
 .site-character-links a { padding:12px 5px; }
 .site-character-links img { width:64px; height:64px; }
 .site-character-links strong { font-size:15px; }
 .site-character-links a>span,.site-character-links small { font-size:10px; }
 .site-hub-actions { flex-direction:column; gap:8px; }
 .site-hub-actions a { width:100%; }
}