*{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}
:root{--bg:#fff6df;--ink:#2a2016;--card:#ffffff;--muted:#7a6a52;--bd:#2a2016;--yellow:#ffd23f;--orange:#ff7a3d;--blue:#38b6ff;--pink:#ff8fb1;--code:#fff1c7;--mark:#ffd23f}
@media (prefers-color-scheme:dark){:root{--bg:#1c1b30;--ink:#fff3d6;--card:#27264a;--muted:#b9b0c9;--bd:#0b0a1a;--code:#201f3d;--mark:rgba(255,210,63,.34)}}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.95 "Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic UI","Meiryo",system-ui,sans-serif;font-weight:500;
 background-image:radial-gradient(color-mix(in srgb,var(--ink) 9%,transparent) 1.6px,transparent 1.6px);background-size:26px 26px}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}

/* header */
header.top{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:1120px;margin:0 auto;padding:22px 22px 8px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo img{height:46px;width:auto}
.logo b{font-size:1.6rem;font-weight:900;letter-spacing:.04em}
.social{display:flex;gap:10px}
.social a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-weight:900;font-size:.86rem;padding:7px 15px;border:2.5px solid var(--bd);border-radius:99px;background:var(--card);box-shadow:3px 3px 0 var(--bd);transition:transform .12s,box-shadow .12s}
.social a:nth-child(2){background:var(--orange);color:#fff}
.social a:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--bd)}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:0;align-items:stretch;text-decoration:none;margin-top:22px;border:3px solid var(--bd);border-radius:26px;overflow:hidden;background:var(--yellow);color:#2a2016;box-shadow:9px 9px 0 var(--bd);transition:transform .15s,box-shadow .15s}
.hero:hover{transform:translate(-2px,-2px);box-shadow:12px 12px 0 var(--bd)}
.hero .tx{padding:38px 40px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.pill{display:inline-block;align-self:flex-start;font-size:.78rem;font-weight:900;letter-spacing:.08em;padding:3px 14px;border:2.5px solid var(--bd);border-radius:99px;background:#fff;color:#2a2016}
.pill.blue{background:var(--blue)}.pill.orange{background:var(--orange);color:#fff}.pill.pink{background:var(--pink)}
.hero h2{margin:0;font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.55;font-weight:900}
.hero p{margin:0;font-size:.95rem;line-height:1.8;opacity:.9}
.btn{align-self:flex-start;margin-top:6px;font-weight:900;padding:9px 22px;border:2.5px solid var(--bd);border-radius:99px;background:#2a2016;color:#fff;box-shadow:3px 3px 0 var(--bd)}
.hero .vis{position:relative;min-height:340px;border-left:3px solid var(--bd);background:var(--blue)}
.hero .vis img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .vis.mascot{background:linear-gradient(160deg,#ffe58a,#ffb347)}
.hero .vis.mascot img{position:absolute;right:8%;bottom:-4%;height:96%;width:auto}
@media(max-width:820px){.hero{grid-template-columns:1fr}.hero .vis{border-left:0;border-top:3px solid var(--bd);min-height:240px}.hero .tx{padding:28px 24px}}

/* grid */
.sec{display:flex;align-items:center;gap:12px;margin:56px 0 18px;font-size:1.3rem;font-weight:900}
.sec::after{content:"";flex:1;height:3px;background:var(--bd);border-radius:3px;opacity:.9}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin:0 0 80px}
@media(max-width:720px){.grid{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;text-decoration:none;border:3px solid var(--bd);border-radius:22px;overflow:hidden;background:var(--card);box-shadow:7px 7px 0 var(--bd);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 var(--bd)}
.card .im{position:relative;aspect-ratio:16/10;border-bottom:3px solid var(--bd);background:var(--blue);overflow:hidden}
.card .im img.ph{width:100%;height:100%;object-fit:cover}
.card .im.mascot{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#ffe58a,#ffb347)}
.card .im.mascot img{height:78%;width:auto}
.card .bd{padding:20px 24px 24px;display:flex;flex-direction:column;gap:8px}
.card h3{margin:0;font-size:1.15rem;line-height:1.6;font-weight:900}
.card p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.8}
.card .d{color:var(--muted);font-size:.8rem;font-weight:700}

/* post */
.postcover{position:relative;margin:22px 0 46px;border:3px solid var(--bd);border-radius:26px;overflow:hidden;box-shadow:9px 9px 0 var(--bd);min-height:340px;display:flex;align-items:flex-end}
.postcover.photo{color:#fff;background:#222}
.postcover.photo img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.postcover.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.62) 38%,rgba(0,0,0,.08) 78%)}
.postcover.plain{background:linear-gradient(160deg,#ffe58a,#ffb347);color:#2a2016}
.postcover .in{position:relative;z-index:1;padding:36px 40px;max-width:78%}
.postcover.plain .mas{position:absolute;right:3%;bottom:-3%;height:88%;width:auto}
.postcover h1{margin:.5em 0 .35em;font-size:clamp(1.35rem,3vw,2.15rem);line-height:1.55;font-weight:900}
.postcover.photo h1{text-shadow:0 2px 12px rgba(0,0,0,.65)}
.postcover .d{font-size:.85rem;font-weight:700;opacity:.9}
@media(max-width:820px){.postcover{min-height:300px}.postcover .in{max-width:100%;padding:26px 22px}.postcover.plain .mas{opacity:.18;right:-6%}}
.postwrap{padding:0 22px 70px}
.article{max-width:720px;margin:0 auto}
.article h2{margin:2.6em 0 .7em;font-size:1.45rem;font-weight:900;display:inline-block;padding:0 .25em;color:var(--ink);background:linear-gradient(transparent 58%,var(--mark) 58%)}
.article h2+*{margin-top:0}
.article h3{margin:2em 0 .5em;font-size:1.15rem;font-weight:900;border-left:6px solid var(--orange);padding-left:.6em}
.article a{color:var(--orange);font-weight:700}
.article img{border:3px solid var(--bd);border-radius:14px;margin:1.4em auto;box-shadow:5px 5px 0 var(--bd)}
.article figure{margin:1.8em 0}
.article figcaption{text-align:center;color:var(--muted);font-size:.85rem;margin-top:.6em;font-weight:700}
.article figure.logo{margin:1.2em 0 .8em}
.article figure.logo img{height:130px;width:auto;max-width:100%;margin:0;background:#fdfde0}
.article figure.logo figcaption{display:none}
.article figure.video{margin:1.8em 0}
.article figure.video video{display:block;width:100%;height:auto;background:#000;border:3px solid var(--bd);border-radius:14px;box-shadow:5px 5px 0 var(--bd)}
.article iframe{width:100%;aspect-ratio:16/9;height:auto;border:3px solid var(--bd);border-radius:14px;margin:1.2em 0;display:block;box-shadow:5px 5px 0 var(--bd)}
.article .tbl{margin:1.6em 0;overflow-x:auto}
.article table{width:100%;border-collapse:collapse;font-size:.95rem}
.article th,.article td{border:2.5px solid var(--bd);padding:.55em .9em;text-align:left;vertical-align:top;background:var(--card)}
.article th{background:var(--yellow);color:#2a2016;font-weight:900}
@media(max-width:640px){
 .article .tbl{overflow:visible}
 .article table,.article thead,.article tbody,.article tr,.article th,.article td{display:block;width:auto}
 .article thead{position:absolute;left:-9999px;top:auto}
 .article tr{border:3px solid var(--bd);border-radius:16px;margin:0 0 18px;overflow:hidden;background:var(--card);box-shadow:5px 5px 0 var(--bd)}
 .article td{border:0;border-top:2px dashed rgba(127,127,127,.45);padding:.7em 1em}
 .article td:first-child{background:var(--yellow);color:#2a2016;font-weight:900;border-top:0}
 .article td:not(:first-child):not([data-label=""])::before{content:attr(data-label);display:block;font-size:.74rem;font-weight:900;color:var(--muted);letter-spacing:.04em;margin-bottom:.1em}
 .article pre{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all}
 .article :not(pre)>code{overflow-wrap:anywhere;word-break:break-all}
}
.article pre{background:var(--code);border:3px solid var(--bd);border-radius:14px;padding:14px 18px;overflow-x:auto;font-size:.86rem;line-height:1.65;box-shadow:5px 5px 0 var(--bd)}
.article code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.9em}
.article :not(pre)>code{background:var(--code);border:2px solid var(--bd);border-radius:6px;padding:.05em .4em}
.article ul{padding-left:1.3em}
.back{max-width:720px;margin:50px auto 0}
.back a{display:inline-block;text-decoration:none;font-weight:900;padding:9px 22px;border:2.5px solid var(--bd);border-radius:99px;background:var(--card);box-shadow:3px 3px 0 var(--bd)}


/* lightbox */
.article a.zl{display:block;text-decoration:none;border:0;background:none;-webkit-tap-highlight-color:transparent}
.article a.zl img{cursor:zoom-in}
.article figure:not(.logo) figcaption::after{content:" ・タップで拡大";opacity:.7}
.lb{position:fixed;inset:0;z-index:999;background:rgba(12,10,26,.93);display:none;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom}
.lb.on{display:flex}
.lb img{margin:auto;max-width:100vw;max-height:100vh;width:auto;height:auto;object-fit:contain;cursor:zoom-in;border:0;border-radius:0;box-shadow:none;background:transparent}
.lb img.full{max-width:none;max-height:none;cursor:zoom-out}
.lb-x{position:fixed;top:14px;right:14px;z-index:1000;width:46px;height:46px;border-radius:50%;border:2.5px solid #2a2016;background:#ffd23f;color:#2a2016;font:900 1.7rem/1 system-ui,sans-serif;cursor:pointer;box-shadow:3px 3px 0 #2a2016;padding:0}
.lb-hint{position:fixed;left:0;right:0;bottom:14px;text-align:center;color:#fff3d6;font-size:.8rem;opacity:.8;pointer-events:none;z-index:1000}
body.lb-open{overflow:hidden}
/* footer */
footer.bot{display:flex;align-items:flex-end;justify-content:center;gap:22px;max-width:1120px;margin:30px auto 0;padding:30px 22px 44px;border-top:3px solid var(--bd)}
footer.bot img{height:120px;width:auto;margin-bottom:-4px}
footer.bot b{font-size:1.2rem;font-weight:900}
footer.bot p{margin:.2em 0 .8em;color:var(--muted);font-size:.85rem}
.plink{display:inline-block;margin-top:.9em;font-size:.82rem;color:var(--muted)}

/* ---- 目次 / タグ / 前後の記事 / フッターのリンク / 404 ---- */
html{scroll-behavior:smooth}
.article h2,.article h3{scroll-margin-top:24px}
.toc{max-width:720px;margin:0 auto 2.4em}
.toc details{border:3px solid var(--bd);border-radius:18px;background:var(--card);box-shadow:5px 5px 0 var(--bd);padding:.1em 1.3em}
.toc summary{cursor:pointer;font-weight:900;padding:.7em 0;font-size:1.05rem}
.toc ol{margin:.1em 0 1em;padding-left:1.4em}
.toc li{margin:.3em 0;line-height:1.7}
.toc ol ol{margin:.2em 0;list-style:circle}
.toc a{color:var(--ink);text-decoration:none;font-weight:700;border-bottom:2px solid var(--yellow)}
.toc a:hover{background:var(--yellow);color:#2a2016}
.tags{max-width:720px;margin:2.6em auto 0;display:flex;flex-wrap:wrap;gap:9px}
.chip{display:inline-block;text-decoration:none;font-size:.82rem;font-weight:900;padding:3px 13px;border:2.5px solid var(--bd);border-radius:99px;background:var(--card);box-shadow:2px 2px 0 var(--bd);transition:transform .12s}
.chip:hover{background:var(--yellow);color:#2a2016;transform:translate(-1px,-1px)}
.chip b{opacity:.6;margin-left:.35em;font-weight:700}
.tagcloud{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 70px}
.tagcloud .chip{font-size:.95rem;padding:6px 16px}
.postnav{max-width:720px;margin:2.8em auto 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.postnav a{display:block;text-decoration:none;border:3px solid var(--bd);border-radius:18px;background:var(--card);box-shadow:5px 5px 0 var(--bd);padding:14px 18px;line-height:1.6;font-weight:900;transition:transform .12s,box-shadow .12s}
.postnav a:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--bd)}
.postnav a.next{text-align:right;grid-column:2}
.postnav a.prev{grid-column:1}
.postnav small{display:block;color:var(--muted);font-size:.74rem;letter-spacing:.08em;margin-bottom:.2em}
@media(max-width:640px){.postnav{grid-template-columns:1fr}.postnav a.next,.postnav a.prev{grid-column:1}.postnav a.next{text-align:left}}
.flinks{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:.9em}
.flinks a{font-size:.82rem;color:var(--muted)}
.lead{max-width:720px;margin:0 auto 2em;color:var(--muted);font-weight:700}
.nf{max-width:720px;margin:0 auto;text-align:center;padding:30px 0 20px}
.nf img{height:260px;width:auto;margin:0 auto 10px}
.nf h1{font-size:1.7rem;margin:.3em 0}
.nf p{margin:.4em 0 1.4em;color:var(--muted);font-weight:700}
.nf .btn{display:inline-block;text-decoration:none;align-self:auto;margin:6px 6px}

/* ---- コメント ---- */
.comments{max-width:760px;margin:40px auto 0;padding:0 4px}
.comments h2{font-size:1.25rem;margin:0 0 14px}
.c-item{background:#fff;border:3px solid #2a2016;border-radius:16px;padding:12px 16px;margin:0 0 12px}
.c-head{display:flex;gap:10px;align-items:baseline;font-size:.85rem;margin-bottom:4px}
.c-head span{color:#7a6a58}
.c-item p{margin:0;white-space:pre-wrap;word-break:break-word;line-height:1.7}
.c-empty{color:#7a6a58;margin:0 0 12px}
.c-form{background:#fff8dc;border:3px solid #2a2016;border-radius:18px;padding:16px;margin-top:18px}
.c-form label{display:block;font-weight:700;font-size:.9rem;margin:10px 0 4px}
.c-form input[type=text],.c-form textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:10px 12px;border:2px solid #2a2016;border-radius:12px;background:#fff}
.c-form textarea{min-height:110px;resize:vertical}
.c-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.c-count{font-size:.8rem;color:#7a6a58;text-align:right}
.c-note{font-size:.8rem;line-height:1.6;color:#5a4a38;margin:10px 0}
.c-form button{font:inherit;font-weight:700;background:#38b6ff;color:#2a2016;border:3px solid #2a2016;border-radius:999px;padding:10px 26px;cursor:pointer}
.c-form button:disabled{opacity:.5;cursor:default}
.c-msg{margin-top:10px;font-weight:700;font-size:.9rem}
.c-msg.ok{color:#1b7a3a}.c-msg.ng{color:#c0392b}
#c-ts{margin:12px 0}
.c-item,.c-form{color:#2a2016}
.c-item .c-head span,.c-count{color:#6b5a48}
.c-form input[type=text],.c-form textarea{color:#2a2016}
.c-form input::placeholder{color:#8a7a68}
.c-note a{color:#0a63a8}

/* ---- 返信(ツリー) ---- */
.c-thread{margin:0 0 14px}
.c-thread .c-item{margin-bottom:8px}
.c-reply{margin-left:22px;border-left-width:6px;background:#fff8dc}
.c-owner{background:#e6f6ff}
.c-head em{font-style:normal;font-size:.7rem;font-weight:700;background:#38b6ff;color:#2a2016;border:2px solid #2a2016;border-radius:999px;padding:0 8px}
@media (max-width:480px){.c-reply{margin-left:12px}}