テンプレート:メインページスタイル/styles.css

.mp-hero { display:flex; gap:18px; align-items:center; }
.mp-hero-text { flex:1 1 auto; min-width:0; }
.mp-hero-photo { flex:none; width:220px; height:150px; overflow:hidden; }
.mp-hero-photo a { display:block; width:100%; height:100%; }
.mp-hero-photo img { width:100%; height:100%; object-fit:cover; }
.mp-cards { display:grid; grid-template-columns:repeat(3, 1fr); grid-auto-rows:1fr; gap:12px; margin:10px 0; }
.mp-card { border:1px solid #c8ccd1; border-radius:5px; overflow:hidden; background:#fff; }
.mp-card-photo { height:170px; overflow:hidden; background:#f8f9fa; }
.mp-card-photo a { display:block; width:100%; height:100%; }
.mp-card-photo img { width:100%; height:100%; object-fit:cover; }
@media (max-width: 720px) {
.mp-hero { flex-direction:column; align-items:stretch; }
.mp-hero-photo { width:100%; height:160px; }
.mp-cards { grid-template-columns:1fr; }
}