/* 同じ人物を追う5コマ。説明とサービス名はHTMLのまま編集できます。 */
.illustrated-journey{gap:24px;align-items:start}
.journey-illustration{width:100%;aspect-ratio:3/5;background-image:url('assets/customer-journey.webp');background-size:500% 100%;background-repeat:no-repeat;border-radius:8px;margin:18px 0 22px}
.frame-0{background-position:0% 0}.frame-1{background-position:25% 0}.frame-2{background-position:50% 0}.frame-3{background-position:75% 0}.frame-4{background-position:100% 0}
.illustrated-journey>li:not(:last-child):after{top:145px;right:-21px}
.illustrated-journey h3{font-size:16px;min-height:58px;line-height:1.8}
.illustrated-journey p{font-size:15px}
@media(max-width:700px){
 .illustrated-journey>li{grid-template-columns:145px minmax(0,1fr);gap:6px 19px;padding:0 0 38px;margin-bottom:17px}
 .journey-illustration{grid-column:1;grid-row:1/4;margin:0;align-self:center}
 .illustrated-journey .journey-number{grid-column:2;grid-row:1;font-size:14px;align-self:end}
 .illustrated-journey h3{grid-column:2;grid-row:2;min-height:0;align-self:center;font-size:16px;margin:0}
 .illustrated-journey p{grid-column:2;grid-row:3;align-self:start;font-size:14px;margin:0}
 .illustrated-journey>li:not(:last-child):after{top:auto;bottom:0;left:61px;right:auto}
}
@media(max-width:360px){.illustrated-journey>li{grid-template-columns:125px minmax(0,1fr);column-gap:15px}.illustrated-journey>li:not(:last-child):after{left:51px}.illustrated-journey h3{font-size:15px}}


.journey-illustration.frame-1{background-image:url('assets/journey-laptop.webp');background-size:cover;background-position:center;}