/* ===========================================================================
   SolutionsDataHub -- "rest" blocks, part 1: こんな課題に / コンセプト / 導入効果.
   Port of sales-rest.css (.sa-rest-iss / -con / -eff) in the DATA HUB accent;
   part 2 (導入フロー / FAQ / 関連リンク) lives in datahub-rest-2.css.
   Motion contract (datahub-motion.js): start states ONLY under
   html.dh-motion [data-dh-latch]:not(.dh-seen) -> no JS, reduced motion or a
   script that fails to load = final state, fully readable. Only transform /
   opacity / stroke-dashoffset move. Nothing here is clickable, so no hover;
   the AFTER pane's frame marks the "after" state (same as SALES).
   Contrast (WCAG 2.x, computed 2026-10-03): --dh-acc on --surface 5.01, on
   #FFF 5.29 · --muted on #EEF2F6 (BEFORE) 4.88 · --ink on --surface (課題)
   12.87, on #FFF (AFTER) 13.58 · --navy on --surface 13.87 · on the navy
   band: #FFF 14.64, --on-dark-muted 9.62, kind #8FA8BF 5.94; in the white
   "on" card: --dh-acc 5.29, --navy 14.64, --muted 5.48. Rules, BEFORE
   markers and icons are decoration; the text carries the content. Concept
   rows: dt #8FA8BF on navy 5.94, in the white card --dh-acc 5.29, dd --ink.
   =========================================================================== */
.dh-rest-h2 { margin-bottom: clamp(28px, 3vw, 44px); }
.dh-rest-nw { white-space: nowrap; }   /* keeps one phrase on one line in an h2 (browsers without auto-phrase) */
.dh-rest-iss svg, .dh-rest-con svg, .dh-rest-eff svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

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

/* ---- コンセプト: これまで (DWH＋BI) beside AVATAR DATA HUB ----------------
   Two answers side by side, NOT a chain: no arrow between the columns (Phong
   2026-10-05 read the old 集める→見る→聞く row as DWH→BI→DATA HUB, the
   opposite of the concept). Paired rows 準備 / データ / 知りたいとき line up
   across the columns via subgrid from 900px. Band stays navy (memory
   keep-concept-band-navy); the halo uses --blue-pale, not purple. */
.dh-rest-con { --pt: var(--sp-open); --pb: var(--sp-open); }
.dh-rest-con__h2 { max-width: 900px; margin-bottom: 20px; color: var(--white); text-wrap: pretty; }
.dh-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; }
.dh-rest-con__vs { margin: clamp(36px, 4.4vw, 60px) 0 0; display: grid; gap: 28px; }
.dh-rest-con__col { position: relative; display: grid; align-content: start; padding: 28px 28px 10px; border: 1px solid #34506F; border-radius: 4px; color: #8FA8BF; }
.dh-rest-con__head { display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; }
.dh-rest-con__icos { display: flex; gap: 10px; }
.dh-rest-con__h3 { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.dh-rest-con__kind { font-size: 13px; line-height: 20px; font-weight: 700; letter-spacing: .12em; color: #8FA8BF; }
.dh-rest-con__verb { font-size: clamp(24px, 2.3vw, 30px); line-height: 1.4; font-weight: 700; color: var(--white); }
.dh-rest-con__arr { margin: 0 .3em; font-weight: 400; color: #8FA8BF; }
.dh-rest-con__list { margin: 0; }
.dh-rest-con__row { display: grid; gap: 4px; align-content: start; padding: 14px 0 16px; border-top: 1px solid #34506F; }
.dh-rest-con__row dt { font-size: 13px; line-height: 20px; font-weight: 700; letter-spacing: .08em; color: #8FA8BF; }
.dh-rest-con__row dd { margin: 0; font-family: 'Noto Sans JP', sans-serif; font-size: 15px; line-height: 1.8; color: var(--on-dark-muted); word-break: keep-all; }   /* breaks only at the <wbr> phrase marks: auto-phrase split 作ってもら|う at 390px */
.dh-rest-con__col--on { background: var(--white); border-color: var(--white); box-shadow: inset 0 4px 0 var(--dh-acc), 0 22px 50px rgba(3, 12, 24, .35); color: var(--dh-acc); }
.dh-rest-con__col--on::before { content: ""; position: absolute; inset: -9px; border: 1px solid var(--blue-pale); border-radius: 9px; opacity: .45; pointer-events: none; }
.dh-rest-con__col--on .dh-rest-con__kind, .dh-rest-con__col--on .dh-rest-con__row dt { color: var(--dh-acc); }
.dh-rest-con__col--on .dh-rest-con__verb { color: var(--navy); }
.dh-rest-con__col--on .dh-rest-con__row { border-top-color: #DCE4EC; }
.dh-rest-con__col--on .dh-rest-con__row dd { color: var(--ink); }
@media (min-width: 900px) {
  .dh-rest-con__vs { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: 48px; row-gap: 0; }
  .dh-rest-con__col { grid-row: span 4; grid-template-rows: subgrid; padding: 32px 34px 12px; }
  .dh-rest-con__list { grid-row: span 3; display: grid; grid-template-rows: subgrid; }
}
html.dh-motion .dh-rest-con__col { transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); }
html.dh-motion .dh-rest-con__col--on { transition-delay: .55s; }
html.dh-motion .dh-seen .dh-rest-con__col--on::before { animation: dh-rest-halo 1.8s var(--ease-soft) 1.2s both; }
html.dh-motion .dh-rest-con__vs[data-dh-latch]:not(.dh-seen) .dh-rest-con__col { opacity: .18; transform: translateY(18px); }
html.dh-motion .dh-rest-con__vs[data-dh-latch]:not(.dh-seen) .dh-rest-con__col--on { opacity: 0; transform: translateY(28px) scale(.97); }
html.dh-motion .dh-rest-con__vs[data-dh-latch]:not(.dh-seen) .dh-rest-con__col--on::before { opacity: 0; }
@keyframes dh-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 ---------- */
.dh-rest-eff__grid { display: grid; gap: 14px; }
.dh-rest-eff__pane { padding: clamp(24px, 3vw, 36px); border-radius: 4px; }
.dh-rest-eff__pane--before { background: #EEF2F6; }
.dh-rest-eff__pane--after { position: relative; background: var(--white); border: 1px solid var(--line-strong); box-shadow: inset 0 6px 0 var(--dh-acc), 0 16px 40px rgba(16, 42, 67, .10); }
.dh-rest-eff__h3 { margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; font-size: 19px; line-height: 1.6; color: var(--navy); }
.dh-rest-eff__pane--before .dh-rest-eff__h3 { color: var(--muted); }
.dh-rest-eff__tag { font-size: 13px; line-height: 20px; font-weight: 700; letter-spacing: .2em; color: var(--dh-acc); }
.dh-rest-eff__pane--before .dh-rest-eff__tag { color: var(--muted); }
.dh-rest-eff__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.dh-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); text-wrap: pretty; }
.dh-rest-eff__pane--before li { color: var(--muted); }
.dh-rest-eff__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 9px; background: var(--dh-acc); }
.dh-rest-eff__pane--before li::before { background: #A9BACB; }
.dh-rest-eff__pane--before li:nth-child(1)::before { transform: translate(2px, -3px) rotate(24deg); }
.dh-rest-eff__pane--before li:nth-child(2)::before { transform: translate(-1px, 3px) rotate(-18deg); }
.dh-rest-eff__pane--before li:nth-child(3)::before { transform: translate(3px, 1px) rotate(40deg); }
.dh-rest-eff__go { display: grid; place-items: center; height: 36px; color: var(--dh-acc); }
.dh-rest-eff__go svg { transform: rotate(90deg); stroke-width: 2; }
@media (min-width: 900px) {
  .dh-rest-eff__grid { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); gap: 0; align-items: stretch; }
  .dh-rest-eff__go { height: auto; }
  .dh-rest-eff__go svg { transform: none; }
}
/* arrow draws, AFTER pane slides in, its markers swing from askew to straight */
html.dh-motion .dh-rest-eff__pane--after { transition: opacity .7s var(--ease-out) .45s, transform .8s var(--ease-out) .45s; }
html.dh-motion .dh-rest-eff__pane--after li { transition: opacity .5s var(--ease-out); transition-delay: var(--d); }
html.dh-motion .dh-rest-eff__pane--after li::before { transition: transform .75s cubic-bezier(.34, 1.4, .5, 1); transition-delay: calc(var(--d) + .1s); }
html.dh-motion .dh-rest-eff__pane--after li:nth-child(1) { --d: .8s; }
html.dh-motion .dh-rest-eff__pane--after li:nth-child(2) { --d: .95s; }
html.dh-motion .dh-rest-eff__pane--after li:nth-child(3) { --d: 1.1s; }
html.dh-motion .dh-rest-eff__go-l { stroke-dasharray: 1; transition: stroke-dashoffset .45s var(--ease-soft) .15s; }
html.dh-motion .dh-rest-eff__go-h { transition: opacity .2s linear .55s; }
html.dh-motion .dh-rest-eff__grid[data-dh-latch]:not(.dh-seen) .dh-rest-eff__pane--after { opacity: 0; transform: translateX(-22px); }
html.dh-motion .dh-rest-eff__grid[data-dh-latch]:not(.dh-seen) .dh-rest-eff__pane--after li { opacity: .25; }
html.dh-motion .dh-rest-eff__grid[data-dh-latch]:not(.dh-seen) .dh-rest-eff__pane--after li:nth-child(1)::before { transform: translate(2px, -3px) rotate(24deg); }
html.dh-motion .dh-rest-eff__grid[data-dh-latch]:not(.dh-seen) .dh-rest-eff__pane--after li:nth-child(2)::before { transform: translate(-1px, 3px) rotate(-18deg); }
html.dh-motion .dh-rest-eff__grid[data-dh-latch]:not(.dh-seen) .dh-rest-eff__pane--after li:nth-child(3)::before { transform: translate(3px, 1px) rotate(40deg); }
html.dh-motion .dh-rest-eff__grid[data-dh-latch]:not(.dh-seen) .dh-rest-eff__go-l { stroke-dashoffset: 1; }
html.dh-motion .dh-rest-eff__grid[data-dh-latch]:not(.dh-seen) .dh-rest-eff__go-h { opacity: 0; }

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