/* HTMLとCSSで描く4段階の活用フロー */
.post_content .marketo-journey { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin:0 0 28px; padding:0; list-style:none; }
.post_content .marketo-journey > li { position:relative; min-width:0; margin:0; padding:0; list-style:none; }
.marketo-journey > li:not(:last-child)::after { content:"→"; position:absolute; right:-22px; top:56px; color:#748896; font-size:22px; }
.post_content .marketo-journey h3 { display:flex; align-items:center; gap:8px; margin:16px 0 10px !important; font-size:17px; line-height:1.5; }
.marketo-journey h3 > span { flex:none; display:inline-flex; justify-content:center; align-items:center; width:24px; height:24px; background:#0070a4; color:#fff; border-radius:50%; font-size:13px; }
.post_content .marketo-journey p { margin:0; font-size:16px; line-height:1.9; }
@media (max-width:767px) {
 .post_content .marketo-journey { grid-template-columns:minmax(0,1fr); gap:32px; }
 .post_content .marketo-journey > li { display:grid; grid-template-columns:140px minmax(0,1fr); gap:0 16px; align-items:center; }
 .marketo-journey > li > div { grid-row:1 / 3; }
 .post_content .marketo-journey h3 { margin:0 0 8px !important; }
 .marketo-journey > li:not(:last-child)::after { content:"↓"; right:auto; left:66px; top:auto; bottom:-28px; }
}
@media (max-width:380px) { .post_content .marketo-journey > li { grid-template-columns:minmax(0,1fr); } .marketo-journey > li > div { grid-row:auto; } .marketo-journey > li:not(:last-child)::after { left:50%; } }

.marketo-journey__art { display:flex; height:152px; align-items:center; justify-content:center; }
.post_content .marketo-journey__art img { display:block; width:100%; height:100%; object-fit:contain; margin:0; }
@media (max-width:767px) { .marketo-journey__art { height:132px; } }