/* Web版「レポートサイト」用CSS ／ 2000年代のオカルト板・個人サイト風
   yayumeme.com/cases/happykeeping-report.html が読む（build.cjs が assets/css/happykeeping-report.css へ複製）
   印刷版は report.css。HTMLは共通。 */
*{box-sizing:border-box}
html{background:#000}
body{margin:0;color:#cfcfcf;background:#000 repeating-linear-gradient(0deg,#000 0,#000 3px,#0a0a12 3px,#0a0a12 4px);font:13px/1.75 "MS PGothic","ＭＳ Ｐゴシック","MS UI Gothic","Osaka","Hiragino Kaku Gothic ProN",sans-serif}
a{color:#66ccff}a:visited{color:#cc99ff}
b{font-weight:700}
.mono{font-family:"MS Gothic","ＭＳ ゴシック","Osaka-Mono",Consolas,"Courier New",monospace}
.sm{font-size:11px}
.grey9{color:#888}
.webonly{display:block}
.hd,.ft{display:none}
.red{background:#000;color:#000;padding:0 .6em}

/* ---- ヘッダー（Y2K） ---- */
.y2k-head{width:780px;max-width:100%;margin:0 auto;padding:6px 0 0}
.y2k-marq{overflow:hidden;white-space:nowrap;background:#000;color:#00ff33;border:1px solid #00aa22;font-family:"MS Gothic","ＭＳ ゴシック",monospace;font-size:12px;padding:2px 0}
.y2k-marq span{display:inline-block;padding-left:100%;animation:marq 32s linear infinite}
@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
.y2k-top{width:100%;border-collapse:collapse;margin:8px 0 4px;background:#101018;border:2px outset #666}
.y2k-top td{padding:8px 12px;vertical-align:middle}
.y2k-logo{width:92px;text-align:center;font:900 30px/1 "Times New Roman","Georgia",serif;letter-spacing:.06em;border-right:1px solid #444}
.y2k-logo a{color:#ffff66;text-decoration:none;text-shadow:2px 2px 0 #663300}
.y2k-logo small{font:10px/1.2 "Times New Roman",serif;letter-spacing:.2em;color:#aaa}
.y2k-title b{font-size:19px;color:#ffff66;letter-spacing:.08em;text-shadow:1px 1px 0 #663300}
.y2k-sub{font-size:14px;color:#fff}
.y2k-upd{font-size:11px;color:#aaa}
.blink{color:#ff3333;font-weight:700;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.cnt{display:inline-block;background:#000;color:#33ff66;border:1px inset #444;font-family:"MS Gothic",monospace;letter-spacing:.2em;padding:0 4px}
.y2k-nav{text-align:center;font-size:12px;color:#888;background:#101018;border:1px solid #333;padding:4px}
.y2k-nav a{color:#66ccff}
.y2k-warn{font-size:11px;color:#999;text-align:center;margin:6px 0 10px;line-height:1.6}

/* ---- ページ→パネル ---- */
.page{width:780px;max-width:100%;margin:0 auto 14px;background:#f2f2f2;color:#111;border:2px outset #bbb;padding:14px 18px 16px;position:relative}
.page h1{font:700 26px/1.4 "MS PGothic","ＭＳ Ｐゴシック",sans-serif;margin:0 0 6px}
h2{font:700 16px/1.5 "MS PGothic","ＭＳ Ｐゴシック",sans-serif;color:#cc0000;margin:22px 0 8px;padding:3px 6px;background:#e4e4f0;border-left:6px solid #cc0000;border-bottom:1px solid #999;display:flex;gap:8px;align-items:baseline}
h2:first-of-type{margin-top:0}
h2 .n{font:700 12px/1 "MS Gothic",monospace;color:#fff;background:#cc0000;padding:2px 5px}
h3{font-size:14px;margin:14px 0 4px;color:#003399;border-bottom:1px dotted #003399}
p{margin:0 0 8px}
ul,ol{margin:0 0 8px;padding-left:22px}
li{margin-bottom:3px}
table{border-collapse:collapse;width:100%;font-size:12px;line-height:1.6;background:#fff}
th,td{border:1px solid #999;padding:3px 6px;text-align:left;vertical-align:top}
th{background:#ccccee;font-weight:700}
td.c{text-align:center}
td.k{width:24%;color:#555;background:#f7f7f7}
.w15{width:12%}.w16{width:12%}.w20{width:14%}.w22{width:14%}.w24{width:16%}.w28{width:20%}.w34{width:22%}.w36{width:24%}.w50{width:30%}.w88{width:60%}
.box{margin:10px 0;padding:8px 12px;border:2px solid #cc0000;background:#fff5f5}
.box.dbl{outline:1px solid #cc0000;outline-offset:2px}
.note{background:#ffffcc;border:1px dashed #cc9900;padding:6px 8px;margin:10px 0;font-size:12px}
.note .who{display:inline-block;background:#cc9900;color:#fff;padding:0 5px;margin-right:6px;font-size:11px}
.quote{margin:8px 0 10px 8px;padding-left:10px;border-left:3px solid #008000;color:#008000;font-size:13px}
.quote .src{display:block;font-size:11px;color:#666;margin-top:2px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
figure{margin:8px 0 10px}
figure img{width:100%;display:block;border:3px ridge #999;filter:grayscale(1)}
figure svg{width:100%;height:auto;display:block}
figcaption{font-size:11px;color:#444;margin-top:4px;line-height:1.5}
.photo{position:relative}
.photo .tag{position:absolute;top:6px;left:6px;background:#ffff66;color:#000;font:11px/1.4 "MS Gothic",monospace;padding:0 5px;border:1px solid #666}
.h44,.h58,.h60{object-fit:cover}
.h44{max-height:220px}.h58{max-height:300px}.h60{max-height:300px}
.case{border:1px solid #999;background:#fff;margin:0 0 10px}
.case .t{display:flex;justify-content:space-between;align-items:baseline;background:#ddeeff;border-bottom:1px solid #999;padding:3px 8px;font-size:13px}
.case .t b{font-size:14px;color:#003399}
.case .t .st{font-size:11px;border:1px solid #333;padding:0 5px;background:#fff}
.case .b{padding:6px 10px 4px;overflow:hidden}
.case .b p{margin-bottom:5px;font-size:13px}
.case .b .k{font-size:11px;color:#666;margin-right:4px;background:#eee;padding:0 3px}
.case .b .rem{border-top:1px dotted #999;margin-top:4px;padding-top:4px;font-size:12px;color:#333}
.case figure.fr{float:right;width:240px;margin:0 0 4px 12px}
.case figure.fr figcaption{font-size:10.5px}
.stamp{position:absolute;right:20px;top:14px;display:inline-block;padding:2px 10px;border:3px double #cc0000;color:#cc0000;font:700 15px/1.3 "MS PGothic",sans-serif;letter-spacing:.3em;transform:rotate(-8deg);opacity:.85}
.meme{background:#ffe6f2;border:1px dotted #cc3399;padding:8px 12px;font-size:13px;line-height:1.9}
.meme p{margin-bottom:4px}
.log{font-family:"MS Gothic","ＭＳ ゴシック",Consolas,monospace;font-size:12px;line-height:1.6;background:#000;color:#33ff66;border:2px inset #666;padding:8px 10px;white-space:pre-wrap}
.dl dt{font-weight:700;margin-top:6px;color:#003399}
.dl dd{margin:0 0 0 14px;font-size:12.5px}
a.url{display:block;font-family:"MS Gothic",monospace;font-size:11px;color:#0000ee;word-break:break-all;margin-top:1px}
a.url:visited{color:#551a8b}
a.url.inl{display:inline}
.src-list td{padding-top:4px;padding-bottom:4px}
.fiction{font-size:11px;color:#333;border:1px solid #999;padding:3px 8px;display:inline-block;background:#fff}
.ml4{margin-left:10px}.mt0{margin-top:0}.mt2{margin-top:6px}.mt25{margin-top:8px}.mt3{margin-top:10px}.mt5{margin-top:14px}.mt6{margin-top:16px}
.mb15{margin:0 0 4px}.m0{margin:0}.m100{margin:4px 0 0}.m200{margin:6px 0 0}.figa,.figb,.figc{margin:4px 0 8px}
.qrnote{margin-top:3px;font-size:11px;color:#444}

/* ---- 表紙パネル ---- */
.cover{background:#000;color:#fff;border:2px outset #555;padding:16px 18px 18px}
.cover .brand{display:flex;align-items:center;gap:14px;border-bottom:1px solid #666;padding-bottom:10px}
.cover .brand svg{width:96px;height:96px;flex:none}
.cover .brand .wm b{display:block;font:700 18px/1.3 "MS PGothic",sans-serif;letter-spacing:.14em;color:#ffff66}
.cover .brand .wm span{display:block;font:11px/1.4 "Times New Roman",serif;letter-spacing:.4em;color:#aaa}
.cover .brand .wm i{display:block;font-style:normal;font-size:11px;letter-spacing:.14em;color:#aaa;margin-top:4px}
.cover .kind{font:11px/1.5 "Times New Roman",serif;letter-spacing:.24em;color:#aaa;margin:14px 0 4px}
.cover h1{font:900 38px/1.25 "MS PGothic","ＭＳ Ｐゴシック",sans-serif;color:#ffff66;text-shadow:2px 2px 0 #663300;margin:0 0 8px}
.cover .sub{font-size:14px;color:#ddd;margin:0 0 12px}
.cover .art{position:relative;height:280px;overflow:hidden;border:3px ridge #666}
.cover .art img{width:100%;height:100%;object-fit:cover;object-position:left center;display:block;filter:grayscale(1) contrast(1.05);border:0}
.cover .art .cap{position:absolute;right:0;bottom:0;background:#000;color:#aaa;font-size:11px;padding:2px 8px}
.cover .stamp{border-color:#ff3333;color:#ff3333;right:24px;top:150px}
.cover .label{border:1px solid #fff;padding:8px 12px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px 12px;margin:12px 0 0;background:#111}
.cover .label span{display:block;font-size:10px;letter-spacing:.14em;color:#aaa}
.cover .label b{font:15px/1.4 "MS Gothic",monospace;font-weight:400;color:#33ff66}
.cover .meta2{font-size:12px;color:#ddd;margin:10px 0 0;line-height:1.9}
.cover .meta2 span{color:#999;letter-spacing:.12em;font-size:10px;margin-right:4px;background:#222;padding:0 4px}
.qrbox{position:static;width:230px;border:2px solid #fff;padding:8px;text-align:center;font-size:11px;line-height:1.5;background:#fff;color:#111;margin:12px 0 0}
.qrbox svg{width:130px;height:130px;display:block;margin:0 auto 4px}
.qrbox .u{font-family:"MS Gothic",monospace;font-size:10px;word-break:break-all}
.qrbox .w{font-weight:700;letter-spacing:.1em;margin-top:2px}
.cover-foot{position:static;margin-top:12px;width:auto}
.cover .fiction{border-color:#777;color:#bbb;background:#000}

/* ---- 掲示板（Web専用） ---- */
.y2k-bbs{width:780px;max-width:100%;margin:0 auto 14px;background:#efefef;color:#111;border:2px outset #bbb;padding:12px 18px 16px}
.bbs-t{font:700 17px/1.4 "MS PGothic",sans-serif;color:#cc0000;margin:0 0 6px;background:none;border:0;padding:0;display:block}
.bbs-note{font-size:12px;color:#555;margin:0 0 10px}
.res{border-top:1px solid #ccc;padding:6px 0}
.res-h{font-size:12px;color:#444;display:flex;gap:10px;flex-wrap:wrap}
.res-n{font-weight:700;color:#111}.res-name{color:#008000;font-weight:700}.res-id{font-family:"MS Gothic",monospace}
.res-b{font-size:13.5px;line-height:1.8;padding:2px 0 0 18px}
.res.admin .res-name{color:#cc0000}
.res.real .res-b{background:#fff4cf;padding:6px 10px;margin-left:18px;border-left:3px solid #c9912b}
.res.empty .res-b{height:24px}
.bbs-form{margin-top:14px;border-top:2px solid #999;padding-top:10px}
.bbs-form table{width:auto;background:none}
.bbs-form td{border:0;padding:3px 6px;font-size:12px;vertical-align:top}
.fake-input{display:inline-block;min-width:360px;background:#fff;border:2px inset #999;padding:2px 6px;color:#888;font-size:12px}
.fake-input.tall{min-height:64px;vertical-align:top}
.bbs-btn{margin:6px 0 0;font-size:11px;color:#666}
.fake-btn{display:inline-block;background:#ddd;border:2px outset #999;padding:1px 12px;color:#111;font-size:12px;margin-right:6px}
.y2k-foot{text-align:center;font-size:11px;color:#666;border-top:1px dotted #999;margin-top:16px;padding-top:10px}
.y2k-foot p{margin:0 0 3px}
.y2k-foot a{color:#0000ee}

@media (max-width:820px){
 body{font-size:13px}
 .y2k-head,.page,.y2k-bbs{width:auto;margin-left:0;margin-right:0;border-left:0;border-right:0}
 .page{padding:12px 10px 14px}
 .two{grid-template-columns:1fr}
 .case figure.fr{float:none;width:100%;margin:0 0 6px}
 .cover h1{font-size:28px}
 .cover .art{height:180px}
 .cover .label{grid-template-columns:1fr 1fr}
 .cover .stamp{top:110px;right:10px}
 .fake-input{min-width:0;width:100%}
 .y2k-logo{width:70px;font-size:22px}
 .y2k-title b{font-size:15px}
 table{font-size:11px}
}

.h40{max-height:200px;object-fit:cover}.h50{max-height:260px;object-fit:cover}

.h36{max-height:190px;object-fit:cover}.h52{max-height:270px;object-fit:cover}
.h33{max-height:180px;object-fit:cover}.h48{max-height:250px;object-fit:cover}

.h38{max-height:200px;object-fit:cover}.h46{max-height:240px;object-fit:cover}.h62{max-height:320px;object-fit:cover}
.strip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:8px 0}
.rev{line-height:1.7}
figure.fr2{float:right;width:260px;margin:0 0 6px 12px}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gal img{height:220px;object-fit:cover}
@media (max-width:820px){.strip,.gal{grid-template-columns:1fr}figure.fr2{float:none;width:100%}}

.otop{object-position:top}

.h84{max-height:420px;object-fit:cover;object-position:top}