:root { --ink:#333; --muted:#767676; --aqua:#bdecef; --grid:#e7e7df; --paper:#fff; --soft:#f7f7f2; --line:#e5e5df; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background-color:var(--soft); background-image:linear-gradient(var(--grid) 1px, transparent 1px),linear-gradient(90deg,var(--grid) 1px, transparent 1px); background-size:18px 18px; font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif; line-height:1.75; }
a { color:inherit; }
.site-header { background:var(--aqua); text-align:center; }
.wrap { width:min(940px,calc(100% - 28px)); margin:0 auto; }
.site-header .wrap { padding:24px 0 32px; }
.eyebrow { display:inline-block; margin:0; padding:2px 10px; background:#fff; color:#333; font-size:.78rem; letter-spacing:.03em; line-height:1.5; }
.site-title { margin:18px 0 0; font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif; font-size:clamp(2rem,5vw,3rem); font-weight:500; letter-spacing:.14em; line-height:1.3; }
.site-title a { text-decoration:none; }
.site-title::after { display:block; margin-top:2px; color:#333; content:"・ ・ ・"; font-size:.7rem; letter-spacing:.55em; }
.site-subtitle { display:none; }
main.wrap { display:block; margin-top:34px; padding:30px 34px 48px; background:rgba(255,255,255,.96); border:1px solid #e1e1da; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.section-title { margin:0 0 24px; font-size:1.35rem; font-weight:600; }
.post-card { display:grid; grid-template-columns:155px minmax(0,1fr); gap:18px; min-height:132px; margin:0 0 22px; padding:18px; color:var(--ink); background:#fff; border:1px solid #e6e6e0; border-radius:0 0 10px 0; box-shadow:0 2px 4px rgba(0,0,0,.05); text-decoration:none; transition:box-shadow .15s ease,transform .15s ease; }
.post-card:hover { color:var(--ink); box-shadow:0 5px 12px rgba(0,0,0,.11); transform:translateY(-1px); text-decoration:none; }
.post-card:focus-visible { outline:3px solid #58aeb6; outline-offset:3px; }
.post-card-thumb { width:155px; height:88px; margin:auto 0; overflow:hidden; background:#edf0ec; }
.post-card-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.post-card-copy { min-width:0; }
.post-card h2 { margin:0 0 7px; font-size:1.08rem; line-height:1.45; }
.post-card h2, .post-card .post-excerpt { text-decoration:none; }
.post-excerpt { display:-webkit-box; margin:0; overflow:hidden; color:#555; font-size:.9rem; line-height:1.55; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.article-header { margin-bottom:28px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.article-title { margin:8px 0 0; font-size:clamp(1.65rem,4vw,2.35rem); font-weight:600; line-height:1.45; }
.article-nav { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px; padding-top:20px; border-top:1px solid var(--line); }
.article-nav-link { display:flex; min-height:74px; flex-direction:column; justify-content:center; padding:12px 14px; color:var(--ink); background:#f8fbfb; border:1px solid #dcebea; text-decoration:none; }
.article-nav-link:hover { background:#eef8f8; border-color:#9eced0; }
.article-nav-link:focus-visible { outline:3px solid #58aeb6; outline-offset:2px; }
.article-nav-link.next { text-align:right; }
.article-nav-label { color:var(--muted); font-size:.78rem; }
.article-nav-title { margin-top:3px; font-size:.92rem; line-height:1.45; }
.article-nav-empty { visibility:hidden; }
.entry-content { font-size:1rem; }
.entry-content p { margin:0 0 1.1em; }
.entry-content img { max-width:100%; height:auto; border-radius:2px; }
.entry-content figure { margin:1.5rem 0; }
.entry-content blockquote { margin:1.5rem 0; padding:1rem 1.25rem; border-left:4px solid var(--aqua); background:#f3fbfb; }
.sidebar { margin-top:42px; padding-top:24px; border-top:1px solid var(--line); color:#666; font-size:.88rem; }
.sidebar h2 { margin:0 0 .5rem; color:#333; font-size:1rem; }
.sidebar p { margin-top:0; }
.sidebar ul { padding-left:1.2rem; margin-top:.4rem; }
.sidebar li { margin:.3rem 0; }
.pagination { display:flex; flex-wrap:wrap; gap:6px; margin-top:28px; }
.pagination a,.pagination span { min-width:30px; padding:3px 8px; border:1px solid #dcdcd4; border-radius:2px; text-align:center; text-decoration:none; }
.pagination .current { background:#333; color:#fff; border-color:#333; }
footer { margin-top:28px; padding:24px 0 38px; color:#777; font-size:.78rem; text-align:center; }
.site-mobile-nav { display:none; }
@media (max-width:760px) {
  .site-header .wrap { padding:22px 0 28px; }
  .site-title { font-size:2rem; letter-spacing:.1em; }
  main.wrap { display:block; width:calc(100% - 20px); margin-top:28px; padding:22px 14px 62px; }
  .sidebar { margin-top:34px; padding-top:22px; border-top:1px solid var(--line); }
  .post-card { grid-template-columns:145px minmax(0,1fr); gap:14px; min-height:118px; margin-bottom:18px; padding:14px; }
  .post-card-thumb { width:145px; height:82px; }
  .post-card h2 { font-size:1rem; }
  .post-excerpt { font-size:.84rem; -webkit-line-clamp:3; }
  .article-nav { gap:8px; }
  .article-nav-link { min-height:68px; padding:10px; }
  .article-nav-title { font-size:.82rem; }
  .site-mobile-nav { position:fixed; right:0; bottom:0; left:0; z-index:10; display:grid; grid-template-columns:repeat(4,1fr); padding:6px 4px 5px; background:rgba(255,255,255,.94); border-top:1px solid #ddd; box-shadow:0 -2px 8px rgba(0,0,0,.08); text-align:center; }
  .site-mobile-nav a { color:#555; font-size:.65rem; line-height:1.2; text-decoration:none; }
  .site-mobile-nav strong { display:block; font-size:1.25rem; font-weight:400; line-height:1.1; }
}