:root{color-scheme:dark;--bg:#0c0715;--surface:#161024;--raised:#241333;--text:#f8f5ff;--muted:#bfb6cd;--border:#523369;--accent:#13e2f3;--pink:#ff48d8;--shadow:0 6px 25px #0003;font-family:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif}
:root[data-theme=light]{color-scheme:light;--bg:#fff;--surface:#fff;--raised:#f6f0fa;--text:#20162c;--muted:#665c72;--border:#d8c5e3;--accent:#006f82;--pink:#b10083;--shadow:0 4px 18px #26113d10}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-bottom:100px}body{margin:0;background:var(--bg);color:var(--text);line-height:1.65}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button{color:inherit;background:var(--raised);border:1px solid var(--border);border-radius:10px;padding:8px 13px;min-height:44px}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}button:hover{border-color:var(--accent)}:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button[aria-pressed=true]{color:var(--pink)}[hidden]{display:none!important}.skip{position:absolute;left:12px;top:-100px;z-index:100;background:var(--surface);padding:12px}.skip:focus{top:12px}
.masthead{position:relative;background:#e00094;overflow:hidden;border-bottom:1px solid #ff63d9}.brand-wrap{position:relative;max-width:1080px;margin:auto;height:250px;display:flex;align-items:center}.brand{position:relative;z-index:1;width:64%;padding:0 8px 0 22px;text-align:center;color:white!important}.brand img{width:100%;height:auto;display:block;filter:drop-shadow(0 3px 10px #65005c44)}.brand p{font-size:18px;letter-spacing:.12em;margin:-5px 0 12px;font-weight:650;text-shadow:0 1px 5px #7d004e}.characters{position:absolute;width:48%;height:100%;right:-10px;object-fit:cover;object-position:center 38%;mask-image:linear-gradient(to right,transparent,#000 12%,#000 94%,transparent)}
.page-shell{max-width:1010px;margin:auto;padding:0 25px}.utility{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 0}.preview-label{color:var(--muted);font-size:12px}.theme-button{font-size:14px;white-space:nowrap;background:transparent;border-color:var(--border);min-height:38px;padding:4px 11px}.categories{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:23px}.category{display:flex;justify-content:center;align-items:center;text-align:center;min-height:58px;border:1px solid var(--border);border-radius:15px;background:var(--raised);font-size:19px;font-weight:700;box-shadow:inset 0 1px 0 #ffffff0a}.category[aria-current=page]{background:linear-gradient(110deg,#23f0ed,#0abbee);border-color:#93fcff;color:#002b37;box-shadow:0 0 17px #08deed44}.category:hover{border-color:var(--accent)}
.feature-card{position:relative;display:grid;grid-template-columns:1.05fr 1fr;overflow:hidden;border:1px solid #ae4ccf;border-radius:19px;min-height:285px;box-shadow:var(--shadow);background:#171025;color:#fff!important}.feature-copy{position:relative;z-index:1;padding:23px 25px;background:linear-gradient(90deg,#181024,#181024e6 75%,transparent);margin-right:-50px}.feature-copy h2{font-size:clamp(26px,4.8vw,46px);line-height:1.35;letter-spacing:.015em;max-width:8em;margin:13px 0 12px}.feature-copy p{max-width:26em;font-size:16px;color:#e0d8e8;margin:0 30px 12px 0}.tag{display:inline-block;font-size:13px;line-height:1.4;background:#cf009b;color:white;padding:4px 12px;border-radius:7px}.sample{font-size:12px;color:var(--muted)}.feature-copy .sample{color:#d5c5e3;margin-left:8px}.feature-picture{height:100%;width:100%;position:relative;overflow:hidden}.art{position:relative;overflow:hidden;display:block;background:#211134;aspect-ratio:2.26}.art img{position:absolute;max-width:none;height:auto;display:block;pointer-events:none}.feature-picture .art{position:absolute;inset:0;aspect-ratio:auto}.feature-picture .art img{height:100%;width:auto!important;top:0!important;left:0!important;object-fit:cover}.feature-picture .art{background-image:url('assets/editorial-reference.png');background-size:216% auto;background-position:69% 29.2%}.feature-picture .art img{display:none}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 15px;padding-top:18px;border-top:1px solid var(--border)}h1{font-size:27px;margin:0;line-height:1.5;padding-left:17px;position:relative}h1:before{content:'';position:absolute;width:6px;border-radius:5px;background:var(--accent);left:0;top:5px;bottom:5px;box-shadow:0 0 12px #13e2f333}#result-count{font-size:14px;color:var(--muted);white-space:nowrap}.article-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.card{min-width:0;border:1px solid var(--border);border-radius:17px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow);position:relative;display:flex;flex-direction:column}.card-link{display:block;flex:1}.card:hover{border-color:var(--pink)}.card-link:hover{color:var(--text)}.card-body{padding:13px 17px 4px}.card .category-label{display:inline-block;background:linear-gradient(100deg,#9f007d,#bf009c);border:1px solid #ee70d9;color:white;padding:0 10px;border-radius:12px;font-size:13px;margin-bottom:6px}.card:nth-child(even) .category-label{background:#006a87;border-color:#18d9ef}.card h2{font-size:24px;line-height:1.4;margin:0 0 6px}.card-summary{font-size:16px;line-height:1.6;margin:0;color:var(--muted)}.card-meta{padding:6px 12px 10px 17px;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}.save-button{margin-left:auto;border:0;background:transparent;padding:8px;display:flex;align-items:center;justify-content:center;min-width:44px;border-radius:8px}.icon{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.save-button[aria-pressed=true] .icon{fill:var(--pink);stroke:var(--pink)}.view-description{color:var(--muted);font-size:16px;margin:0 0 20px}.site-footer{text-align:center;padding:30px 0 130px;color:var(--muted);font-size:14px}.site-footer>p:first-child{color:var(--text);font-size:19px;font-weight:700;margin-bottom:2px}.small{font-size:12px;line-height:1.8}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,1010px);z-index:10;display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border:1px solid var(--border);border-bottom:0;border-radius:22px 22px 0 0;padding:10px 8px max(9px,env(safe-area-inset-bottom));box-shadow:0 -6px 24px #08031233}.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:57px;font-size:14px;position:relative;color:var(--muted)}.bottom-nav a[aria-current=page]{color:var(--pink)}.bottom-nav a[aria-current=page]:after{content:'';position:absolute;bottom:-5px;height:3px;width:48px;background:var(--pink);border-radius:5px}.bottom-nav .icon{height:29px;width:29px}
#search-panel{margin:6px 0 25px;padding:19px;background:var(--surface);border:1px solid var(--border);border-radius:16px}#search-panel label{display:block;font-weight:700;margin-bottom:9px}.search-row{display:flex;gap:9px}.search-row input{width:100%;min-width:0;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:9px;padding:10px 12px;font-size:16px}.search-row button{background:var(--accent);color:var(--bg);white-space:nowrap;font-weight:700}.empty{padding:35px 20px;text-align:center;background:var(--surface);border:1px dashed var(--border);border-radius:16px}.empty h2{font-size:21px}.empty p{color:var(--muted)}.empty a{color:var(--accent);text-decoration:underline}
dialog{padding:0;border:1px solid var(--border);border-radius:18px;color:var(--text);background:var(--surface);width:min(760px,calc(100% - 28px));max-height:90dvh;box-shadow:0 12px 80px #0008}dialog::backdrop{background:#070311cf;backdrop-filter:blur(6px)}.reader-tools{position:sticky;top:0;z-index:3;background:var(--surface);display:flex;justify-content:space-between;gap:12px;padding:10px 15px;border-bottom:1px solid var(--border)}.reader-tools button{font-size:14px}#reader-content{padding:22px 30px 35px}#reader-content .art{border-radius:12px;margin:20px 0}#reader-title{font-size:30px;line-height:1.5;margin:10px 0}#reader-content p{line-height:1.95;font-size:17px}#reader-content .reader-notice{font-size:14px;background:var(--raised);padding:10px 13px;border-left:3px solid var(--pink)}#reader-content .reader-meta{font-size:13px;color:var(--muted)}#reader-content a{color:var(--accent);text-decoration:underline}.toast{position:fixed;z-index:100;bottom:100px;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;padding:11px 20px;border:1px solid var(--accent);border-radius:12px;background:var(--surface);color:var(--text);box-shadow:var(--shadow);font-size:14px}
@media(max-width:600px){.brand-wrap{height:174px}.brand{width:66%;padding:0 0 0 8px}.brand p{font-size:12px;line-height:1.6;letter-spacing:0;margin:0 0 0 6px;max-width:19em}.characters{width:49%;right:-9px;object-position:center 35%}.page-shell{padding:0 13px}.utility{padding:10px 0}.preview-label{font-size:12px;max-width:51%}.theme-button{font-size:12px;min-height:36px}.categories{gap:7px;margin-bottom:16px}.category{font-size:14px;border-radius:10px;min-height:47px}.feature-card{min-height:215px;grid-template-columns:1.05fr 1fr;border-radius:14px}.feature-copy{padding:15px 13px;margin-right:-30px}.feature-copy h2{font-size:27px;margin:12px 0 8px}.feature-copy p{font-size:14px;line-height:1.65;margin:0 22px 5px 0}.feature-copy .sample{display:block;margin:3px 0 0;font-size:12px}.feature-picture .art{background-size:240% auto;background-position:66% 29.5%}.section-heading{margin:17px 0 12px;padding-top:14px}h1{font-size:22px;padding-left:13px}.article-grid{gap:11px}.card{border-radius:12px}.card-body{padding:10px 10px 0}.card h2{font-size:18px;line-height:1.5}.card-summary{font-size:14px;line-height:1.6}.card .category-label{font-size:12px;padding:0 8px}.card-meta{gap:4px;flex-wrap:wrap;padding:0 5px 5px 10px;font-size:12px}.card-meta time{display:none}.card .art{aspect-ratio:1.95}.card-meta .save-button{min-width:40px}.bottom-nav{border-radius:18px 18px 0 0}.bottom-nav a{font-size:13px}.site-footer{padding-bottom:112px}#reader-content{padding:17px 20px 28px}#reader-title{font-size:25px}#reader-content p{font-size:16px}.reader-tools{padding:8px}.reader-tools button{padding:8px;font-size:13px}}
@media(max-width:350px){.category{font-size:12px}.brand-wrap{height:156px}.card h2{font-size:16px}.feature-copy h2{font-size:24px}.feature-copy p{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* 元画像の挿絵領域だけを表示し、モックの見出しを混ぜない。 */
.feature-picture .art{aspect-ratio:auto!important;background-size:auto 514.46%;background-position:68% 29.32%;background-repeat:no-repeat}.brand img{mix-blend-mode:screen}
.brand{mix-blend-mode:screen}
:root[data-theme=light] .feature-card{background:var(--surface);color:var(--text)!important}
:root[data-theme=light] .feature-copy{background:linear-gradient(90deg,#fff,#fffffff0 75%,transparent)}
:root[data-theme=light] .feature-copy p,:root[data-theme=light] .feature-copy .sample{color:var(--muted)}
@media(max-width:600px){.category{font-size:13px}.brand p{font-size:12px}}
.characters{object-fit:contain}
.feature-picture .art-direct{background:none}
.feature-picture .art-direct img{display:block;position:static;width:100%!important;height:100%;object-fit:cover;object-position:32% center}