/* 予約方法 (/howto/): step text beside a phone screenshot on PC, stacked on phones. */
.st-howto-lead{max-width:760px;font-size:17px;line-height:1.9;margin:0 0 18px}
.st-howto-routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:32px;max-width:940px}
.st-howto-route{position:relative;display:flex;flex-direction:column;gap:6px;padding:24px 56px 24px 24px;border:1px solid var(--st-line);border-radius:8px;background:var(--st-paper);color:var(--st-ink);text-decoration:none}
.st-howto-route:hover{border-color:var(--st-accent)}
.st-howto-route .st-eyebrow{font-size:14px;color:var(--st-accent-ink)}
.st-howto-route strong{font-size:22px}
.st-howto-route span:not(.st-eyebrow){font-size:14px;line-height:1.7;color:var(--st-ink-2)}
.st-howto-route .st-howto-route-go{position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--st-accent-ink)}
.st-howto-intro{max-width:760px;line-height:1.9;margin:20px 0 8px}
.st-howto-steps{list-style:none;padding:0;margin:0;max-width:940px}
.st-howto-steps>li{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start;padding:40px 0;border-bottom:1px solid var(--st-line)}
.st-howto-steps>li.st-howto-step-noshot{grid-template-columns:minmax(0,1fr)}
.st-howto-text .st-flow-number{display:block;font-size:56px;margin-bottom:8px}
.st-howto-text h3{font-size:22px;line-height:1.5;margin:0 0 14px}
.st-howto-text p{line-height:1.9;margin:0 0 12px}
.st-howto-text a:not(.st-button){color:var(--st-accent-ink);font-weight:700}
.st-howto-note{font-size:14px;color:var(--st-ink-2)}
.st-howto-shot{margin:0;border:1px solid var(--st-line);border-radius:12px;overflow:hidden;background:var(--st-paper);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.st-howto-shot img{display:block;width:100%;height:auto}
.st-howto-after{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1100px}
.st-howto-after li{padding:22px;border-radius:8px;background:var(--st-paper)}
.st-howto-after strong{display:block;font-size:17px;margin-bottom:8px}
.st-howto-after p{margin:0;line-height:1.85;font-size:15px}
.st-howto-links{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:16px}
@media(max-width:767px){
 .st-howto-lead{font-size:16px}
 .st-howto-routes{grid-template-columns:1fr;gap:12px;margin-top:20px}
 .st-howto-route{padding:18px 48px 18px 18px}
 .st-howto-route strong{font-size:19px}
 .st-howto-steps>li{grid-template-columns:1fr;gap:18px;padding:28px 0}
 .st-howto-text .st-flow-number{font-size:40px}
 .st-howto-text h3{font-size:19px}
 .st-howto-shot{max-width:300px;margin-inline:auto}
 .st-howto-after{grid-template-columns:1fr;gap:12px}
}
.st-howto-route .st-howto-store{margin-top:6px;font-size:13px;font-weight:700;color:var(--st-ink)}
.st-howto-route .st-howto-store::before{content:"対応店舗：";font-weight:400;color:var(--st-ink-2)}
.st-howto-notice{max-width:760px;margin:16px 0 0;padding:14px 18px;border-left:4px solid var(--st-accent);background:var(--st-paper);line-height:1.8}
.st-howto-notice a,.st-howto-intro a{color:var(--st-accent-ink);font-weight:700}
.st-howto-text .st-button-line{display:inline-flex;margin-top:4px}

/* よやクルの使い方（リニューアル前の「予約の流れ」の画像つき手順を戻した。2026-10-30 すぎにいさん）：画面写真は横に並べてスライド */
.st-yk-nav{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 8px;max-width:940px}
.st-yk-nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--st-line-2);border-radius:999px;background:var(--st-paper);color:var(--st-ink);font-weight:700;font-size:14px;text-decoration:none}
.st-yk-nav a:hover{border-color:var(--st-accent)}
.st-yk-guide{padding:32px 0;border-bottom:1px solid var(--st-line);max-width:1100px}
.st-yk-guide[id]{scroll-margin-top:calc(var(--st-header-height) + 16px)}
.st-yk-guide h3{font-size:22px;line-height:1.5;margin:0 0 16px}
.st-yk-shots{list-style:none;margin:0;padding:0 0 12px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,calc((100% - 80px) / 6));gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.st-yk-shots li{scroll-snap-align:start}
.st-yk-shots figure{margin:0}
.st-yk-shots img{display:block;width:100%;height:auto;border:1px solid var(--st-line);border-radius:10px;background:var(--st-paper);box-shadow:0 4px 14px rgba(0,0,0,.08)}
.st-yk-shots figcaption{margin-top:10px;font-size:14px;line-height:1.6;font-weight:700}
.st-yk-guide .st-howto-note{margin:8px 0 0;line-height:1.8}
@media(max-width:767px){.st-yk-guide{padding:24px 0}.st-yk-guide h3{font-size:19px}.st-yk-shots{grid-auto-columns:62%;gap:12px}.st-yk-nav a{font-size:13px;padding:6px 12px}}
.st-yk-shots figcaption .st-yk-old{display:block;margin-top:4px;font-size:12px;font-weight:400;color:var(--st-red)}