/* blog ページだけの見た目。生成元 gen_site_w.py gen_blog() */

.feat img{aspect-ratio:16/10}
/* 残りは「写真つきの行」＝実績のカードの骨と分ける（記事は読む物、実績は見る物） */
.posts{padding:clamp(40px,6vh,72px) 0 clamp(90px,13vh,170px)}
.post{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(16px,2.6vw,36px);align-items:center;padding:clamp(20px,2.6vw,30px) 0;border-bottom:1px solid var(--line);position:relative}
.post figure{overflow:hidden;border-radius:8px;background:var(--paper2)}
.post img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1s var(--e-cubic)}
.post:hover img{transform:scale(1.03)}
.post .tx{display:flex;flex-direction:column;gap:6px;padding-right:44px}
.post .tt{font:700 clamp(17px,1.6vw,22px)/1.6 var(--gt);letter-spacing:.01em;transition:color .35s var(--e-cubic)}
.post:hover .tt{color:var(--acc)}
.post::after{content:"→";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:24px;line-height:1;color:var(--acc);transition:transform .45s var(--e-cubic)}
.post:hover::after{transform:translate3d(6px,-50%,0)}
@media (max-width:820px){.post{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:12px}.post .tt{font-size:16px}.post .tx{padding-right:30px}.post::after{font-size:20px;right:0}}