/* roulang page: index */
:root{
    --ink:#171917;--paper:#f7f7f2;--white:#fff;--muted:#666c67;--line:#dfe2dc;
    --orange:#f05a32;--orange-dark:#d84622;--teal:#c7ebe3;--teal-ink:#164a42;
    --night:#202420;--soft:#eff1eb;--radius:6px;--shadow:0 8px 24px rgba(22,27,23,.12);
    --max:1200px;--gutter:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI","Noto Sans CJK SC","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.65}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
button{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #16796c;outline-offset:3px}
.container{width:min(var(--max),calc(100% - var(--gutter)*2));margin-inline:auto}
.skip-link{position:absolute;left:-9999px;top:8px;background:#fff;padding:10px;z-index:99}
.skip-link:focus{left:8px}
.site-header{height:76px;background:rgba(247,247,242,.97);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.nav-wrap{height:100%;display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:11px;min-width:275px;font-weight:800;font-size:17px}
.brand-mark{width:40px;height:40px;display:grid;place-items:center;background:var(--orange);color:white;border-radius:4px;font-weight:900;font-size:14px}
.primary-nav{display:flex;align-items:center;justify-content:flex-end;gap:25px;margin-left:auto}
.primary-nav a{font-size:14px;color:#424843;transition:color .18s}
.primary-nav a:hover,.primary-nav a[aria-current="location"]{color:var(--orange-dark)}
.nav-action{background:var(--ink);color:#fff;padding:10px 15px;border-radius:4px;font-size:14px;font-weight:700;white-space:nowrap}
.nav-action:hover{background:var(--orange)}
.menu-toggle{display:none;border:1px solid var(--line);background:transparent;width:42px;height:42px;border-radius:4px;color:var(--ink);cursor:pointer}
.hero{position:relative;isolation:isolate;min-height:590px;display:flex;align-items:center;overflow:hidden;background:#1b211e;color:#fff}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
linear-gradient(90deg,rgba(16,21,18,.94) 0%,rgba(16,21,18,.78) 42%,rgba(16,21,18,.13) 100%),
linear-gradient(0deg,rgba(16,21,18,.60),transparent 55%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Crect width='1600' height='900' fill='%23272d28'/%3E%3Cpath fill='%233e5145' d='M840 0h760v900H840z'/%3E%3Cpath fill='%236b7766' d='M1110 0h490v900h-490z'/%3E%3Cpath fill='%23bd9d71' d='M1240 0h12v900h-12zM1390 0h8v900h-8z'/%3E%3Crect x='945' y='120' width='560' height='490' fill='%23343d36'/%3E%3Cpath fill='%23849675' d='M945 570l135-190 100 112 135-215 190 293z'/%3E%3Ccircle cx='1220' cy='260' r='68' fill='%23e7bd76'/%3E%3Cpath fill='%23222623' d='M0 690h1600v210H0z'/%3E%3C/svg%3E");
background-size:cover;background-position:center}
.hero::after{content:"";position:absolute;right:7%;top:14%;width:22%;height:70%;border:1px solid rgba(255,255,255,.17);z-index:-1}
.hero-content{padding-block:70px 92px;max-width:670px}
.eyebrow{display:inline-flex;gap:9px;align-items:center;text-transform:none;font-size:13px;color:#c7ebe3;font-weight:700}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--orange)}
.hero h1{font-size:clamp(40px,5vw,64px);line-height:1.12;margin:19px 0 18px;max-width:620px}
.hero h1 em{font-style:normal;color:#ff784f}
.hero-lead{font-size:18px;color:#e2e5df;max-width:630px;margin:0 0 14px}
.hero-copy{max-width:610px;color:#c4cbc4;margin:0 0 27px;font-size:15px}
.hero-actions{display:flex;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:1px solid transparent;border-radius:4px;font-weight:750;font-size:15px;transition:background .18s,color .18s,border-color .18s,transform .18s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-dark)}
.btn-secondary{border-color:rgba(255,255,255,.55);color:#fff}
.btn-secondary:hover{background:#fff;color:var(--ink)}
.hero-note{margin-top:34px;display:flex;gap:20px;align-items:center;color:#c4cbc4;font-size:13px}
.hero-note strong{font-size:21px;color:#fff;margin-right:5px}
.hero-cue{position:absolute;bottom:0;left:0;right:0;border-top:1px solid rgba(255,255,255,.18);color:#e6eae4}
.hero-cue .container{height:53px;display:flex;align-items:center;justify-content:space-between;font-size:13px}
.cue-mark{color:#ff784f;font-weight:800}
section{padding:76px 0;border-bottom:1px solid var(--line)}
.section-dark{background:var(--night);color:#fff;border-color:#383e39}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:32px}
.section-kicker{font-size:12px;font-weight:800;color:var(--orange-dark);text-transform:uppercase;letter-spacing:1px}
.section-dark .section-kicker{color:#80cbb9}
.section-head h2{font-size:32px;line-height:1.2;margin:7px 0 0}
.section-head p{max-width:500px;color:var(--muted);margin:0;font-size:14px}
.section-dark .section-head p{color:#b8c0b9}
.text-link{font-size:14px;font-weight:750;color:var(--orange-dark);white-space:nowrap}
.benefits{padding-block:30px;background:#fff}
.benefit-row{display:grid;grid-template-columns:repeat(3,1fr)}
.benefit{padding:5px 25px;border-right:1px solid var(--line);display:flex;gap:16px;align-items:center}
.benefit:first-child{padding-left:0}
.benefit:last-child{border:0}
.benefit-number{font-size:30px;line-height:1;color:var(--orange);font-weight:900}
.benefit h3{margin:0 0 3px;font-size:16px}
.benefit p{margin:0;color:var(--muted);font-size:13px}
.film-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 20px}
.film-card{min-width:0}
.poster{aspect-ratio:4/3;position:relative;overflow:hidden;border-radius:var(--radius);background:#46544a}
.poster::before,.poster::after{content:"";position:absolute}
.poster::before{inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.75))}
.poster::after{width:48%;height:120%;left:28%;top:-15%;background:rgba(16,20,17,.30);transform:rotate(16deg)}
.poster.sea{background:linear-gradient(135deg,#758e85,#d0b99a 48%,#445c56)}
.poster.family{background:linear-gradient(135deg,#d4a168,#6f4939 54%,#303a32)}
.poster.name{background:linear-gradient(140deg,#75a5a7,#405d80 52%,#e9a36b)}
.poster.letter{background:linear-gradient(150deg,#c4d2d1,#a5afb8 48%,#50606d)}
.poster.spirited{background:linear-gradient(135deg,#5d8a85,#34736e 50%,#c9aa63)}
.poster.confession{background:linear-gradient(135deg,#a75d49,#242a2b 55%,#d6b183)}
.poster.walking{background:linear-gradient(145deg,#a9b29c,#6b806e 52%,#35433b)}
.poster.bouquet{background:linear-gradient(135deg,#bf8575,#d8b5a0 50%,#5e6564)}
.poster.departures{background:linear-gradient(140deg,#d5c8a2,#69736a 52%,#313a36)}
.poster.yokomichi{background:linear-gradient(130deg,#86a4a0,#d5b579 50%,#50655c)}
.poster.villain{background:linear-gradient(130deg,#b18068,#4a4542 48%,#262b2b)}
.poster.tokyo{background:linear-gradient(135deg,#777e7b,#c6b7a0 50%,#5a6b64)}
.poster-word{position:absolute;z-index:1;left:15px;bottom:13px;color:#fff;font-weight:850;font-size:19px;line-height:1.25;max-width:75%;text-shadow:0 2px 6px #000}
.poster-tag{position:absolute;z-index:2;top:10px;left:10px;background:var(--teal);color:var(--teal-ink);padding:4px 8px;border-radius:3px;font-size:11px;font-weight:800}
.film-meta{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:10px}
.film-meta h3{font-size:15px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rating{font-size:13px;font-weight:800;color:#b33d22;white-space:nowrap}
.film-sub{font-size:12px;color:var(--muted);margin-top:2px}
.scene-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:42px;align-items:center}
.scene-art{min-height:380px;position:relative;overflow:hidden;border-radius:4px;background:
linear-gradient(90deg,rgba(26,31,27,.15),rgba(26,31,27,.5)),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 650'%3E%3Crect width='1000' height='650' fill='%23c6c9bc'/%3E%3Crect y='390' width='1000' height='260' fill='%234a5d50'/%3E%3Cpath d='M0 300L310 80l240 220v210H0z' fill='%237a8271'/%3E%3Cpath d='M510 310L780 90l220 200v250H510z' fill='%2399957d'/%3E%3Crect x='185' y='250' width='130' height='210' fill='%23bd7953'/%3E%3Crect x='690' y='270' width='100' height='190' fill='%23c1a478'/%3E%3Ccircle cx='500' cy='170' r='60' fill='%23e7c27f'/%3E%3C/svg%3E");
background-size:cover;background-position:center}
.scene-stamp{position:absolute;left:20px;bottom:20px;background:#fff;padding:12px 16px;color:var(--ink);font-weight:800}
.scene-copy h2{font-size:32px;line-height:1.25;margin:8px 0 13px}
.scene-copy>p{color:var(--muted);font-size:15px}
.scene-steps{list-style:none;padding:0;margin:24px 0 0;counter-reset:step}
.scene-steps li{counter-increment:step;display:flex;gap:15px;padding:14px 0;border-top:1px solid var(--line)}
.scene-steps li::before{content:"0" counter(step);font-weight:900;color:var(--orange);font-size:14px}
.scene-steps strong{display:block;font-size:15px}
.scene-steps span{display:block;color:var(--muted);font-size:13px}
.featured-grid{display:grid;grid-template-columns:1.15fr .85fr 1fr;grid-template-rows:210px 210px;gap:12px}
.featured{position:relative;overflow:hidden;border-radius:4px;background:#566357;isolation:isolate}
.featured::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent 70%)}
.featured .poster{position:absolute;inset:0;height:100%;aspect-ratio:auto;border-radius:0;z-index:-2}
.featured:nth-child(1){grid-row:span 2}
.featured:nth-child(4){grid-column:2 / 4}
.featured-content{position:absolute;left:18px;right:18px;bottom:15px}
.featured-content h3{font-size:20px;margin:0 0 5px}
.featured-content p{font-size:13px;color:#e3e8e2;margin:0}
.featured-label{display:inline-block;background:var(--orange);padding:3px 8px;font-size:11px;font-weight:800;margin-bottom:8px}
.feedback-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.quote{border-top:2px solid var(--orange);padding-top:17px}
.stars{color:#f0783f;font-size:15px;letter-spacing:2px}
.quote blockquote{font-size:17px;line-height:1.6;margin:12px 0 15px}
.quote-meta{display:flex;justify-content:space-between;color:#b7c0b8;font-size:12px}
.channel-band{background:#fff}
.channel-strip{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.channel{padding:22px 18px;border-right:1px solid var(--line);min-height:155px}
.channel:first-child{padding-left:0}
.channel:last-child{border:0}
.channel-index{font-size:12px;color:var(--orange-dark);font-weight:850}
.channel h3{font-size:18px;margin:9px 0 6px}
.channel p{font-size:13px;color:var(--muted);margin:0}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.compare-column{padding:24px;background:#fff;border:1px solid var(--line);border-radius:4px}
.compare-column.recommended{border:2px solid var(--orange);padding:23px}
.compare-column h3{font-size:19px;margin:0 0 5px;display:flex;justify-content:space-between}
.recommend-label{color:var(--orange-dark);font-size:12px}
.compare-column>p{font-size:13px;color:var(--muted);margin:0 0 15px}
.compare-list{list-style:none;padding:0;margin:0}
.compare-list li{padding:10px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;font-size:14px}
.compare-list span:last-child{font-weight:750;text-align:right}
.rank-columns{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.rank-list{list-style:none;margin:0;padding:0}
.rank-item{display:grid;grid-template-columns:44px 1fr auto;gap:13px;align-items:center;padding:11px 0;border-bottom:1px solid #3a403b}
.rank-no{font-size:25px;font-weight:900;color:#9da69d;font-variant-numeric:tabular-nums}
.rank-item:nth-child(-n+3) .rank-no{color:#ff784f}
.rank-title{font-size:15px;font-weight:750}
.rank-category{font-size:11px;color:#aeb8af;margin-left:8px;padding:2px 5px;border:1px solid #4a514b;border-radius:3px}
.rank-score{text-align:right;font-size:12px;color:#c2cbc3}
.rank-score strong{display:block;font-size:15px;color:#fff}
.evidence-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.evidence-copy h2{font-size:30px;line-height:1.25;margin:8px 0 12px}
.evidence-copy p{color:var(--muted);margin:0;max-width:560px}
.evidence-list{border-top:1px solid var(--line)}
.evidence-item{display:grid;grid-template-columns:90px 1fr;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
.evidence-date{font-size:12px;color:var(--orange-dark);font-weight:800}
.evidence-item strong{display:block;font-size:14px}
.evidence-item span{font-size:12px;color:var(--muted)}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 20px}
.news-item{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:15px}
.news-thumb{height:82px;overflow:hidden;border-radius:4px}
.news-thumb .poster{height:100%;aspect-ratio:auto;border-radius:0}
.news-item h3{font-size:14px;line-height:1.45;margin:0 0 7px}
.news-item time{font-size:12px;color:var(--muted)}
.faq-list{border-top:1px solid var(--line);max-width:900px;margin:auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{padding:18px 34px 18px 0;cursor:pointer;font-weight:750;list-style:none;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:4px;top:15px;font-size:23px;color:var(--orange)}
.faq-item[open] summary::after{content:"−"}
.faq-item p{margin:0;padding:0 35px 18px 0;color:var(--muted);font-size:14px}
.concerns{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.concern{padding:19px 0;border-top:2px solid #80cbb9}
.concern h3{font-size:16px;margin:0 0 8px}
.concern p{font-size:14px;color:#bdc5be;margin:0}
.notice-band{padding:28px 0;background:#d9eee7;border:0}
.notice-content{display:flex;align-items:center;justify-content:space-between;gap:24px}
.notice-title{font-weight:850;color:var(--teal-ink);font-size:17px}
.notice-content p{margin:4px 0 0;color:#416a61;font-size:13px}
.notice-link{white-space:nowrap;color:var(--teal-ink);font-weight:800;border-bottom:1px solid currentColor}
.site-footer{background:#171917;color:#fff;padding:55px 0 22px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:38px}
.footer-brand{display:flex;gap:11px;align-items:center;font-weight:850;font-size:17px}
.footer-intro{max-width:300px;color:#b7beb8;font-size:13px;margin:15px 0 0}
.footer-col h3{font-size:13px;color:#aeb7af;margin:0 0 13px}
.footer-col a{display:block;color:#e1e5e0;font-size:13px;margin:8px 0}
.footer-col a:hover{color:#ff8663}
.footer-bottom{border-top:1px solid #353b36;padding-top:18px;display:flex;justify-content:space-between;gap:20px;color:#aeb6af;font-size:12px}
.sticky-cta{position:fixed;z-index:25;bottom:0;left:0;right:0;background:rgba(24,28,25,.97);color:#fff;border-top:1px solid #474d48;padding:10px 0 calc(10px + env(safe-area-inset-bottom));transition:transform .25s ease}
.sticky-cta.is-hidden{transform:translateY(110%)}
.sticky-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.sticky-copy{font-size:13px;color:#d5dbd5}
.sticky-copy strong{color:white;margin-right:9px}
.sticky-actions{display:flex;gap:10px;align-items:center}
.sticky-actions .btn{min-height:40px;padding:0 16px}
.close-cta{width:38px;height:38px;border:1px solid #555d57;border-radius:4px;background:transparent;color:#fff;cursor:pointer;font-size:21px}
.close-cta:hover{background:#3a413b}
@media(max-width:1024px){
    :root{--gutter:22px}
    .brand{min-width:0}
    .primary-nav{gap:15px}
    .nav-action{display:none}
    .film-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .channel-strip{grid-template-columns:repeat(3,1fr)}
    .channel:nth-child(3){border-right:0}
    .channel:nth-child(n+4){border-top:1px solid var(--line)}
    .news-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
    :root{--gutter:20px}
    .site-header{height:68px}
    .nav-wrap{justify-content:space-between}
    .brand{font-size:15px}
    .brand-mark{width:38px;height:38px}
    .menu-toggle{display:grid;place-items:center}
    .primary-nav{display:none;position:absolute;top:68px;left:0;right:0;margin:0;padding:10px 20px 18px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow);align-items:stretch;gap:0}
    .primary-nav.is-open{display:flex;flex-direction:column}
    .primary-nav a{padding:12px 4px;border-bottom:1px solid var(--line);font-size:15px}
    .hero{min-height:580px;align-items:flex-start}
    .hero::before{background:linear-gradient(90deg,rgba(16,21,18,.92),rgba(16,21,18,.52)),linear-gradient(0deg,rgba(16,21,18,.75),transparent 65%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 900'%3E%3Crect width='1000' height='900' fill='%23272d28'/%3E%3Crect x='470' width='530' height='900' fill='%236b7766'/%3E%3Ccircle cx='730' cy='250' r='85' fill='%23e7bd76'/%3E%3Cpath fill='%23849675' d='M470 640l150-210 100 130 135-240 145 320z'/%3E%3C/svg%3E");background-size:cover;background-position:center}
    .hero-content{padding-block:60px 100px}
    .hero h1{font-size:46px}
    .section-head{align-items:flex-start;flex-direction:column}
    .section-head h2,.scene-copy h2,.evidence-copy h2{font-size:27px}
    section{padding:58px 0}
    .benefit-row{grid-template-columns:1fr}
    .benefit{padding:16px 0;border-right:0;border-bottom:1px solid var(--line)}
    .benefit:last-child{border-bottom:0}
    .scene-layout{grid-template-columns:1fr;gap:26px}
    .scene-art{min-height:300px}
    .feedback-grid{grid-template-columns:1fr;gap:25px}
    .quote{max-width:600px}
    .channel-strip{grid-template-columns:repeat(2,1fr)}
    .channel{padding:18px}
    .channel:first-child{padding-left:18px}
    .channel:nth-child(3){border-right:1px solid var(--line)}
    .channel:nth-child(2n){border-right:0}
    .channel:nth-child(n+3){border-top:1px solid var(--line)}
    .evidence-grid{grid-template-columns:1fr;gap:25px}
    .concerns{grid-template-columns:1fr;gap:8px}
    .footer-grid{grid-template-columns:repeat(2,1fr)}
    .footer-grid>div:first-child{grid-column:1/-1}
}
@media(max-width:520px){
    :root{--gutter:16px}
    body{font-size:15px}
    .brand{font-size:14px;gap:8px}
    .hero{min-height:600px}
    .hero-content{padding-top:53px}
    .hero h1{font-size:40px}
    .hero-lead{font-size:16px}
    .hero-copy{font-size:14px}
    .hero-actions{align-items:stretch;flex-direction:column;max-width:260px}
    .hero-actions .btn{width:100%}
    .hero-note{gap:13px;flex-wrap:wrap}
    .hero-note strong{font-size:18px}
    .hero-cue .container{font-size:11px}
    .film-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
    .poster-word{font-size:16px;left:10px;bottom:10px}
    .poster-tag{top:7px;left:7px}
    .film-meta h3{font-size:14px}
    .featured-grid{grid-template-columns:1fr 1fr;grid-template-rows:220px 160px 160px}
    .featured:nth-child(1){grid-row:span 2}
    .featured:nth-child(4){grid-column:1/-1}
    .featured-content{left:12px;right:12px}
    .featured-content h3{font-size:16px}
    .featured-content p{font-size:12px}
    .compare-grid{grid-template-columns:1fr}
    .rank-columns{grid-template-columns:1fr;gap:0}
    .rank-item{grid-template-columns:36px 1fr auto;gap:8px}
    .rank-no{font-size:21px}
    .rank-title{font-size:14px}
    .news-grid{grid-template-columns:1fr;gap:15px}
    .news-item{grid-template-columns:92px 1fr}
    .news-thumb{height:74px}
    .channel-strip{grid-template-columns:1fr}
    .channel,.channel:first-child{padding:16px 0;border-right:0;border-top:1px solid var(--line);min-height:0}
    .channel:first-child{border-top:0}
    .notice-content{align-items:flex-start;flex-direction:column;gap:12px}
    .footer-grid{gap:24px 18px}
    .footer-grid>div:first-child{grid-column:1/-1}
    .footer-bottom{flex-direction:column;gap:6px}
    .sticky-copy{display:none}
    .sticky-inner{justify-content:flex-end}
    .sticky-actions{width:100%}
    .sticky-actions .btn{flex:1}
    .close-cta{flex:0 0 40px}
}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
}