:root{--bg:#f4f1ea;--paper:#fffdfa;--ink:#17202b;--muted:#69737d;--line:#ddd8cf;--navy:#0d1422;--navy2:#172338;--accent:#ff6b4a;--cyan:#65d2d9;--gold:#f1c76a;--soft:#edf5f3;--warn:#fff2df;--max:1160px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;line-height:1.8;font-size:17px}
a{color:#17646b;text-decoration-thickness:1px;text-underline-offset:3px}a:hover{opacity:.82}.wrap{width:min(calc(100% - 36px),var(--max));margin:auto}
.site-header{border-bottom:1px solid rgba(255,255,255,.11);background:rgba(13,20,34,.96);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}.header-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font-weight:850;color:#fff;text-decoration:none;letter-spacing:.02em}.brand small{display:block;font-size:10px;color:#9aa8ba;font-weight:700;letter-spacing:.16em}.nav{display:flex;gap:20px;font-size:14px}.nav a{color:#dfe5ee;text-decoration:none}.nav a:hover{color:#fff;opacity:1}
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 82% 20%,rgba(101,210,217,.16),transparent 28%),radial-gradient(circle at 12% 86%,rgba(255,107,74,.14),transparent 30%),linear-gradient(135deg,var(--navy),#111c2d 58%,#0b1320);color:#fff;padding:86px 0 72px;border-bottom:1px solid #28344a}.hero:after{content:"";position:absolute;inset:auto -8% -120px 35%;height:280px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent);transform:rotate(-8deg);pointer-events:none}.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);gap:64px;align-items:center}.eyebrow{color:#318b8f;font-size:12px;font-weight:850;letter-spacing:.16em;text-transform:uppercase}.hero .eyebrow{color:var(--cyan)}.hero h1{font-size:clamp(42px,6.2vw,76px);line-height:1.08;margin:.2em 0 .25em;letter-spacing:-.045em;max-width:780px}.hero p{font-size:clamp(16px,1.9vw,20px);max-width:700px;color:#c8d1dd;margin:0}.hero p strong{color:#fff}.hero-sub{margin-top:18px!important;font-size:14px!important;color:#8f9caf!important}.hero-stage{position:relative;height:390px}.poster{position:absolute;width:min(72%,300px);aspect-ratio:3/4;border-radius:18px;padding:22px;border:1px solid rgba(255,255,255,.18);box-shadow:0 28px 80px rgba(0,0,0,.35);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}.poster:after,.card-visual:after,.article-keyart:after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.16),transparent 35%,rgba(0,0,0,.22));pointer-events:none}.poster:nth-child(1){right:3%;top:2%;transform:rotate(7deg);z-index:1}.poster:nth-child(2){right:19%;top:11%;transform:rotate(-4deg);z-index:2}.poster:nth-child(3){right:8%;top:24%;transform:rotate(2deg);z-index:3}.poster-year{font-size:56px;font-weight:900;line-height:1;color:rgba(255,255,255,.2);letter-spacing:-.06em}.poster-title{position:relative;z-index:1;font-weight:850;font-size:20px;line-height:1.25}.poster-title small{display:block;margin-top:7px;color:rgba(255,255,255,.68);font-size:11px;font-weight:650;letter-spacing:.08em}
.theme-0{background:linear-gradient(135deg,#293a68,#16223b 55%,#e36748)}.theme-1{background:linear-gradient(135deg,#5d2e46,#281d35 58%,#e5a45d)}.theme-2{background:linear-gradient(135deg,#154b52,#0d2631 55%,#61c8bb)}.theme-3{background:linear-gradient(135deg,#4a3d24,#1d2431 58%,#d9b45d)}.theme-4{background:linear-gradient(135deg,#3d315e,#171f33 55%,#9475d7)}.theme-5{background:linear-gradient(135deg,#6a302b,#242032 58%,#ef7557)}
.search-panel{margin-top:-28px;position:relative;z-index:5}.search-shell{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 18px 50px rgba(22,29,38,.1)}.search-main{display:flex;gap:10px;align-items:center}.search-icon{font-size:21px;color:#7b8793}.search-input{width:100%;border:0;outline:0;background:transparent;font:inherit;font-size:17px;padding:9px 3px;color:var(--ink)}.search-label{font-weight:800;font-size:13px;margin-bottom:6px}.quick-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.quick-chip{appearance:none;border:1px solid #d9d4ca;background:#f8f5ef;color:#42505c;border-radius:999px;padding:7px 11px;font:inherit;font-size:12px;cursor:pointer}.quick-chip:hover{background:#fff;border-color:#b9b2a6}
.section{padding:56px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:26px}.section h2,.page-title{font-size:clamp(30px,4vw,44px);line-height:1.25;margin:.1em 0;letter-spacing:-.025em}.section-note{color:var(--muted);font-size:14px;max-width:530px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.work-card{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:220px;background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--ink);transition:.2s transform,.2s box-shadow,.2s border-color}.work-card:hover{transform:translateY(-4px);border-color:#c6c0b6;box-shadow:0 16px 36px rgba(22,29,38,.09);opacity:1}.card-visual{position:relative;color:white;padding:18px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;min-height:220px}.visual-year{font-size:46px;font-weight:900;line-height:1;color:rgba(255,255,255,.23);letter-spacing:-.07em}.visual-original{position:relative;z-index:1;font-weight:800;font-size:16px;line-height:1.25;word-break:break-word}.visual-type{position:relative;z-index:1;font-size:10px;letter-spacing:.15em;color:rgba(255,255,255,.75);margin-top:8px}.card-body{padding:20px 20px 18px;display:flex;flex-direction:column}.work-name{font-size:20px;font-weight:850;line-height:1.35;margin-bottom:6px}.meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:11px;margin-bottom:11px}.meta span{display:inline-flex;align-items:center}.badge-new{background:#ffe9e2;color:#9b3f27;padding:2px 7px;border-radius:99px;font-weight:800}.work-card h3{font-size:14px;line-height:1.55;margin:0 0 10px;color:#44515d;font-weight:650}.work-card p{font-size:13px;color:#66717a;margin:auto 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-arrow{margin-top:12px;font-size:12px;font-weight:800;color:#17646b}
.method-box{background:linear-gradient(135deg,#111b2c,#16283a);color:#f9f8f3;border-radius:22px;padding:36px}.method-box h2{color:white}.method-box .section-note{color:#9eacbb}.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.method-grid strong{display:block;font-size:32px;margin-bottom:4px;color:var(--cyan)}.method-grid p{margin:0;color:#cbd5df;font-size:14px}
.page-hero{background:linear-gradient(135deg,var(--navy),#17243a);color:white;padding:44px 0 40px}.page-hero .eyebrow{color:var(--cyan)}.page-hero p{color:#aeb9c7;max-width:650px}.works-search{margin-top:24px;max-width:680px}
.breadcrumb{font-size:12px;color:var(--muted);padding:20px 0}.breadcrumb a{color:inherit}.breadcrumb.on-dark{padding:20px 0 14px;color:#9eaabc}.breadcrumb.on-dark a{color:#cbd5df}
.article-hero{color:#fff;position:relative;overflow:hidden;padding-bottom:54px}.article-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,12,20,.45),rgba(7,12,20,.05));pointer-events:none}.article-hero .wrap{position:relative;z-index:1}.article-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:54px;align-items:center}.article-hero h1{font-size:clamp(34px,5vw,56px);line-height:1.3;margin:.22em 0 .36em;letter-spacing:-.035em}.series-kicker{font-size:12px;font-weight:850;letter-spacing:.12em;color:var(--cyan)}.series-kicker span{color:#b8c2ce;margin-left:10px;font-weight:650}.article-dek{font-size:16px;color:#d4dbe4;max-width:760px;margin:0 0 22px}.hero-verdict{background:rgba(9,16,27,.54);border:1px solid rgba(255,255,255,.17);border-left:4px solid var(--cyan);padding:16px 18px;border-radius:10px;max-width:760px}.hero-verdict b{display:block;font-size:11px;letter-spacing:.1em;color:var(--cyan);margin-bottom:3px}.article-keyart{position:relative;aspect-ratio:3/4;border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:22px;overflow:hidden;box-shadow:0 22px 50px rgba(0,0,0,.25);display:flex;flex-direction:column;justify-content:space-between}.keyart-year{font-size:58px;font-weight:900;color:rgba(255,255,255,.24);line-height:1;letter-spacing:-.07em}.keyart-title{position:relative;z-index:1;font-size:19px;font-weight:850;line-height:1.25}.keyart-title small{display:block;margin-top:8px;font-size:11px;color:rgba(255,255,255,.72);letter-spacing:.08em}
.article{display:grid;grid-template-columns:minmax(0,760px) 270px;gap:48px;align-items:start;padding-top:42px}.article-main{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:clamp(24px,5vw,50px)}.article h2{font-size:27px;line-height:1.4;margin:2em 0 .6em;padding-top:.2em;letter-spacing:-.02em}.article h3{font-size:19px;margin:1.6em 0 .4em}.article p{margin:0 0 1.1em}.article ul{padding-left:1.3em}.article li{margin:.35em 0}.caution{background:var(--warn);border:1px solid #edd6ae;border-radius:10px;padding:16px 18px;font-size:14px}.comparison{width:100%;border-collapse:collapse;font-size:14px;margin:18px 0 28px}.comparison th,.comparison td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}.comparison th{background:#f1efe9;font-size:12px;color:#505a60}.comparison td:last-child{font-weight:750;color:#17646b}.sources{padding:0;list-style:none}.sources li{border-top:1px solid var(--line);padding:13px 0;font-size:14px}.sources li:last-child{border-bottom:1px solid var(--line)}
.side{position:sticky;top:92px;font-size:13px}.sidebox{border:1px solid var(--line);border-radius:12px;padding:18px;background:#fbfaf6;margin-bottom:14px}.sidebox h3{font-size:12px;margin:0 0 10px;color:var(--muted);text-transform:uppercase;letter-spacing:.09em}.sidebox dl{margin:0}.sidebox dt{color:var(--muted);margin-top:8px}.sidebox dd{margin:0}.toc a{display:block;margin:7px 0;color:#425359;text-decoration:none}.related-block{border-top:1px solid var(--line);margin-top:44px;padding-top:6px}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.related-card{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}.related-visual{height:88px;position:relative;padding:12px;color:white}.related-visual b{position:relative;z-index:1;font-size:22px;color:rgba(255,255,255,.35)}.related-body{padding:11px}.related-body strong{display:block;font-size:13px;line-height:1.35}.related-body span{font-size:10px;color:var(--muted)}
.footer{margin-top:68px;border-top:1px solid #242f40;background:#101827;padding:38px 0 48px;color:#8f9cac;font-size:13px}.footer-inner{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}.footer b{color:white}.footer a{color:#b8c2cf}.legal{max-width:820px;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:38px;margin:46px auto}.legal h1{font-size:40px;line-height:1.3}.legal h2{margin-top:2em}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-stage{height:300px;margin-top:-8px}.poster{width:220px}.poster:nth-child(1){right:2%}.poster:nth-child(2){right:calc(50% - 110px)}.poster:nth-child(3){right:auto;left:2%}.grid{grid-template-columns:1fr}.article-hero-grid{grid-template-columns:1fr 220px}.article{grid-template-columns:minmax(0,1fr) 240px;gap:24px}}
@media(max-width:720px){body{font-size:16px}.wrap{width:min(calc(100% - 28px),var(--max))}.nav{gap:11px;font-size:12px}.brand small{display:none}.hero{padding:52px 0 54px}.hero-grid{gap:28px}.hero-stage{height:220px}.poster{width:155px;border-radius:13px;padding:14px}.poster-year{font-size:38px}.poster-title{font-size:14px}.poster:nth-child(1){right:0}.poster:nth-child(2){right:calc(50% - 77px)}.poster:nth-child(3){left:0}.search-panel{margin-top:-20px}.search-shell{padding:14px}.section{padding:44px 0}.section-head{display:block}.section-note{margin-top:8px}.work-card{grid-template-columns:120px minmax(0,1fr);min-height:190px}.card-visual{min-height:190px;padding:14px}.visual-year{font-size:34px}.visual-original{font-size:13px}.card-body{padding:16px}.work-name{font-size:18px}.work-card h3{font-size:13px}.method-grid{grid-template-columns:1fr;gap:18px}.article-hero{padding-bottom:38px}.article-hero-grid{grid-template-columns:1fr}.article-keyart{display:none}.article{grid-template-columns:1fr;gap:20px;padding-top:28px}.article-main{padding:24px 20px}.side{position:static}.comparison{display:block;overflow-x:auto;white-space:normal}.comparison th,.comparison td{min-width:130px}.related-grid{grid-template-columns:1fr}.related-card{display:grid;grid-template-columns:105px 1fr}.related-visual{height:100%;min-height:76px}}
@media(max-width:420px){.nav a:nth-child(2){display:none}.work-card{grid-template-columns:105px minmax(0,1fr)}.visual-year{font-size:30px}.card-body{padding:14px}.work-name{font-size:17px}.work-card p{display:none}}