/* Doomsday editorial layer. Watchlist identity and saved-state behavior are shared. */
.mg-route-page { background:#f4f5f2; }
.mg-route-page .watch-header { height:72px; }
.route-feature { min-height:390px; padding-top:44px; padding-bottom:44px; gap:56px; background:#121615; }
.route-feature .eyebrow { font-size:10px; letter-spacing:2px; margin:0; }
.route-feature .eyebrow span { display:inline-block; margin-left:12px; letter-spacing:1px; color:#bac3be; }
.route-feature h1 { font-size:clamp(30px,3.1vw,44px); line-height:1.5; letter-spacing:.015em; margin:24px 0 18px; }
.route-feature .intro { font-size:14px; line-height:1.95; margin:0; }
.route-feature .watch-start { margin-top:24px; min-height:48px; padding:12px 24px; gap:48px; }
.hero-note { color:#aab5af; font-size:11px; margin:12px 0 0; }
.route-feature__art { border-top:1px solid #39433e; border-bottom:1px solid #39433e; padding:20px 0; text-align:center; }
.route-feature__art img { width:100%; height:210px; object-fit:contain; }
.route-feature__art>span { display:block; font-size:9px; letter-spacing:3px; color:#8d9d93; margin-top:16px; }
.mg-route-page .route-controls { display:grid; grid-template-columns:1fr 1fr; gap:28px; padding:44px 0 24px; align-items:start; }
.mg-route-page .route-controls .eyebrow { margin:0; font-size:10px; color:#69726d; letter-spacing:2px; }
.mg-route-page .route-controls h2 { font-size:28px; line-height:1.5; letter-spacing:.02em; margin:8px 0 0; }
.route-about { font-size:12px; color:#5b655f; align-self:center; line-height:1.9; }
.route-about summary { cursor:pointer; padding:12px 0; font-weight:700; text-underline-offset:5px; }
.route-about p { margin:10px 0; }
.mg-route-page .route-summary { position:relative; display:flex; gap:16px; padding:22px 24px 26px; border:1px solid #dce1db; border-radius:4px; margin-top:0; overflow:hidden; }
.route-summary p { font-variant-numeric:tabular-nums; font-size:15px; }
.mg-route-page .route-summary a { color:#b72f25; font-size:13px; padding:8px 0; }
.route-meter { position:absolute; bottom:0; left:0; width:100%; height:4px; border:0; background:#e4e8e2; appearance:none; }
.route-meter::-webkit-progress-bar { background:#e4e8e2; }.route-meter::-webkit-progress-value { background:#e63e32; }.route-meter::-moz-progress-bar { background:#e63e32; }
.route-priority-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:22px 0 16px; margin:0 auto; }
.route-priority-nav a { display:grid; gap:3px; min-height:70px; padding:13px 15px; color:#26312b; text-decoration:none; background:#fff; border:1px solid #dce1db; border-radius:3px; }
.route-priority-nav a:first-child { border-color:#e63e32; box-shadow:inset 0 3px #e63e32; }
.route-priority-nav span { color:#b72f25; font-size:12px; font-weight:800; letter-spacing:1px; }
.route-priority-nav b { font-size:13px; }
.route-priority-nav small { color:#68736c; font-size:10px; line-height:1.5; }
.mg-route-page .sync-note { font-size:11px; margin-top:0; color:#606c64; }
.mg-route-page #route-list { max-width:960px; margin-top:32px; padding-left:14px; }
.mg-route-page #route-list>li { padding-left:28px; padding-bottom:28px; border-left-color:#d4dcd4; }
.mg-route-page #route-list>li:last-child { border-left-color:transparent; }
.mg-route-page #route-list>.route-section { padding:38px 0 16px; border:0; }
.mg-route-page #route-list>.route-section:first-child { padding-top:0; }
.route-section__stars { display:block; color:#b72f25; font-size:12px; font-weight:800; letter-spacing:1.2px; }
.route-section strong { display:block; margin:5px 0 3px; color:#202923; font-size:22px; line-height:1.45; }
.route-section small { display:block; color:#69756d; font-size:12px; line-height:1.8; }
.mg-route-page .marker { width:30px; height:30px; left:-16px; top:28px; border:4px solid #f4f5f2; background:#dce3dc; color:#4c5c50; font-size:10px; }
.mg-route-page li.next .marker { background:#e63e32; color:white; }
.mg-route-page .card { grid-template-columns:152px minmax(0,1fr); gap:28px; padding:28px; border:1px solid #dce1db; border-radius:4px; background:#fff; }
.mg-route-page li.next .card { border:1px solid #e63e32; box-shadow:inset 3px 0 #e63e32; }
.mg-route-page .card>img { width:152px; height:204px; border-radius:2px; object-fit:cover; }
.mg-route-page .card h3 { font-size:23px; line-height:1.5; margin:7px 0; letter-spacing:.015em; }
.mg-route-page .card .tag { font-size:10px; letter-spacing:1.1px; margin:0; color:#68756c; }
.mg-route-page li.next .tag { color:#b72f25; }.mg-route-page li.watched .tag { color:#357050; }
.film-meta { color:#718076; font-size:11px; letter-spacing:.5px; margin:0 0 16px; }
.mg-route-page .reason { font-size:14px; line-height:1.9; color:#4c5850; margin:0; }
.reason::before { content:'予習のポイント'; display:block; font-size:10px; font-weight:700; color:#647168; margin-bottom:5px; letter-spacing:.5px; }
.route-actions { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; border-top:1px solid #e8ece6; padding-top:18px; margin-top:20px; align-items:stretch; }
.route-video { background:#153e44; min-height:48px; font-size:13px; padding:12px; transition:background .15s; }.route-video:hover { background:#20575f; }
.route-check { background:white; border:1px solid #d8dfd7; border-radius:2px; justify-content:center; font-size:13px; padding:12px; min-height:48px; }
.route-check:has(input:checked) { background:#edf5ef; border-color:#b7d0be; color:#285a3a; }
.route-check input { width:19px; height:19px; accent-color:#357050; }
.route-lock { grid-column:1/-1; font-size:11px; margin:0; color:#6c766f; }
.mg-route-page .route-actions .article-link { grid-column:1/-1; border:0; background:#f4eae7; color:#a82d24; min-height:46px; padding:10px 16px; font-size:13px; }
.mg-route-page li.watched .card { background:#fcfdfb; }.mg-route-page li.watched img { filter:none; }.watched .route-video { background:#fff; color:#33565a!important; border:1px solid #c7d4d4; }
.route-unavailable { align-self:center; font-size:12px; margin:0; }
.route-destination { padding:48px 5%; background:#151c18; }.route-destination h2 { line-height:1.5; }.route-destination .watch-start { background:transparent; border:1px solid #67766b; }.mg-route-page footer { padding:32px 20px; color:#58655b; }
@media(max-width:700px){
 .mg-route-page .watch-header{height:60px}.route-feature{display:flex;flex-direction:column-reverse;padding:20px 5% 30px;gap:20px;min-height:0}.route-feature__art{padding:0;border:0}.route-feature__art img{height:112px;max-width:300px;margin:auto}.route-feature__art>span{display:none}.route-feature h1{font-size:28px;margin:14px 0;line-height:1.5}.route-feature .eyebrow{font-size:9px;letter-spacing:1.6px}.route-feature .intro{font-size:13px;line-height:1.9}.route-feature .watch-start{margin-top:18px;min-height:46px}.hero-note{font-size:10px;margin-top:10px}
 .mg-route-page .route-controls{display:block;padding:28px 0 16px}.mg-route-page .route-controls h2{font-size:23px;line-height:1.45}.route-controls .mobile-break{display:none}.route-about{margin-top:8px;font-size:12px}.route-about summary{padding:10px 0}.mg-route-page .route-summary{padding:14px 16px 18px}.route-summary p{font-size:13px}.mg-route-page .route-summary a{font-size:12px}.route-priority-nav{gap:6px;padding:18px 0 12px}.route-priority-nav a{min-height:76px;padding:10px 9px}.route-priority-nav span{font-size:10px}.route-priority-nav b{font-size:11px}.route-priority-nav small{font-size:9px}.mg-route-page .sync-note{font-size:10px;line-height:1.7}
 .mg-route-page #route-list{margin-top:18px;padding-left:10px}.mg-route-page #route-list>.route-section{padding:32px 0 13px}.route-section__stars{font-size:11px}.route-section strong{font-size:19px;margin-top:4px}.route-section small{font-size:11px}.mg-route-page #route-list>li{padding-left:18px;padding-bottom:22px}.mg-route-page .marker{width:24px;height:24px;left:-13px;top:24px;font-size:9px;border-width:3px}.mg-route-page .card{grid-template-columns:78px minmax(0,1fr);gap:6px 16px;padding:18px}.card-copy{display:contents}.mg-route-page .card>img{grid-column:1;grid-row:1/4;width:78px;height:108px}.mg-route-page .card .tag{grid-column:2;margin:0;align-self:end;font-size:9px}.mg-route-page .card h3{grid-column:2;font-size:18px;line-height:1.5;margin:0;align-self:center}.film-meta{grid-column:2;font-size:10px;margin:0;align-self:start}.mg-route-page .card .reason{grid-column:1/-1;font-size:13px;line-height:1.95;margin:14px 0 0;padding:0}.reason::before{font-size:10px;margin-bottom:4px}.route-actions{grid-column:1/-1;margin-top:14px;padding-top:16px;gap:10px}.route-video,.route-check{font-size:12px;padding:10px 8px;min-height:46px}.route-check{gap:7px}.route-check input{width:18px;height:18px}.route-lock{font-size:10px;line-height:1.8}.route-destination{padding:36px 5%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.route-video{transition:none}}
@media(max-width:700px){.route-controls .mobile-break{display:block}.route-check span{white-space:nowrap}.route-feature__art img{height:96px}.route-feature{gap:16px}.mg-route-page .route-controls h2{font-size:22px}}

/* Mobile-first finishing: a consistent reading column and comfortable controls. */
.mg-route-page { background:#f5f6f3; -webkit-text-size-adjust:100%; }
.mg-route-page .route-priority-nav { width:90%; max-width:960px; }
.route-priority-nav a { text-align:center; align-content:center; gap:5px; transition:background .15s; }
.route-priority-nav a:hover { background:#fff6f3; }
.route-priority-nav b { color:#b72f25; font-size:15px; letter-spacing:2px; }
.route-priority-nav span { color:#434e46; font-size:12px; letter-spacing:0; }
.mg-route-page .route-summary p { margin:0; }
.mg-route-page .route-summary a { text-decoration:none; min-height:44px; display:flex; align-items:center; }
.mg-route-page .route-section { scroll-margin-top:24px; }
.mg-route-page .route-section strong { font-weight:800; letter-spacing:.02em; }
.route-video,.mg-route-page .route-actions .article-link { text-decoration:none; }
.mg-route-page .route-lock { line-height:1.8; }
.mg-route-page .card { border-radius:6px; }
.mg-route-page .route-feature .watch-start { display:flex; align-items:center; justify-content:space-between; max-width:320px; }
.mg-route-page .route-feature__art img { display:block; margin:auto; }
@media(max-width:700px){
 .mg-route-page .watch-header { height:60px; padding:0 20px; }
 .mg-route-page .header-link { min-height:44px; display:flex; align-items:center; }
 .route-feature { padding:24px 20px 32px; gap:24px; align-items:stretch; }
 .route-feature__art { padding:0; }
 .route-feature__art img { height:112px; max-width:280px; }
 .route-feature h1 { font-size:clamp(26px,7.15vw,32px); line-height:1.5; letter-spacing:-.025em; margin:18px 0 16px; }
 .route-feature .intro { font-size:14px; line-height:1.9; color:#d2d8d3; }
 .route-feature .eyebrow { font-size:10px; letter-spacing:1.5px; }
 .mg-route-page .route-feature .watch-start { width:100%; max-width:none; min-height:52px; margin-top:24px; padding:12px 20px; font-size:15px; }
 .hero-note { font-size:11px; line-height:1.7; margin-top:12px; }
 .mg-route-page .route-controls,.mg-route-page .route-summary,.mg-route-page .sync-note,.mg-route-page .route-priority-nav,.mg-route-page #route-list { width:calc(100% - 40px); }
 .mg-route-page .route-controls { padding:32px 0 20px; }
 .mg-route-page .route-controls h2 { font-size:24px; line-height:1.5; margin:10px 0 0; letter-spacing:-.02em; }
 .route-about { font-size:13px; margin-top:12px; }
 .route-about summary { min-height:44px; padding:10px 0; }
 .route-about p { line-height:1.9; }
 .mg-route-page .route-summary { padding:12px 16px 16px; gap:8px; border-radius:5px; }
 .route-summary p { font-size:14px; }
 .mg-route-page .route-summary a { font-size:12px; }
 .route-priority-nav { gap:8px; padding:16px 0 12px; }
 .route-priority-nav a { min-height:76px; padding:10px 4px; border-radius:4px; }
 .route-priority-nav b { font-size:14px; }
 .route-priority-nav span { font-size:11px; }
 .mg-route-page .sync-note { font-size:11px; line-height:1.85; margin-bottom:0; }
 .mg-route-page #route-list { padding-left:0; margin-top:28px; margin-bottom:40px; }
 .mg-route-page #route-list>.route-section { padding:36px 0 18px; }
 .route-section__stars { font-size:12px; letter-spacing:2px; }
 .route-section strong { font-size:22px; margin:6px 0 5px; }
 .route-section small { font-size:12px; }
 .mg-route-page #route-list>li:not(.route-section) { margin-left:10px; padding:0 0 20px 18px; }
 .mg-route-page .marker { left:-12px; top:22px; width:22px; height:22px; border:3px solid #f5f6f3; font-size:9px; }
 .mg-route-page .card { grid-template-columns:72px minmax(0,1fr); gap:5px 14px; padding:18px 16px; }
 .mg-route-page .card>img { width:72px; height:102px; border-radius:3px; }
 .mg-route-page .card h3 { font-size:18px; line-height:1.55; letter-spacing:0; overflow-wrap:anywhere; }
 .mg-route-page .card .tag { font-size:10px; letter-spacing:.5px; }
 .film-meta { font-size:11px; line-height:1.6; }
 .mg-route-page .card .reason { font-size:14px; line-height:1.9; margin-top:18px; }
 .reason::before { font-size:11px; margin-bottom:7px; color:#67736b; }
 .route-actions { margin-top:18px; padding-top:18px; gap:10px; }
 .route-video,.route-check { min-height:50px; font-size:12px; padding:12px 6px; border-radius:4px; }
 .route-check { gap:6px; }
 .route-check input { width:20px; height:20px; }
 .mg-route-page .route-lock { font-size:11px; margin-top:2px; }
 .mg-route-page .route-actions .article-link { min-height:48px; font-size:13px; padding:12px 8px; border-radius:4px; }
 .route-destination { padding:36px 20px; margin-top:36px; }
 .mg-route-page footer { padding:28px 20px; }
}
@media(min-width:701px){
 .route-feature { padding-top:56px; padding-bottom:56px; }
 .mg-route-page .route-controls { padding-top:48px; }
 .mg-route-page .card { padding:28px; }
 .route-priority-nav a { min-height:82px; }
}
@media(max-width:359px){
 .mg-route-page .watch-header { padding:0 16px; }
 .route-feature { padding-left:16px; padding-right:16px; }
 .mg-route-page .route-controls,.mg-route-page .route-summary,.mg-route-page .sync-note,.mg-route-page .route-priority-nav,.mg-route-page #route-list { width:calc(100% - 32px); }
 .mg-route-page .card { grid-template-columns:60px minmax(0,1fr); padding:16px 12px; gap:5px 10px; }
 .mg-route-page .card>img { width:60px; height:88px; }
 .mg-route-page .card h3 { font-size:16px; }
 .route-actions { grid-template-columns:1fr; }
}

.route-streaming { margin-top:24px; padding:18px 0 0; border-top:1px solid #ffffff26; color:#cbd5ce; }
.route-streaming p { margin:0; font-size:13px; line-height:1.85; }
.route-streaming strong { display:block; color:#fff; font-size:15px; font-weight:700; }
.route-streaming p+p { margin-top:8px; font-size:12px; }
.route-affiliate { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:14px 18px; margin:18px 0 8px; background:#0063e5; color:#fff; border-radius:4px; font-size:14px; font-weight:700; text-decoration:none; box-shadow:0 8px 24px #0063e533; transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease; }
.route-affiliate:hover { background:#0483ee; color:#fff; box-shadow:0 10px 28px #0063e54d; transform:translateY(-1px); }
.route-affiliate:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.route-affiliate-note { display:block; margin-bottom:12px; font-size:11px; line-height:1.7; color:#bac7bf; }
.route-streaming .route-affiliate-note+p { font-size:12px; }
/* Cinematic key visual and landscape artwork. */
.route-feature { position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse at 78% 30%,#263d33 0, #111c17 38%,#0b100e 75%); border-bottom:3px solid #e63e32; }
.route-feature::before { content:''; position:absolute; z-index:-1; width:620px; height:620px; right:-80px; top:-180px; border:1px solid #b7c6af18; border-radius:50%; box-shadow:0 0 0 64px #afc2ab06,0 0 0 128px #afc2ab05; pointer-events:none; }
.route-feature__copy { position:relative; z-index:1; }
.route-feature__art { position:relative; padding:36px 16px; border:0; background:radial-gradient(ellipse,#28423855,transparent 70%); }
.mg-route-page .route-feature__art img { width:100%; height:auto; max-height:280px; object-fit:contain; mix-blend-mode:screen; }
.route-feature__art>span { margin-top:24px; color:#a9b7a9; letter-spacing:4px; }
.route-feature h1 { letter-spacing:-.035em; font-weight:900; }
.route-feature .eyebrow { color:#bdc9bf; }
.route-feature .intro { max-width:440px; }
.mg-route-page .route-feature .watch-start { border-radius:3px; box-shadow:0 8px 28px #0003; }
@media(max-width:700px){
 .route-feature { gap:0; padding:0 20px 32px; }
 .route-feature::before { width:360px; height:360px; right:-80px; top:-130px; }
 .route-feature__art { margin:0 -20px; padding:28px 28px 22px; }
 .mg-route-page .route-feature__art img { width:100%; max-width:360px; height:156px; max-height:none; }
 .route-feature__art>span { display:block; font-size:8px; letter-spacing:3px; margin:10px 0 0; }
 .route-feature .eyebrow { font-size:9px; letter-spacing:1.8px; margin-top:12px; }
 .route-feature h1 { font-size:clamp(27px,7.5vw,34px); line-height:1.45; margin:16px 0; }
 .route-feature .intro { font-size:13px; line-height:1.9; }
 .mg-route-page .route-feature .watch-start { margin-top:22px; }
 .mg-route-page .card { display:block; padding:0; overflow:hidden; }
 .mg-route-page .card>img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; object-position:center; background:#101412; border-radius:0; margin:0; }
 .mg-route-page .card-copy { display:block; padding:20px 18px 18px; }
 .mg-route-page .card .tag { margin:0 0 8px; font-size:10px; }
 .mg-route-page .card h3 { margin:0 0 8px; font-size:20px; line-height:1.5; }
 .mg-route-page .film-meta { margin:0; font-size:11px; }
 .mg-route-page .card .reason { margin-top:18px; }
 .mg-route-page li.next .card { box-shadow:none; }
 .mg-route-page li.next .card-copy { border-top:3px solid #e63e32; padding-top:17px; }
 .mg-route-page .marker { top:18px; }
}
@media(max-width:359px){
 .route-feature { padding-left:16px; padding-right:16px; }
 .route-feature__art { margin:0 -16px; padding-left:24px; padding-right:24px; }
 .mg-route-page .route-feature__art img { height:136px; }
 .mg-route-page .card-copy { padding:18px 14px; }
 .mg-route-page .card h3 { font-size:18px; }
}