/* ===========================================================================
   SolutionsSales -- "rest" block, part 1: こんな課題に / コンセプト / 導入効果.
   Part 2 (導入実績 / 導入フロー / FAQ) lives in sales-rest-2.css.
   Motion contract (sales-motion.js): start states ONLY under
   html.sa-motion [data-sa-latch]:not(.sa-seen) -> no JS / reduced motion =
   final state. Only transform / opacity / stroke-dashoffset move.
   Contrast (measured): accent #805496 on #F7F9FB 5.49, --muted on #EEF2F6 4.88,
   #8FA8BF on navy 5.94, #C6D3E0 on navy 9.62, #C9A8DA on navy 7.04.
   =========================================================================== */
.sa-rest-h2 { margin-bottom: clamp(28px, 3vw, 44px); }
.sa-rest-nw { white-space: nowrap; }   /* keeps one phrase on one line in h2 */
.sa-rest-iss svg, .sa-rest-con svg, .sa-rest-eff svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---- こんな課題に: unordered editorial list: icon, accent rule, key phrase bold ---- */
.sa-rest-iss__in { display: grid; gap: clamp(24px, 3vw, 40px); }
.sa-rest-iss__h2 { font-size: clamp(25px, 2.9vw, 38px); line-height: 1.5; letter-spacing: .01em; }
.sa-rest-iss__list { margin: 0; padding: 0; list-style: none; display: grid; column-gap: clamp(28px, 3.4vw, 48px); }
.sa-rest-iss__item { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: start; gap: 16px; padding: 26px 0 28px; border-top: 1px solid var(--sa-rule); }
.sa-rest-iss__item:last-child { border-bottom: 1px solid var(--sa-rule); }
.sa-rest-iss__item::before { content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 2px; background: var(--sa-acc); transform-origin: 0 50%; }
.sa-rest-iss__ico { margin-top: 4px; color: var(--sa-acc); }
.sa-rest-iss__tx { margin: 0; font-family: 'Noto Sans JP', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.95; color: var(--ink); }
.sa-rest-iss__tx strong { font-weight: 700; color: var(--navy); }
@media (min-width: 640px) {
  .sa-rest-iss__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-rest-iss__item:nth-last-child(2) { border-bottom: 1px solid var(--sa-rule); }
}
@media (min-width: 1024px) {
  .sa-rest-iss__in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; column-gap: 64px; }
  .sa-rest-iss__hd { padding-top: 18px; }
}
html.sa-motion .sa-rest-iss__item > *, html.sa-motion .sa-rest-iss__item::before { transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); }
html.sa-motion .sa-rest-iss__item:nth-child(2) { --d: .12s; }
html.sa-motion .sa-rest-iss__item:nth-child(3) { --d: .24s; }
html.sa-motion .sa-rest-iss__item:nth-child(4) { --d: .36s; }
html.sa-motion .sa-rest-iss__item::before { transition-delay: var(--d, 0s); }
html.sa-motion .sa-rest-iss__ico { transition-delay: calc(var(--d, 0s) + .1s); }
html.sa-motion .sa-rest-iss__tx { transition-delay: calc(var(--d, 0s) + .16s); }
html.sa-motion .sa-rest-iss__item[data-sa-latch]:not(.sa-seen)::before { transform: scaleX(0); }
html.sa-motion .sa-rest-iss__item[data-sa-latch]:not(.sa-seen) > * { opacity: 0; transform: translateY(16px); }
html.sa-motion .sa-rest-iss__item[data-sa-latch]:not(.sa-seen) > .sa-rest-iss__ico { transform: translateY(6px) scale(.7); }

/* ---- コンセプト: 3 stages, lit one after another, the third one "on" ---- */
.sa-rest-con { --pt: var(--sp-open); --pb: var(--sp-open); }
.sa-rest-con__h2 { max-width: 900px; margin-bottom: 20px; color: var(--white); }
.sa-rest-con__body { max-width: 860px; margin: 0; font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 2.1; color: var(--on-dark-muted); text-wrap: pretty; }
.sa-rest-con__steps { --gap: 52px; margin: clamp(36px, 4.4vw, 60px) 0 0; padding: 0; list-style: none; display: grid; gap: var(--gap); }
.sa-rest-con__col { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 28px 30px; border: 1px solid #34506F; border-radius: 4px; color: #8FA8BF; }
.sa-rest-con__h3 { margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; }
.sa-rest-con__kind { font-size: 13px; line-height: 20px; font-weight: 700; letter-spacing: .12em; color: #8FA8BF; }
.sa-rest-con__verb { font-size: clamp(24px, 2.3vw, 30px); line-height: 1.4; font-weight: 700; color: var(--white); }
.sa-rest-con__tx { margin: 0; font-family: 'Noto Sans JP', sans-serif; font-size: 15px; line-height: 1.9; color: var(--on-dark-muted); }
.sa-rest-con__col--on { background: var(--white); border-color: var(--white); box-shadow: inset 0 4px 0 var(--sa-acc), 0 22px 50px rgba(3, 12, 24, .35); color: var(--sa-acc); }
.sa-rest-con__col--on::before { content: ""; position: absolute; inset: -9px; border: 1px solid #C9A8DA; border-radius: 9px; opacity: .45; pointer-events: none; }
.sa-rest-con__col--on .sa-rest-con__kind { color: var(--sa-acc); }
.sa-rest-con__col--on .sa-rest-con__verb { color: var(--navy); }
.sa-rest-con__col--on .sa-rest-con__tx { color: var(--muted); }
/* arrow in the gap: down on phones, right from 900px */
.sa-rest-con__go { position: absolute; left: 30px; top: 100%; width: 12px; height: var(--gap); display: grid; place-items: center; color: #C9A8DA; }
.sa-rest-con__go svg { transform: rotate(90deg); stroke-width: 2; }
@media (min-width: 900px) {
  .sa-rest-con__steps { --gap: 60px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sa-rest-con__go { left: 100%; top: 50%; width: var(--gap); height: 12px; margin-top: -6px; }
  .sa-rest-con__go svg { transform: none; }
}
html.sa-motion .sa-rest-con__col { transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); }
html.sa-motion .sa-rest-con__col:nth-child(2) { transition-delay: .55s; }
html.sa-motion .sa-rest-con__col:nth-child(3) { transition-delay: 1.1s; }
html.sa-motion .sa-rest-con__go-l { stroke-dasharray: 1; transition: stroke-dashoffset .45s var(--ease-soft) .3s; }
html.sa-motion .sa-rest-con__go-h { transition: opacity .2s linear .7s; }
html.sa-motion .sa-rest-con__col:nth-child(2) .sa-rest-con__go-l { transition-delay: .85s; }
html.sa-motion .sa-rest-con__col:nth-child(2) .sa-rest-con__go-h { transition-delay: 1.25s; }
html.sa-motion .sa-seen .sa-rest-con__col--on::before { animation: sa-rest-halo 1.8s var(--ease-soft) 1.35s both; }
html.sa-motion .sa-rest-con__steps[data-sa-latch]:not(.sa-seen) .sa-rest-con__col { opacity: .18; transform: translateY(18px); }
html.sa-motion .sa-rest-con__steps[data-sa-latch]:not(.sa-seen) .sa-rest-con__col--on { opacity: 0; transform: translateY(28px) scale(.97); }
html.sa-motion .sa-rest-con__steps[data-sa-latch]:not(.sa-seen) .sa-rest-con__col--on::before { opacity: 0; }
html.sa-motion .sa-rest-con__steps[data-sa-latch]:not(.sa-seen) .sa-rest-con__go-l { stroke-dashoffset: 1; }
html.sa-motion .sa-rest-con__steps[data-sa-latch]:not(.sa-seen) .sa-rest-con__go-h { opacity: 0; }
@keyframes sa-rest-halo { 0% { opacity: 0; transform: scale(.94); } 45% { opacity: 1; transform: scale(1); } 100% { opacity: .45; transform: scale(1); } }

/* ---- 導入効果: scattered markers fall into line on the AFTER side ---------- */
.sa-rest-eff__grid { display: grid; gap: 14px; }
.sa-rest-eff__pane { padding: clamp(24px, 3vw, 36px); border-radius: 4px; }
.sa-rest-eff__pane--before { background: #EEF2F6; }
.sa-rest-eff__pane--after { position: relative; background: var(--white); border: 1px solid var(--line-strong); box-shadow: inset 0 6px 0 var(--sa-acc), 0 16px 40px rgba(16, 42, 67, .10); }
.sa-rest-eff__h3 { margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; font-size: 19px; line-height: 1.6; color: var(--navy); }
.sa-rest-eff__pane--before .sa-rest-eff__h3 { color: var(--muted); }
.sa-rest-eff__tag { font-size: 13px; line-height: 20px; font-weight: 700; letter-spacing: .2em; color: var(--sa-acc); }
.sa-rest-eff__pane--before .sa-rest-eff__tag { color: var(--muted); }
.sa-rest-eff__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.sa-rest-eff__list li { position: relative; padding-left: 26px; font-family: 'Noto Sans JP', sans-serif; font-size: 15.5px; line-height: 1.85; color: var(--ink); }
.sa-rest-eff__pane--before li { color: var(--muted); }
.sa-rest-eff__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 9px; background: var(--sa-acc); }
.sa-rest-eff__pane--before li::before { background: #A9BACB; }
.sa-rest-eff__pane--before li:nth-child(1)::before { transform: translate(2px, -3px) rotate(24deg); }
.sa-rest-eff__pane--before li:nth-child(2)::before { transform: translate(-1px, 3px) rotate(-18deg); }
.sa-rest-eff__pane--before li:nth-child(3)::before { transform: translate(3px, 1px) rotate(40deg); }
.sa-rest-eff__go { display: grid; place-items: center; height: 36px; color: var(--sa-acc); }
.sa-rest-eff__go svg { transform: rotate(90deg); stroke-width: 2; }
@media (min-width: 900px) {
  .sa-rest-eff__grid { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); gap: 0; align-items: stretch; }
  .sa-rest-eff__go { height: auto; }
  .sa-rest-eff__go svg { transform: none; }
}
html.sa-motion .sa-rest-eff__pane--after { transition: opacity .7s var(--ease-out) .45s, transform .8s var(--ease-out) .45s; }
html.sa-motion .sa-rest-eff__pane--after li { transition: opacity .5s var(--ease-out); transition-delay: var(--d); }
html.sa-motion .sa-rest-eff__pane--after li::before { transition: transform .75s cubic-bezier(.34, 1.4, .5, 1); transition-delay: calc(var(--d) + .1s); }
html.sa-motion .sa-rest-eff__pane--after li:nth-child(1) { --d: .8s; }
html.sa-motion .sa-rest-eff__pane--after li:nth-child(2) { --d: .95s; }
html.sa-motion .sa-rest-eff__pane--after li:nth-child(3) { --d: 1.1s; }
html.sa-motion .sa-rest-eff__go-l { stroke-dasharray: 1; transition: stroke-dashoffset .45s var(--ease-soft) .15s; }
html.sa-motion .sa-rest-eff__go-h { transition: opacity .2s linear .55s; }
html.sa-motion .sa-rest-eff__grid[data-sa-latch]:not(.sa-seen) .sa-rest-eff__pane--after { opacity: 0; transform: translateX(-22px); }
html.sa-motion .sa-rest-eff__grid[data-sa-latch]:not(.sa-seen) .sa-rest-eff__pane--after li { opacity: .25; }
html.sa-motion .sa-rest-eff__grid[data-sa-latch]:not(.sa-seen) .sa-rest-eff__pane--after li:nth-child(1)::before { transform: translate(2px, -3px) rotate(24deg); }
html.sa-motion .sa-rest-eff__grid[data-sa-latch]:not(.sa-seen) .sa-rest-eff__pane--after li:nth-child(2)::before { transform: translate(-1px, 3px) rotate(-18deg); }
html.sa-motion .sa-rest-eff__grid[data-sa-latch]:not(.sa-seen) .sa-rest-eff__pane--after li:nth-child(3)::before { transform: translate(3px, 1px) rotate(40deg); }
html.sa-motion .sa-rest-eff__grid[data-sa-latch]:not(.sa-seen) .sa-rest-eff__go-l { stroke-dashoffset: 1; }
html.sa-motion .sa-rest-eff__grid[data-sa-latch]:not(.sa-seen) .sa-rest-eff__go-h { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .sa-rest-iss *, .sa-rest-iss *::before, .sa-rest-con *, .sa-rest-con *::before, .sa-rest-eff *, .sa-rest-eff *::before { transition: none !important; animation: none !important; }
}