/* 2000年代ブログ × スマホネイティブ。すべて .blog スコープ（drone/Tailwindと非干渉） */
.blog{
  --navy:#2b3d4f; --orange:#cc5533; --link:#2255aa; --line:#d3dae1;
  background:#e7ebf0; color:#333;
  font-family:"Hiragino Kaku Gothic ProN","MS PGothic","Osaka",sans-serif;
  font-size:14px; line-height:1.75; -webkit-text-size-adjust:100%;
  min-height:100vh;
}
.blog *{box-sizing:border-box;}
.blog a{color:var(--link); text-decoration:none;}
.blog a:active{color:var(--orange);}
.blog .app{max-width:480px; margin:0 auto; background:#fff; min-height:100vh;
  border-left:1px solid #c4ccd4; border-right:1px solid #c4ccd4;}

.blog header{position:sticky; top:0; z-index:5; background:var(--navy); color:#fff;
  border-bottom:3px solid var(--orange); display:flex; align-items:center;
  justify-content:space-between; padding:10px 14px;}
.blog header .ttl{font-size:17px; font-weight:bold;}
.blog header .ttl a{color:#fff;}
.blog header .ttl small{display:block; font-size:10px; color:#b9c6d3; font-weight:normal;}
.blog header .menu{font-size:12px; color:#dfe7ee; border:1px solid #5c6b78; border-radius:3px; padding:5px 9px;}

.blog .catbar{font-size:12px; background:#f3f6f9; border-bottom:1px solid var(--line);
  padding:8px 12px; color:#8a95a0; white-space:nowrap; overflow-x:auto;}
.blog .catbar a{color:#3a5168; margin-right:2px;}
.blog .catbar span{color:#c0c8d0; margin:0 6px;}

.blog .crumb{font-size:11px; color:#8a95a0; padding:8px 14px; background:#f3f6f9; border-bottom:1px solid var(--line);}
.blog .crumb a{color:#3a5168;}

/* ---- 一覧 ---- */
.blog .day{font-size:11px; color:#6a747e; font-weight:bold; background:#eef2f6;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:4px 12px;}
.blog .entry{display:grid; grid-template-columns:76px 1fr; gap:11px; align-items:start;
  padding:12px; border-bottom:1px solid #edf1f4;}
.blog .entry.notext{grid-template-columns:1fr;}
.blog .thumb{width:76px; height:76px; border:1px solid #b9c2cc; padding:2px; background:#fff; box-shadow:1px 1px 0 #dde3e9;}
.blog .thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.blog .etxt{min-width:0;}
.blog .etxt h2{font-size:15px; margin:0 0 3px; color:#1a2a3a; line-height:1.4; font-weight:bold;}
.blog .etxt h2 a{color:inherit;}
.blog .etxt .ex{font-size:12px; color:#555; margin:0 0 5px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.blog .etxt .meta{font-size:10.5px; color:#8892a0;}
.blog .cat{color:#fff; background:var(--orange); border-radius:2px; padding:0 5px; margin-right:5px; font-size:10px;}
.blog .entry.notext .etxt h2{border-left:5px solid var(--orange); padding-left:7px;}

.blog .pager{display:flex; justify-content:space-between; padding:14px 12px; font-size:13px;}
.blog .pager a{border:1px solid var(--line); border-radius:3px; padding:6px 12px; color:#3a5168; background:#f7f9fb;}

/* ---- 記事本体 ---- */
.blog article{padding:16px 16px 4px;}
.blog .adate{font-size:11px; color:#6a747e; font-weight:bold;}
.blog h1{font-size:20px; line-height:1.45; margin:4px 0 8px; color:#16202b;}
.blog .byline{font-size:11px; color:#8892a0; border-bottom:1px dashed #cbd3db; padding-bottom:10px; margin-bottom:14px;}
.blog .flyer{width:100%; border:1px solid #b9c2cc; padding:3px; background:#fff; box-shadow:2px 2px 0 #dde3e9; margin:0 0 14px;}
.blog .flyer img{width:100%; display:block;}
.blog .body{font-size:14px; line-height:1.85;}
.blog .body p{margin:0 0 14px;}
.blog .body h1{font-size:18px;} .blog .body h2{font-size:16px; margin:18px 0 8px;} .blog .body h3{font-size:15px;}
.blog .body img{max-width:100%; height:auto; border:1px solid #b9c2cc; padding:3px; background:#fff;}
.blog .body ul,.blog .body ol{margin:0 0 14px; padding-left:1.4em;}
.blog .body a{text-decoration:underline;}
.blog .body blockquote{margin:0 0 14px; padding:8px 12px; background:#f6f7f9; border-left:4px solid var(--orange); color:#555; font-size:13px;}
.blog .body hr{border:0; border-top:1px solid #e0e5ea; margin:20px 0;}
.blog .body code{background:#f2f4f6; padding:1px 4px; font-family:"Courier New",monospace; font-size:12px;}
.blog .body pre{background:#1e2733; color:#dfe7ee; padding:12px; overflow-x:auto; font-size:12px;}
.blog .permabox{font-size:11px; color:#778; background:#fbfcfd; border:1px solid #e3e8ed; padding:8px 10px; margin:12px 0 4px;}
.blog .permabox .u{font-family:"Courier New",monospace; color:#2255aa; word-break:break-all;}
.blog .entryfoot{font-size:11px; color:#8892a0; border-top:1px solid #edf1f4; margin-top:8px; padding:10px 0 4px;}
.blog .entryfoot a{color:#8892a0;}

.blog .adjacent{display:flex; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:6px 0 0;}
.blog .adjacent a{flex:1; padding:12px; font-size:12px; color:#3a5168;}
.blog .adjacent .p{border-right:1px solid var(--line);}
.blog .adjacent .n{text-align:right;}
.blog .adjacent small{display:block; color:#98a2ac; font-size:10px; margin-bottom:2px;}

/* ---- コメント ---- */
.blog .comments{padding:16px;}
.blog .comments h3{font-size:13px; color:#fff; background:#5b7189; padding:4px 10px; margin:0 0 12px; letter-spacing:1px;}
.blog .cmt{border-bottom:1px dotted #d4dbe2; padding:0 0 10px; margin:0 0 12px; font-size:13px;}
.blog .cmt .head{font-size:11px; color:#8892a0; margin-bottom:3px;}
.blog .cmt .head b{color:#3a5168; font-size:12px;}
.blog .cmt p{margin:0; white-space:pre-wrap;}
.blog .form{background:#f6f8fa; border:1px solid #e2e7ec; padding:12px; margin-top:6px;}
.blog .form h4{margin:0 0 8px; font-size:12px; color:#556;}
.blog .form label{display:block; font-size:11px; color:#778; margin:8px 0 2px;}
.blog .form .note{font-size:10px; color:#9aa4ae;}
.blog .form input,.blog .form textarea{width:100%; border:1px solid #c3ccd4; padding:7px 8px; font-size:14px; font-family:inherit; background:#fff;}
.blog .form textarea{height:90px;}
.blog .form button{margin-top:12px; background:var(--navy); color:#fff; border:0; border-radius:3px; padding:11px 18px; font-size:14px; font-weight:bold;}
.blog .form button:disabled{opacity:.6;}
.blog .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.blog .okmsg{margin:12px 0 0; font-size:13px; color:#2e7d32; font-weight:bold;}

.blog footer{background:#eef1f4; border-top:1px solid var(--line); text-align:center; padding:16px 12px 28px; font-size:11px; color:#8892a0;}
.blog .counter{font-family:"Courier New",monospace; background:#111; color:#6f6; padding:2px 6px; letter-spacing:2px; font-size:11px;}