/* 実際のサービス資料を横にめくる、ローカルの比較用見本。 */
.work-sample{margin:36px 0 0;max-width:780px}
.work-sample[hidden]{display:none}
.work-sample figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-top:16px;color:#526c7b;font-size:14px;line-height:1.8}
.work-sample-owner{display:inline-block;margin-left:18px;color:#647d8b;font-size:13px}
.work-sample figcaption a{flex-shrink:0;text-decoration:none;border-bottom:1px solid #a0b2bc;line-height:1.8;color:#163b52}
.work-sample figcaption a span{margin-left:8px}
@media(max-width:680px){.work-sample{margin-top:23px}.work-sample figcaption{margin-top:13px;gap:12px;font-size:13px}.work-sample-owner{display:block;margin:4px 0 0;font-size:12px}}

.sample-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;border:1px solid #dbe3e7;background:#fff}
.sample-track::-webkit-scrollbar{display:none}
.sample-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;appearance:none;border:0;padding:0;background:#fff;cursor:zoom-in}
.sample-slide img{display:block;width:100%;height:auto;aspect-ratio:16/9}
.sample-slide:focus-visible{outline:3px solid #397b9e;outline-offset:-3px}
.sample-paging,.sample-dialog-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.sample-hint,.sample-dialog-hint{font-size:12px;color:#647d8b}
.sample-controls{display:flex;align-items:center;gap:10px;flex-shrink:0}
.sample-controls button,.sample-dialog-bar button{appearance:none;background:transparent;border:1px solid #cbd8df;color:#163b52;font:inherit;cursor:pointer}
.sample-controls button{width:44px;height:44px;font-size:20px;border-radius:50%}
.sample-controls button:disabled{opacity:.3;cursor:default}
.sample-controls button:not(:disabled):hover,.sample-dialog-bar button:hover{background:#eaf0f3}
.sample-count{min-width:36px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums;color:#526c7b}
.work-sample figcaption{margin-top:8px}
.sample-dialog{width:min(1160px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:16px;border:0;background:#f9fbfc;color:#163b52;box-sizing:border-box}
.sample-dialog::backdrop{background:#0e2635bf}
.sample-dialog-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:14px}
#sample-dialog-title{margin-right:auto;font-weight:600}
.sample-dialog-bar button{min-height:44px;padding:6px 12px;border-radius:3px;font-size:13px;white-space:nowrap}
.sample-dialog-image{overflow:auto;max-height:calc(100dvh - 188px);overscroll-behavior:contain;background:#fff}
.sample-dialog-image img{display:block;width:100%;height:auto;max-width:none}
.sample-dialog-image.is-zoomed img{width:max(100%,1600px)}
.sample-dialog-hint{visibility:hidden}
.sample-dialog:has(.is-zoomed) .sample-dialog-hint{visibility:visible}
.sample-dialog button:focus-visible,.sample-dialog-image:focus-visible,.sample-controls button:focus-visible{outline:2px solid #397b9e;outline-offset:3px}
@media(max-width:680px){.sample-dialog{width:calc(100vw - 16px);padding:12px;max-height:calc(100dvh - 24px)}.sample-dialog-bar{gap:6px;font-size:13px}.sample-dialog-bar button{padding:6px 9px;font-size:12px}.sample-dialog-image.is-zoomed img{width:1000px}.sample-dialog-hint{font-size:11px}.sample-controls{gap:8px}}
@media(prefers-reduced-motion:reduce){.sample-track{scroll-behavior:auto}}