:root{--main:#2c9a94;--dark:#237a75;--bg:#f7fafa;--text:#333;--muted:#888}
*{box-sizing:border-box}
body{margin:0;font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;color:var(--text);line-height:1.9;background:var(--bg)}
a{color:var(--dark);text-decoration:none}
a:hover{text-decoration:underline}
header.site{background:var(--main);color:#fff;padding:26px 20px;text-align:center}
header.site .name{font-size:26px;font-weight:700;letter-spacing:1px}
header.site .name a{color:#fff}
header.site .tag{font-size:14px;opacity:.9;margin-top:4px}
.wrap{max-width:820px;margin:0 auto;padding:22px 18px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:620px){.cards{grid-template-columns:1fr}}
.card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06);transition:transform .15s}
.card:hover{transform:translateY(-3px)}
.card a{color:inherit;text-decoration:none}
.card .thumb{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:#eee}
.card .body{padding:12px 14px}
.card .date{font-size:12px;color:var(--muted)}
.card .title{font-size:16px;font-weight:700;margin-top:4px;color:var(--dark)}
article{background:#fff;border-radius:12px;padding:26px 22px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
article h1{font-size:25px;color:var(--dark);line-height:1.5;margin:0 0 6px}
article .date{color:var(--muted);font-size:13px;margin-bottom:18px}
article img{max-width:100%;height:auto;border-radius:10px;display:block;margin:14px auto}
article .feat{margin-bottom:18px}
article img.tate{width:100%;max-width:520px}
article img.yoko{width:100%;max-width:640px}
article img.illust{width:100%;max-width:400px}
article h2,article h3{color:var(--dark)}
figure{margin:14px 0;text-align:center}
figcaption{font-size:12px;color:var(--muted)}
.back{display:inline-block;margin:22px 0 6px;color:var(--main)}
footer{text-align:center;color:var(--muted);font-size:12px;padding:28px 12px}
.home-link{color:#fff;font-size:13px}


/* ===== 記事内の装飾ボックス ===== */
article .has-box-style{
  padding:16px 18px;
  margin:22px 0;
  border-radius:10px;
  line-height:1.85;
}
article .is-style-sticky-yellow{background:#fdf5da;border:1px solid #ecdca6}
article .is-style-sticky-green{background:#e9f6f3;border:1px solid #b7ded7}
article .is-style-sticky-blue{background:#eaf1fa;border:1px solid #bcd3ea}
article .has-border{border:2px solid #cfe6e4;border-radius:10px;padding:16px 18px;margin:22px 0;line-height:1.85}
article .is-style-border-double{border-style:double;border-width:4px;border-color:#bcdedb}
article .is-style-border-radius-s-double{border-radius:10px;border-style:double;border-width:4px;border-color:#bcdedb}
article .is-style-border-radius-s-thin-and-thick{border-radius:10px;border-style:double;border-width:3px;border-color:#cfe6e4}
article .is-style-light-background-box{background:var(--bg)}
article .is-style-bottom-margin-1em,article .has-bottom-margin{margin-bottom:1em}

article .has-box-style a,article .has-border a{word-break:break-all;overflow-wrap:anywhere}

/* ===== マーカー ===== */
article .marker{background:#ffef9e;padding:0 3px;border-radius:2px;font-weight:600}
article .marker-under{background:linear-gradient(transparent 62%,#ffe680 62%);font-weight:600}

@media(max-width:620px){
  article .has-box-style,article .has-border{padding:14px 14px;margin:18px 0}
}