/* ICT・DX推進 特集LP（/dx） — Claude Design 書き出し(dx-v2.html)から移植 */
  *, *::before, *::after { box-sizing:border-box; }
  html, body { margin:0; padding:0; background:#EDF3F9; }
  body { font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; color:#17293C; -webkit-font-smoothing:antialiased; }
  a { color:#2E6FB0; text-decoration:none; }
  a:hover { color:#17293C; }
  ::selection { background:rgba(46,111,176,.18); }
  @keyframes v5pulse { 0%,100%{opacity:.3; transform:scale(1)} 50%{opacity:1; transform:scale(1.3)} }
  @keyframes v5marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
  @keyframes v5dash { 0%{stroke-dashoffset:120} 100%{stroke-dashoffset:0} }
  @keyframes v5drift { 0%,100%{transform:translate3d(0,0,0) scale(1); opacity:.5} 50%{transform:translate3d(3%,-4%,0) scale(1.1); opacity:.9} }
  @keyframes v5sweep { 0%{transform:translate3d(-40%,0,0) rotate(14deg); opacity:0} 18%{opacity:.85} 60%{opacity:.5} 100%{transform:translate3d(150%,0,0) rotate(14deg); opacity:0} }
  @keyframes v5rise { 0%{transform:translate3d(0,20px,0) scale(.7); opacity:0} 22%{opacity:.9} 78%{opacity:.55} 100%{transform:translate3d(14px,-140px,0) scale(1.15); opacity:0} }
  @keyframes v5breathe { 0%,100%{transform:scale(1); opacity:.32} 50%{transform:scale(1.16); opacity:.7} }
  @media (max-width: 1000px) {
    [data-c] { grid-template-columns: 1fr !important; }
    [data-nav] > a:not(:last-child) { display:none !important; }
    [data-rail] { display:none !important; }
    [data-sticky] { position:static !important; }
    [data-herobar] { grid-template-columns:1fr 1fr !important; }
  }

/* ホバー（元データの style-hover を置き換え。インライン指定より優先させるため !important） */
.dx-hover-dark { transition: background .25s ease, color .25s ease; }
.dx-hover-dark:hover { background:#2E6FB0 !important; color:#fff !important; }
.dx-hover-line { transition: border-color .25s ease, color .25s ease; }
.dx-hover-line:hover { border-color:#2E6FB0 !important; color:#2E6FB0 !important; }

/* 外部サービスへのリンク（ケアカルテ・Plaud Note Pro） */
.dx-ext-link { color:inherit; text-decoration:underline; text-decoration-color:rgba(46,111,176,.4); text-decoration-thickness:1px; text-underline-offset:5px;
  transition: color .25s ease, text-decoration-color .25s ease; }
.dx-ext-link::after { content:"↗"; display:inline-block; margin-left:.35em; font-size:.75em; color:#2E6FB0; opacity:.55;
  transition: transform .25s ease, opacity .25s ease; }
.dx-ext-link:hover { color:#2E6FB0; text-decoration-color:#2E6FB0; }
.dx-ext-link:hover::after { opacity:1; transform:translate(2px,-2px); }

/* 現場の風景ギャラリー（5枚：1枚目を大きく、右列に2枚、下段に2枚） */
.dx-gallery { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.dx-gallery-item { position:relative; margin:0; border-radius:18px; overflow:hidden; aspect-ratio:3/2; grid-column:span 2;
  border:1px solid rgba(255,255,255,.9); box-shadow:0 24px 56px -32px rgba(23,41,60,.42); background:#EDF3F9; }
.dx-gallery-item:first-child { grid-column:span 4; grid-row:span 2; aspect-ratio:auto; }
.dx-gallery-item:nth-child(n+4) { grid-column:span 3; aspect-ratio:16/9; }
.dx-gallery-item img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.dx-gallery-item:hover img { transform:scale(1.04); }
.dx-gallery-item figcaption { position:absolute; left:0; right:0; bottom:0; padding:28px 18px 14px; font-size:12.5px; letter-spacing:.06em; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(18,34,47,.62)); }
@media (max-width: 1000px) {
  .dx-gallery { grid-template-columns:1fr 1fr; gap:12px; }
  .dx-gallery-item, .dx-gallery-item:nth-child(n+4) { grid-column:auto; aspect-ratio:3/2; }
  .dx-gallery-item:first-child { grid-column:span 2; grid-row:auto; aspect-ratio:3/2; }
  .dx-gallery-item figcaption { font-size:11.5px; padding:22px 12px 10px; }
  .dx-gallery-item:not(:first-child) figcaption { display:none; }
}
@media (prefers-reduced-motion: reduce) { .dx-gallery-item img { transition:none; } }

/* スマホ表示（インライン指定を上書きするため !important） */
@media (max-width: 640px) {
  /* 各セクションの左右余白・上下余白を詰める */
  [style*="max-width:1280px"] { padding-left:20px !important; padding-right:20px !important; }
  section[id] { padding-top:72px !important; padding-bottom:72px !important; }

  /* ヘッダー：ロゴと見学ボタンを1行に収める */
  .dx-head { padding:10px 16px !important; gap:12px !important; }
  .dx-logo { font-size:13.5px !important; letter-spacing:.04em !important; white-space:nowrap; }
  .dx-head-cta { font-size:12px !important; padding:9px 14px !important; white-space:nowrap; }

  /* ファーストビュー：動画の上でも文字が読めるよう白みを強め、ボタンは横幅いっぱいに */
  [data-hero] { min-height:0 !important; padding-top:48px !important; }
  .dx-hero-veil { background:linear-gradient(180deg, rgba(244,248,252,.9) 0%, rgba(244,248,252,.82) 60%, rgba(244,248,252,.6) 100%) !important; }
  [data-hero] h1 { font-size:30px !important; margin-bottom:18px !important; }
  [data-hero] p { font-size:14.5px !important; line-height:2 !important; margin-bottom:26px !important; }
  .dx-hero-ctas { display:grid !important; grid-template-columns:1fr 1fr; gap:10px !important; }
  .dx-hero-ctas a { justify-content:center; padding:14px 12px !important; }
  .dx-hero-ctas a:first-child { grid-column:1 / -1; }
  .dx-herobar-wrap { padding-top:40px !important; padding-bottom:28px !important; }
  [data-tilt] { padding:18px !important; }
  [data-herobar] { grid-template-columns:repeat(3, 1fr) !important; gap:14px 0 !important; }
  [data-herobar] > div:nth-child(-n+2) { grid-column:1 / -1; }
  [data-herobar] > div:nth-child(2) { border-left:0 !important; padding-left:0 !important; }
  [data-herobar] > div:nth-child(n+3) { padding-left:14px !important; }
  [data-herobar] > div:nth-child(3) { border-left:0 !important; padding-left:0 !important; }
  [data-herobar] [style*="font-size:26px"] { font-size:22px !important; }

  /* 01 */
  .dx-quote { padding:22px 20px !important; }
  .dx-quote p { font-size:17px !important; }

  /* 02：カードの余白、情報の流れは縦並び＋縦向きの矢印線に */
  [data-step] { padding:26px 22px !important; }
  [data-step] h3 { font-size:19px !important; }
  [data-c] > svg { display:block; width:48px !important; margin:18px auto; transform:rotate(90deg); }

  /* 03：比較カードを詰め、数字は2列に */
  [data-pair] { padding:20px !important; }
  .dx-stats[data-c] { grid-template-columns:1fr 1fr !important; gap:28px 16px !important; margin-top:32px !important; padding-top:28px !important; }
  .dx-stats [style*="font-size:44px"] { font-size:34px !important; }
  .dx-stats [style*="font-size:13px"] { font-size:12px !important; line-height:1.7; }

  /* 04：タイムライン */
  [data-timeline] { padding-left:28px !important; }
  [data-tl-item] > span { left:-28px !important; }

  /* 05：CTAは横幅いっぱいに */
  .dx-cta { display:grid !important; gap:10px !important; }
  .dx-cta a { justify-content:center; }

  /* フッター */
  footer [data-c] { gap:28px !important; padding-top:40px !important; }
}

/* 幅の狭いスマホ（320px など）：ロゴと見学ボタンが1行に収まるようさらに詰める */
@media (max-width: 360px) {
  .dx-head { gap:8px !important; }
  .dx-logo { font-size:12px !important; letter-spacing:.02em !important; }
  .dx-head-cta { font-size:11.5px !important; padding:8px 12px !important; }
}