@charset "utf-8";
/* ==========================================================================
   Hitec Dx 文書管理 製品ページ
   通常フロー(flex/grid)ベースのセマンティック実装。スタイルは全てこのファイルへ。
   ========================================================================== */

.dx-doc {
  --f-yugo: "Yu Gothic","YuGothic","游ゴシック体","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  --f-meiryo: "Meiryo","メイリオ","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  --f-hira: "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
  --f-century: "Century Gothic","CenturyGothic","Questrial","Yu Gothic",sans-serif;
  --f-din: "DIN Alternate","Oswald","Arial Narrow","Yu Gothic",sans-serif;

  --c-blue:    #008bc0;
  --c-blue-d:  #0069a4;
  --c-teal:    #009a89;
  --c-teal-l:  #31bd9b;
  --c-teal-ll: #07aea8;
  --c-yellow:  #bfa801;
  --c-ink:     #212121;
  --c-gray:    #666;

  font-family: var(--f-yugo);
  color: #1a1a1a;
  line-height: 1.7;
  text-align: left;
  overflow-x: hidden;
  background: #fff;
}
/* サイトテンプレート由来の余白/背景をリセット(直接コンテンツを配置) */
.dx-main { background: #fff; padding: 0; }
.dx-main > .dx-doc { display: block; }
.dx-doc *, .dx-doc *::before, .dx-doc *::after { box-sizing: border-box; }
.dx-doc img { display: block; max-width: 100%; height: auto; }
.dx-doc .dx-step { margin: 0; } /* figure既定の左右40pxマージンを除去(横並びが折り返す問題の対策) */
.dx-doc p { margin: 0; }
.dx-doc h1, .dx-doc h2, .dx-doc h3 { margin: 0; font-weight: 700; }
.dx-doc .br-sp { display: none; } /* スマホ専用の改行(≤600pxで有効) */

/* 中央寄せインナー(コンテンツ幅1000px) */
.dx-doc .dx-inner { max-width: 1040px; margin-inline: auto; padding-inline: 20px; }
.dx-doc .dx-sec { padding-block: 40px; }

/* 見出し共通(緑ライン付き中央見出し MERIT/システム構成図/料金表) */
.dx-doc .dx-lead-ttl { text-align: center; }
/* MERIT: 左右にティールの横線(区切り線)を配置。テキストは中央、線が両側を埋める */
.dx-doc .dx-lead-ttl__en { display: flex; align-items: center; justify-content: center; gap: 40px; font-family: var(--f-din); font-size: 60px; color: var(--c-teal); letter-spacing: .04em; line-height: 1; }
.dx-doc .dx-lead-ttl__en::before, .dx-doc .dx-lead-ttl__en::after { content: ""; flex: 1; height: 2px; background: #459688; }
.dx-doc .dx-lead-ttl__ja { font-family: var(--f-meiryo); font-size: 32px; font-weight: 700; margin-top: 14px; }
.dx-doc .dx-rule-ttl { font-size: 32px; text-align: center; }
.dx-doc .dx-rule-ttl::after { content:""; display:block; width:64px; height:2px; background:#333; margin:16px auto 0; }

/* ============================= 1. Hero ============================= */
.dx-doc .dx-hero__cat { font-size: 13px; color: #555; }
.dx-doc .dx-hero__title { font-size: 26px; margin-top: 4px; }
.dx-doc .dx-hero__visual { margin-top: 22px; border-radius: 4px; overflow: hidden; }

/* ============================= 2. 悩み ============================= */
/* レイヤー構造(奥→手前): 緑パネル < 吹き出し < 作業員。
   次セクション(緑パネル)の上に重ねるため relative + z-index */
.dx-doc .dx-worry { padding-top: 30px; position: relative; z-index: 2; }
.dx-doc .dx-worry__row { position: relative; min-height: 230px; }
/* 作業員は左右端に絶対配置し、吹き出しの端を前面(z:3)で覆う。下端は緑パネルに食い込ませる */
.dx-doc .dx-worry__worker { position: absolute; bottom: -40px; width: 186px; z-index: 3; }
.dx-doc .dx-worry__worker--l { left: -8px; }
.dx-doc .dx-worry__worker--r { right: -8px; }
/* 吹き出し群(z:2)。2行、各行に左右の吹き出しが中央で重なる */
.dx-doc .dx-worry__bubbles { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 0; padding-top: 4px; }
.dx-doc .dx-brow { display: inline-flex; height: 120px; }
.dx-doc .dx-brow--low { margin-top: -20px; }
.dx-doc .dx-bubble {
  display: flex; align-items: center; background: #fff; border: 8px solid var(--c-teal-ll); border-radius: 999px;
  padding: 20px 48px; font-weight: 700; font-size: 19px; white-space: nowrap; text-align: center;
}
.dx-doc .dx-brow:nth-child(1) .dx-bubble--l {
  margin-left: 80px;
}
.dx-doc .dx-brow:nth-child(2) .dx-bubble--l {
  margin-left: 120px;
}
.dx-doc .dx-brow:nth-child(1) .dx-bubble--r {
  right: 120px;
  margin-top: 20px;
}
.dx-doc .dx-brow:nth-child(2) .dx-bubble--r {
  right: 128px;
  margin-top: 40px;
  font-size: 21px;
}
/* 左列=青枠(左の青い作業員に対応)/右列=ティール枠(右の緑の作業員に対応) */
/* 右の吹き出しは左側に食い込ませて中央で重ねる(-14%)＋少し下げてカスケード */
.dx-doc .dx-bubble--l { border-color: var(--c-blue); position: absolute; z-index: 1; }
.dx-doc .dx-bubble--r { border-color: var(--c-teal-ll); position: absolute; z-index: 2; }

/* ============================= 3. 解決導入(緑パネル) ============================= */
/* 悩みセクションの下端に緑パネルを食い込ませる(デザイン同様の重なり) */
.dx-doc .dx-solution { padding-block: 10px 60px; margin-top: 0px; }
.dx-doc .dx-solution__panel {
  /* デザイン準拠: 左=青 → 右=緑 の横グラデーション */
  background: linear-gradient(100deg, #2b8cc2 0%, #34a4a6 50%, #58bd99 100%);
  border-radius: 40px; color: #fff; padding: 48px 40px 80px; text-align: center;
}
.dx-doc .dx-solution__lead { font-size: 20px; font-weight: 700; display: inline-block; padding-bottom: 14px; border-bottom: 2px solid rgba(255,255,255,.9); }
.dx-doc .dx-solution__title { font-family: var(--f-meiryo); font-size: 40px; line-height: 1.35; margin-top: 28px; }
.dx-doc .dx-cards { display: flex; gap: 24px; justify-content: center; margin-top: 40px; }
.dx-doc .dx-card { flex: 1; max-width: 470px; background: #fff; border-radius: 16px; padding: 32px 24px; color: #000; text-align: center; }
.dx-doc .dx-card__ttl { font-family: var(--f-meiryo); font-size: 24px; line-height: 1.7; }
.dx-doc .dx-card--basic .dx-card__ttl { color: var(--c-blue); font-weight: 700; }
.dx-doc .dx-card--cost .dx-card__ttl { color: var(--c-teal-l); font-weight: 700; }
/* 見出し文字の背景にうっすらマーカー(ハイライト)。左=青系/右=緑系。行ごとに文字幅ぶんだけ引く */
.dx-doc .dx-card__mk {
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 4px;
}
.dx-doc .dx-card--basic .dx-card__mk {
  background: linear-gradient(transparent 55%, #d3e7f3 55%, #d3e7f3 94%, transparent 94%);
}
.dx-doc .dx-card--cost .dx-card__mk {
  background: linear-gradient(transparent 55%, #d0edde 55%, #d0edde 94%, transparent 94%);
}
/* リストは各項目(まとまり)を横並びに。注記は該当項目の直下に置く */
.dx-doc .dx-card__list { list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; justify-content: center; align-items: flex-start; gap: 20px;}
.dx-doc .dx-card__list li { position: relative; font-size: 19px; font-weight: 700; line-height: 1.5; }
.dx-doc .dx-card--basic .dx-card__list { color: #279bc8; }
.dx-doc .dx-card--cost .dx-card__list { color: var(--c-teal-l); }
/* 注記「※5ユーザーからのご契約となります」は「・1ユーザー500円から」項目の直下 */
.dx-doc .dx-card__note { display: block; font-size: 10px; margin-top: 4px; font-weight: 700; color: var(--c-teal-l); white-space: nowrap; }
.dx-doc .dx-solution__screens { margin: 40px auto 0; max-width: 660px; }
.dx-doc .dx-solution__body {max-width: 720px; margin: 36px auto 0; font-size: 16px; font-weight: 700; line-height: 1.9; text-align: left; }

/* ============================= 4. ニーズ / 比較表 / 2プラン ============================= */
.dx-doc .dx-needs__ttl { display: flex; align-items: center; gap: 14px; font-size: 32px; color: var(--c-ink); justify-content: center; }
/* 吹き出しアイコン(baloon-icon.png準拠のSVG。本体角丸＋右下の尻尾, 塗り#bfbfbf) */
.dx-doc .dx-needs__ttl::before {
  content: ""; flex: none; width: 62px; height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 174 134'%3E%3Crect width='174' height='120' rx='54' fill='%23bfbfbf'/%3E%3Cpath d='M133 103 173 133 118 117Z' fill='%23bfbfbf'/%3E%3C/svg%3E") no-repeat center / contain;
}
.dx-doc .dx-needs__top { display: flex; gap: 40px; align-items: center; margin-top: 30px; }
.dx-doc .dx-needs__desc { flex: 0 0 350px; font-size: 16px; line-height: 1.9; }

/* 比較表(グリッド罫線なし。ゼブラ配色＋下2行の区切り線) */
.dx-doc .dx-cmp { flex: 1; width: 100%; border-collapse: collapse; font-size: 14px; }
.dx-doc .dx-cmp th, .dx-doc .dx-cmp td { padding: 9px 12px; text-align: center; }
/* ヘッダー: is-basic左上角丸 / is-option右上角丸 */
.dx-doc .dx-cmp thead th { color: #fff; font-weight: 700; }
.dx-doc .dx-cmp thead th.is-blank { background: transparent; }
.dx-doc .dx-cmp thead th.is-basic { background: var(--c-blue); border-radius: 8px 0 0 0; }
.dx-doc .dx-cmp thead th.is-option { background: var(--c-yellow); border-radius: 0 8px 0 0; }
/* tbody: 行ごとに交互配色(左列/基本列/オプション列 それぞれ2階調) */
.dx-doc .dx-cmp tbody th { font-weight: 400; }
.dx-doc .dx-cmp tbody tr:nth-child(odd) th        { background: #f7f7f7; }
.dx-doc .dx-cmp tbody tr:nth-child(odd) td.c-basic { background: #ebf3f8; }
.dx-doc .dx-cmp tbody tr:nth-child(odd) td.c-option{ background: #f8f6eb; }
.dx-doc .dx-cmp tbody tr:nth-child(even) th        { background: #f0f0f0; }
.dx-doc .dx-cmp tbody tr:nth-child(even) td.c-basic { background: #d8e7f1; }
.dx-doc .dx-cmp tbody tr:nth-child(even) td.c-option{ background: #f1edd7; }
/* 下から2番目のtrにborder-top / 一番下のtrにborder-bottom */
.dx-doc .dx-cmp tbody tr:nth-last-child(2) > * { border-top: 1px solid #8c8c8c; }
.dx-doc .dx-cmp tbody tr:last-child > * { border-bottom: 1px solid #8c8c8c; }
.dx-doc .dx-cmp .u-blue { color: var(--c-blue-d); font-weight: 700; }
.dx-doc .dx-cmp .u-yellow { color: var(--c-yellow); font-weight: 700; }

/* 2プラン(基本/オプション) */
.dx-doc .dx-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.dx-doc .dx-plan__tab { color:#fff; font-size:18px; font-weight:700; text-align:center; border-radius:999px; padding:10px; }
.dx-doc .dx-plan--basic .dx-plan__tab { background: var(--c-blue); }
.dx-doc .dx-plan--option .dx-plan__tab { background: var(--c-yellow); }
.dx-doc .dx-plan__fig { text-align: center; margin: 24px 0 12px; }
.dx-doc .dx-plan__fig img { display: inline-block; }
.dx-doc .dx-plan--basic .dx-plan__fig img { height: 150px; }
.dx-doc .dx-plan--option .dx-plan__fig img { height: 150px; }
.dx-doc .dx-plan__ttl { text-align: center; font-size: 24px; line-height: 1.7; font-weight: 700; }
.dx-doc .dx-plan--basic .dx-plan__ttl { color: var(--c-blue-d); }
.dx-doc .dx-plan--option .dx-plan__ttl { color: var(--c-yellow); }
/* 見出し文字背景のマーカー(左=青系/右=黄系) */
.dx-doc .dx-plan__mk { -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 4px; }
.dx-doc .dx-plan--basic .dx-plan__mk  { background: linear-gradient(transparent 55%, #c1d8e8 55%, #c1d8e8 93%, transparent 93%); }
.dx-doc .dx-plan--option .dx-plan__mk { background: linear-gradient(transparent 55%, #f1edd7 55%, #f1edd7 93%, transparent 93%); }
.dx-doc .dx-plan__body { font-size: 16px; margin-top: 16px; line-height: 1.9; }
.dx-doc .dx-plan__links { margin-top: 20px; }
/* リンクのアンダーバーはデフォルト非表示、ホバー時のみ */
.dx-doc .dx-plan__link { text-decoration: none; color: #333; font-weight: 700; font-size: 16px; }
.dx-doc .dx-plan__link:hover { text-decoration: underline; }
/* 基本: 中央寄せ＋下線(青)＋下向き三角矢印2つ */
.dx-doc .dx-plan--basic .dx-plan__link { display: block; text-align: center; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid #78accf; }
.dx-doc .dx-plan--basic .dx-plan__links::after {
  content: ""; display: block; width: 56px; height: 54px; margin: 8px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 58'%3E%3Cpath d='M2 3 30 27 58 3Z' fill='%233d87b9'/%3E%3Cpath d='M2 31 30 55 58 31Z' fill='%233d87b9'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* オプション: 各リンクを1行(左にバッジ＋テキスト, 右にSKIP)・左揃え・下線(薄青) */
.dx-doc .dx-plan--option .dx-plan__links { display: flex; flex-direction: column; }
.dx-doc .dx-plan--option .dx-plan__link { display: flex; align-items: center; gap: 8px; text-align: left; padding: 8px 0; border-bottom: 1px solid #78accf; }
.dx-doc .dx-plan__link .badge { flex: none; background: var(--c-blue); color:#fff; font-size: 13px; border-radius: 999px; padding: 3px 12px; }
.dx-doc .dx-plan__link .skip { color:#333; margin-left: auto; padding-left: 10px; }

/* ============================= 5. 基本機能フロー ============================= */
.dx-doc .dx-flow { margin-top: 20px; }
.dx-doc .dx-flow__bar { background: linear-gradient(90deg, var(--c-blue-d), var(--c-blue)); color:#fff; text-align:center; font-size:24px; font-weight:700; padding:18px; }
/* 背景をセンターで2分割: 左=薄いグレー / 右=薄い青系統 */
/* display:flow-root でBFC化。summaryの負margin-bottomがbodyの高さを実際に縮め、
   分割背景(split-bg)はsummaryの中央で終わる(下半分はmerit背景側にはみ出す=跨ぐ) */
.dx-doc .dx-flow__body { position: relative; display: flow-root; background: linear-gradient(to right, #e6e7e7 0 50%, #eef9f8 50% 100%); padding-block: 40px 0; }
.dx-doc .dx-flow .dx-inner { position: relative; z-index: 1; }
/* 中央に下向き矢印(チェブロン)を連続配置した縦バンド。
   起点=点検前準備ラベル下端(top:46) / 終点=summary上端(dx-flow__stages下端) */
.dx-doc .dx-flow__stages { position: relative; padding-bottom:60px; }
.dx-doc .dx-flow__stages::before {
  content: ""; position: absolute; top: 46px; bottom: 0; left: 50%; transform: translateX(-50%); width: 52px; z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 70'%3E%3Cpath d='M0 0 L26 12 L52 0 L52 58 L26 70 L0 58 Z' fill='%23c9c3cc'/%3E%3C/svg%3E") repeat-y center top / 52px 70px;
}
.dx-doc .dx-flow__stages .dx-stage { position: relative; z-index: 1; }
/* 承認ボックスを持つ点検作業ステージを前面に(承認ボックスを事務所帰社ラベル/完全カットの上に重ねる) */
.dx-doc .dx-flow__stages .dx-stage.dx-stage--approval { z-index: 3; }
.dx-doc .dx-flow__heads { display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.dx-doc .dx-flow__head { color:#fff; font-family:var(--f-meiryo); font-weight:700; font-size:18px; text-align:center; padding:12px; }
.dx-doc .dx-flow__head--before { background:#595757; }
/* 導入後: 青系統のグラデーション */
.dx-doc .dx-flow__head--after { background: linear-gradient(90deg,#3a8bb8,#5bb3a0); }
.dx-doc .dx-stage { margin-top: 28px; }
/* ステージラベル: 中央ピル＋左右に線 */
.dx-doc .dx-stage__label { position: relative; z-index: 5; display:flex; align-items:center; justify-content:center; margin:0 0 16px; }
.dx-doc .dx-stage__label::before, .dx-doc .dx-stage__label::after { content:""; flex:1; height:4px; background:#8c85bb; }
.dx-doc .dx-stage__label span { flex:none; background:#8b7fb5; color:#fff; font-weight:700; font-size:20px; border-radius:999px; padding:6px 30px; }
.dx-doc .dx-stage__cols { display:grid; grid-template-columns:1fr 1fr; gap:64px; }
/* 承認回覧ボックス(青系グラデ): 点検作業after と 事務所帰社after の間を繋ぐよう絶対配置 */
.dx-doc .dx-approval {
  position: absolute; right: 20px; bottom: -64px; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(90deg,#3a8bb8,#5bb3a0); border-radius: 12px; padding: 12px 24px; max-width: 240px;
}
.dx-doc .dx-approval img { height: 58px; }
.dx-doc .dx-approval p { color:#fff; font-weight:700; font-size:15px; margin-top:4px; }
/* 承認ボックス下の下向き矢印(3つ目のafterへ繋ぐ)。design/images/緑下矢印.svg を元に再作成(丸み軸頭＋三角, 塗り#00c5bf) */
.dx-doc .dx-approval::after {
  content: ""; position: absolute; left: 50%; bottom: -40px; transform: translateX(-50%);
  width: 18px; height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25.4 52.4'%3E%3Cpath d='M16.2,39.7V3.5C16.2,1.6,14.7,0,12.7,0s-3.5,1.6-3.5,3.5v36.2H0l12.8,12.8,12.8-12.8h-9.3Z' fill='%2300c5bf'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* ===== 3つ目 after: 完全カット(テキスト左/作業員右, マーカー, 集中線, 紙吹雪) ===== */
.dx-doc .dx-stage__after--done { position: relative; }
/* テキスト(左)と作業員+集中線(右)を左右に離す。デザインの間隔に合わせて余白調整 */
.dx-doc .dx-done { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 10px; padding: 0 6px 0 30px; }
.dx-doc .dx-done__text { position: relative; z-index: 1; text-align: center; flex: none; }
/* leadはややセンターより左に */
.dx-doc .dx-stage__after--done .dx-after-lead { margin-left: 30px; margin-right: auto; }
.dx-doc .dx-done__big { position: relative; display: block; width: fit-content; margin-inline: auto; font-family: var(--f-meiryo); font-weight: 700; font-size: 32px; line-height: 1.2; color: var(--c-teal); }
/* マーカーは中央やや下・太めに。色はデザイン抽出の薄ティールグレー(#d8e8e0) */
.dx-doc .dx-done__mk { -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 10px;
  background: linear-gradient(transparent 30%, #d8e8e0 30%, #d8e8e0 60%, transparent 60%); }
/* 「作業無し」下部に右肩上がりの二重線 */
.dx-doc .dx-done__big::after {
  content: ""; display: block; width: 80%; height: 6px; margin: 4px auto 0; transform: rotate(-4deg) skewX(40deg);
  background:
    linear-gradient(var(--c-teal), var(--c-teal)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--c-teal), var(--c-teal)) 0 4px / 100% 1px no-repeat;
}
.dx-doc .dx-done__thanks { position: relative; display: block; width: fit-content; white-space: nowrap; font-size: 18px; font-weight: 700; margin: 14px auto 0; padding: 0 44px; }
/* お疲れ様でした 左右の斜め線。上端を文字の上端に合わせ、外側上→内側下へ(左＼/右／) */
.dx-doc .dx-done__thanks::before, .dx-doc .dx-done__thanks::after { content:""; position:absolute; top:0; width:46px; height:2px; background:#333; }
.dx-doc .dx-done__thanks::before { left:0;  transform: rotate(56deg);  transform-origin: left top; }
.dx-doc .dx-done__thanks::after  { right:0; transform: rotate(-56deg); transform-origin: right top; }
.dx-doc .dx-done__worker { flex: none; width: 148px; }
/* 紙吹雪: デザイン提供SVGを画像ファイルとして適用(flow_done_confetti.svg) */
.dx-doc .dx-done__text::before {
  content: ""; position: absolute; z-index: -1; inset: -14px -60px;
  background: url("../images/product/dx-bunsho/flow_done_confetti.svg") no-repeat center / contain;
  pointer-events: none;
}
/* リンクアイコン(画像56 = flow_link_icon.png に差し替え) */
.dx-doc .dx-link-icon {
  flex: none; align-self: center; width: 60px; height: 22px;
  background: url("../images/product/dx-bunsho/flow_link_icon.png") no-repeat center / contain;
}
/* 2キャプションを左右均等に */
.dx-doc .dx-step__caps { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; }
.dx-doc .dx-step__caps span { flex: 1; font-size: 11px; line-height: 1.5; }
/* tablet + link-icon + monitors を横一列(折返しなし) */
.dx-doc .dx-steps.dx-steps--row { flex-wrap: nowrap; align-items: center; justify-content: center; gap: 6px; }
.dx-doc .dx-steps.dx-steps--row > * { flex: none; }
.dx-doc .dx-steps.dx-steps--row .dx-link-icon { width: 38px; }
.dx-doc .dx-step--grow { width: 264px; }
.dx-doc .dx-step--grow img { width: 210px; height: auto; margin: 0 auto 6px; }
/* before/after ともに白カード */
.dx-doc .dx-stage__before, .dx-doc .dx-stage__after { background:#fff; border-radius:14px; padding:24px 20px; position:relative; z-index: 6;}
/* 効率化バッジ: 青系統 */
.dx-doc .dx-eff { position:absolute; top:-14px; right:-14px; width:92px; height:92px; border-radius:50%; background:#3d87b9; color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.3; }
.dx-doc .dx-steps { display:flex; align-items:flex-end; justify-content:center; gap:14px; flex-wrap:wrap; }
.dx-doc .dx-step { text-align:center; font-size:14px; font-weight:700; }
.dx-doc .dx-step img { display:inline-block; margin:0 auto 6px; }
/* 効率化after: グラフの右横(下段右寄せ)に作業員画像(画像53) */
/* 効率化after: 作業員画像(画像53)をグラフに重ねて右下に配置。キャプションは作業員左端に合わせ左寄せ */
.dx-doc .dx-graph-wrap { position: relative; display: inline-block; }
.dx-doc .dx-after-graph-worker { position: absolute; left: 48%; bottom: -26px; width: 120px; height: auto; z-index: 1; }
.dx-doc .dx-step__cap--left { text-align: left; white-space: nowrap; }
.dx-doc .dx-step__cap { margin-top:6px; }
/* 4つ目 before は画像が広く、body{min-width:1000px}で 768〜1040px の時に列幅が
   ≈960pxまで縮み折り返してしまう。縮小して常に横並びを維持する(≥1040pxの本来幅では自然サイズ) */
.dx-doc .dx-flow__stages .dx-stage:nth-child(4) .dx-stage__before .dx-steps { flex-wrap: nowrap; }
.dx-doc .dx-flow__stages .dx-stage:nth-child(4) .dx-stage__before .dx-step { min-width: 0; }
/* 点検作業→事務所帰社 を繋ぐグレー矢印(始点が丸)。ソース図の中心下からターゲット画像上へ。
   stage2(z:3)の子なのでstage3(z:1)より前面に描画される */
.dx-doc .dx-step--arrow-a, .dx-doc .dx-step--arrow-b { position: relative; }
.dx-doc .dx-flow-arrow {
  position: absolute; top: 100%; left: 50%; z-index: 8; pointer-events: none; width: 16px;
  /* design/images/下矢印.svg を元に再作成(丸みのある軸頭＋三角矢じり, 塗り#ccc) */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 133'%3E%3Cpath d='M16.5,120.2V3.5c0-1.9-1.6-3.5-3.5-3.5s-3.5,1.6-3.5,3.5v116.7H.2l12.8,12.8,12.8-12.8h-9.3Z' fill='%23cccccc'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
/* 手書き→電子入力: ほぼ垂直〜わずかに左下へ(-31px,+117px) */
.dx-doc .dx-step--arrow-a .dx-flow-arrow { height: 121px; margin-top: 8px; transform: translateX(-50%) rotate(15deg); transform-origin: top center; }
/* 撮影→整理: 左下へ(-74px,+117px) */
.dx-doc .dx-step--arrow-b .dx-flow-arrow { height: 138px; margin-top: 8px; transform: translateX(-50%) rotate(32deg); transform-origin: top center; }
/* after-note/lead: 文字幅ぶんに、うっすらマーカー(作業無しと同色 #d8e8e0)。中央寄せ維持 */
.dx-doc .dx-after-note, .dx-doc .dx-after-lead {
  color:var(--c-teal); font-weight:700; font-size:16px; text-align:center;
  display:block; width:fit-content; max-width:100%; margin-inline:auto;
}
/* マーカー(ハイライト)は inline span 側に付与し、box-decoration-break:clone で
   自然折り返し時も各行の文字幅に沿ってマーカーが折り返すようにする */
.dx-doc .dx-after-mk {
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 6px;
  background: linear-gradient(transparent 45%, #d8e8e0 45%, #d8e8e0 88%, transparent 88%);
}
.dx-doc .dx-after-note { margin-top:14px; }
.dx-doc .dx-after-lead { margin-bottom:14px; }
/* まとめ: 上部にグレー角丸バー(チェブロン着地) / 右・下にボーダー。
   dx-flowとdx-meritの境界(中間)に中心が来るよう下側にはみ出させ、両セクションを跨がせる。
   下へはみ出す量(≒高さの半分)を負のmargin-bottomで確保し、merit背景より前面(z-index:2)に */
.dx-doc .dx-flow__summary {
  position: relative; z-index: 2; margin-bottom: -90px;
  background:#fff; border-right:1px solid #c0c2c2; border-bottom:1px solid #c0c2c2;
  border-radius:12px; padding:48px 5vw 24px; font-size:14px; line-height:1.9;
}
.dx-doc .dx-flow__summary::before {
  content:""; position:absolute; top:0; left:0; right:0; height:32px; background:#c9c3cc; border-radius:12px 12px 0 0;
}

/* ============================= 6. MERIT ============================= */
/* summaryが下半分はみ出してくるぶん、上パディングを増やして見出しをクリア */
.dx-doc .dx-merit { padding: 180px 0 50px; background: #f7f7f7; }
.dx-doc .dx-merit__head { margin-bottom: 30px; }
.dx-doc .dx-feature { margin-top:60px; overflow:hidden; }
.dx-doc .dx-feature__tab { background:linear-gradient(100deg, #2b8cc2 0%, #34a4a6 50%, #58bd99 100%); color:#fff; font-weight:700; font-size:20px; display:inline-block; padding:9px 40px 9px 24px; border-radius:0 24px 0 0; }
.dx-doc .dx-feature__body { display:flex; gap:30px; align-items:center; justify-content: space-between; padding:40px 48px; background:#fff; border-radius:4px; }
.dx-doc .dx-feature__main { flex:0 0 500px; }
.dx-doc .dx-feature__lead { font-size:18px; font-weight:700; line-height:1.7; }
.dx-doc .dx-feature__list { margin-top:16px; }
.dx-doc .dx-feature__list li { list-style:none; font-size:18px; margin:6px 0; padding-left:26px; position:relative; }
/* リストマーカー: 18pxの緑系円の中に白い右向き矢印 */
.dx-doc .dx-feature__list li::before {
  content:""; position:absolute; left:0; top:9px; width:18px; height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%2370c8d0'/%3E%3Cpath d='M7 5 L11.5 9 L7 13 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / contain;
}
.dx-doc .dx-feature__note { font-size:14px; color:#333; margin-top:12px; }
.dx-doc .dx-feature__fig { display:flex; gap:16px; align-items:center; justify-content:center; }
.dx-doc .dx-feature__fig figure { text-align:center; font-size:14px; }
.dx-doc .dx-feature__fig img { display:inline-block; }
.dx-doc .dx-feature__fig figcaption { margin-top:8px; }
/* テレワーク対応 のキャプションを緑系統に */
.dx-doc .dx-feature__fig .is-teal { color: var(--c-teal); font-weight:700; }
/* クラウドによる一括管理: 上段(ヘッドセット+承認印)＋下段に横長チャートを配置 */
.dx-doc .dx-feature--cloud .dx-feature__main { flex: 0 0 380px; }
.dx-doc .dx-feature__fig--cloud { flex: 1; flex-direction: column; gap: 28px; }
.dx-doc .dx-feature__fig--cloud .dx-cloud-row { display:flex; gap:56px; align-items:flex-end; justify-content:center; }
.dx-doc .dx-feature__fig--cloud .dx-cloud-chart { width:100%; margin:0; }
.dx-doc .dx-feature__fig--cloud .dx-cloud-chart img { width:100%; height:auto; }

/* 帳票入力方法 / その他の便利機能 の内部グリッド */
.dx-doc .dx-input-methods { display:flex; gap:40px; justify-content:center; align-items:flex-start; margin-top:40px; flex-wrap:wrap; }
.dx-doc .dx-input-methods figure { margin:0; text-align:center; font-size:16px; color:var(--c-gray); font-weight:700; }
/* 図直下のキャプションを1行分下げる */
.dx-doc .dx-input-methods figcaption { margin-top:24px; }
.dx-doc .dx-input-methods img { display:inline-block; margin-bottom:8px; }
/* エクセル入力キャプション先頭のExcelアイコン(画像52) */
.dx-doc .dx-input-methods .dx-im-ico { width:22px; height:22px; margin:0 6px 0 0; vertical-align:-5px; }
.dx-doc .dx-etc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:10px; }
.dx-doc .dx-etc-grid figure { display:flex; flex-direction:column; text-align:center; font-size:18px; }
/* 画像下のテキスト開始位置を4つで揃えるため、画像枠の高さを150pxに統一。
   object-fit:contain でアスペクト比を保持（横長画像 org_chart 等も歪まない）。
   → 各画像が同じ150px枠を占めるので、キャプションの高さ（開始位置）が揃う。 */
.dx-doc .dx-etc-grid img {
  display:block; width:100%; height:150px; object-fit:contain; object-position:center;
  max-width:100%; margin:0 auto 24px;
}

/* ============================= 7. オプション機能 ============================= */
.dx-doc .dx-option { background:#fff; padding-block:44px 60px; }
.dx-doc .dx-option__tab { display:inline-block; background:var(--c-yellow); color:#fff; font-weight:700; font-size:18px; border-radius:0 999px 999px 0; padding:6px 88px 6px 22px; }
.dx-doc .dx-option__ttl { font-family:var(--f-meiryo); font-size:32px; color:var(--c-ink); margin-top:16px; }
.dx-doc .dx-opt { margin-top:16px; line-height:1.5; }
.dx-doc .dx-opt__head { display:flex; align-items:center; gap:14px; border-bottom:2px solid var(--c-yellow); padding-bottom:12px; }
.dx-doc .dx-opt__badge { background:var(--c-yellow); color:#fff; font-weight:700; font-size:21px; border-radius:999px; padding:4px 18px; flex:none; }
.dx-doc .dx-opt__name { font-size:24px; font-weight:700; }
.dx-doc .dx-opt__contract { font-size:16px; font-weight:700; margin-top:16px; }
.dx-doc .dx-opt__reco { display:flex; align-items:center; gap:20px; margin-top:20px; }
.dx-doc .dx-opt__reco-label { position:relative; font-family:var(--f-din); color:var(--c-teal); font-weight:700; font-size:18px; text-align:center; line-height:1.4; flex:none; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
/* ラベル右上の3本線(強調) design/images/3本線.svg */
.dx-doc .dx-opt__reco-label::after {
  content:""; position:absolute; right:-20px; top:0; width:28px; height:25px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31.5 28.1'%3E%3Crect fill='%23009a89' x='-5.1' y='8.2' width='18.4' height='2' transform='translate(-6 10) rotate(-70.8)'/%3E%3Crect fill='%23009a89' x='14' y='21.1' width='18.3' height='2' transform='translate(-8.3 16) rotate(-32.7)'/%3E%3Crect fill='%23009a89' x='4.9' y='13.2' width='18.4' height='2' transform='translate(-5.6 17.9) rotate(-56.1)'/%3E%3C/svg%3E") no-repeat center/contain;
}
.dx-doc .dx-opt__reco-banner { position:relative; flex:1; background:var(--c-teal); color:#fff; font-weight:700; font-size:20px; text-align:center; border-radius:999px; max-width:720px; margin:auto; padding:16px; }
/* 左向きの吹き出しの尻尾 */
.dx-doc .dx-opt__reco-banner::before {
  content:""; position:absolute; left:-14px; top:50%; transform:translateY(-50%);
  border-right:24px solid var(--c-teal); border-top:12px solid transparent; border-bottom:12px solid transparent;
}
.dx-doc .dx-opt__cols { display:flex; gap:30px; align-items:flex-start; margin-top:40px; }
.dx-doc .dx-opt__desc { flex:1; }
.dx-doc .dx-opt__lead { font-size:18px; line-height:1.9; }
.dx-doc .dx-opt__price { display:flex; align-items:baseline; justify-content: space-between; gap:30px; border-bottom:2px solid var(--c-yellow); padding:4px 0; margin-top:20px; }
.dx-doc .dx-opt__price dt { color:var(--c-yellow); font-weight:700; font-size:20px; }
.dx-doc .dx-opt__price dd { color:var(--c-yellow); font-weight:700; font-size:30px; margin:0; }
.dx-doc .dx-opt__note { font-size:12px; color:#333; margin-top:8px; }
.dx-doc .dx-opt__fig { flex:0 0 480px; }
/* ダイレクト入力: 点検機材(左)＋QR読み取り(右)を並列配置 */
.dx-doc .dx-opt__fig--direct { display:flex; align-items:flex-end; justify-content:center; gap:6px; }
.dx-doc .dx-opt__fig--direct img { height:auto; }
.dx-doc .dx-opt__fig--direct img:first-child { width:200px; }
.dx-doc .dx-opt__fig--direct img:last-child { width:230px; margin-bottom:24px; }
/* 入力限定ユーザ対応: ライセンス契約ユーザ / データ入力限定ユーザ を並列配置 */
.dx-doc .dx-opt__users { display:flex; gap:24px; align-items:flex-end; justify-content:center; }
.dx-doc .dx-opt__user { flex:none; margin:0; text-align:center; }
.dx-doc .dx-opt__user img { height:160px; width:auto; margin:0 auto; }
.dx-doc .dx-opt__utag { display:block; border-radius:999px; color:#fff; font-weight:700; font-size:14px; padding:6px 14px; white-space:nowrap; }
.dx-doc .dx-opt__utag--license { background:#3880b8; }
.dx-doc .dx-opt__utag--data { background:#b8a038; }
.dx-doc .dx-opt__ucap { margin-top:10px; font-size:14px; font-weight:700; color:var(--c-ink); }
/* 契約パターンの比較(矢印付き) */
.dx-doc .dx-opt__compare { margin-top:12px; }
.dx-doc .dx-opt__cmp { display:flex; align-items:center; gap:12px; font-weight:700; font-size:13px; margin-top:4px; white-space:nowrap; }
.dx-doc .dx-opt__cmp--blue { color:#3880b8; }
.dx-doc .dx-opt__cmp--olive { color:#b8a038; }
.dx-doc .dx-opt__cmp-arrow { flex:none; height:2px; background:currentColor; position:relative; }
.dx-doc .dx-opt__cmp--blue .dx-opt__cmp-arrow { width:56px;}
.dx-doc .dx-opt__cmp--olive .dx-opt__cmp-arrow { width:20px;}
.dx-doc .dx-opt__cmp-arrow::after { content:""; position:absolute; right:-1px; top:50%; transform:translateY(-50%); border-left:9px solid currentColor; border-top:5px solid transparent; border-bottom:5px solid transparent; }
.dx-doc .dx-opt__reco-txt { margin-top:8px; font-size:15px; color:var(--c-ink); }
.dx-doc .dx-point { margin:36px auto 0; max-width:800px; }
.dx-doc .dx-point__ttl { text-align:center; color:var(--c-teal); font-weight:700; font-size:20px; position:relative; }
.dx-doc .dx-point__ttl span { background:#fff; padding:0 20px; position:relative; z-index:1; }
.dx-doc .dx-point__ttl::before { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#999; }
.dx-doc .dx-point__grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; }
.dx-doc .dx-point__card { background:linear-gradient(90deg,var(--c-blue-d),var(--c-teal-l)); color:#fff; font-weight:700; text-align:center; border-radius:12px; padding:18px; font-size:16px; line-height:1.5; }
.dx-doc .dx-point__card--wide { grid-column:1 / -1; }

/* 役割表 */
.dx-doc .dx-role__wrap { margin-bottom:80px; }
/* 自前スクロールバーはSP限定表示（PCでは非表示） */
.dx-doc .dx-role__sb { display:none; }
/* 列間だけに隙間を空ける（border-spacingは外周にも入るため使わない）:
   各セルの右側に8pxの透明ボーダーで隙間を作り、最終列は隙間なし＝外周に余白が出ない。
   background-clip:padding-box で背景が隙間(透明ボーダー)に染み出さないようにする。 */
.dx-doc .dx-role { width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; margin-top:78px; font-size:13px; text-align:center; }
/* 1列目(行ラベル)を広め、残り5列(顔写真列)は均等 */
.dx-doc .dx-role th:first-child, .dx-doc .dx-role td:first-child { width:190px; }
.dx-doc .dx-role th, .dx-doc .dx-role td { border:none; border-right:8px solid transparent; background-clip:padding-box !important; padding:8px 6px; }
/* 最終列(入力限定ユーザ)は右の隙間なし＝右端を揃える */
.dx-doc .dx-role th:last-child, .dx-doc .dx-role td:last-child { border-right:0; }
/* 顔写真行 */
.dx-doc .dx-role thead .fig td { background:transparent; padding-bottom:0; vertical-align:bottom; position:relative; }
/* 全アイコンを同じ高さ(96px)に。横長の role_data_user.png はセル幅で潰さず自然幅で表示し、
   はみ出す分は表全体を横スクロール(≤767pxの .dx-spec__wrap overflow-x)で見せる */
.dx-doc .dx-role thead .fig img { height:96px; width:auto; max-width:none; display:inline-block; }
/* 入力限定ユーザ列の写真上に吹き出し。絶対配置で列幅を広げない(中央にオーバーレイ) */
.dx-doc .dx-role__bubble { position:absolute; right:0; bottom:calc(100% - 6px); background:#b8a038; color:#fff; font-weight:700; font-size:12px; line-height:1.4; border-radius:8px; padding:7px 10px; white-space:nowrap; z-index:2; }
.dx-doc .dx-role__bubble::after { content:""; position:absolute; left:50%; bottom:-10px; transform:translateX(-50%); border-top:16px solid #b8a038; border-left:8px solid transparent; border-right:8px solid transparent; }
/* ラベル行: 角丸ピル(spanが背景)＋下スペース(th透明・padding-bottom) */
.dx-doc .dx-role thead .lbl th { background:transparent; padding:0 4px 14px; vertical-align:baseline; }
.dx-doc .dx-role thead .lbl th:first-child { padding:0; }
.dx-doc .dx-role thead .lbl th span { display:block; border-radius:8px; color:#fff; font-weight:700; padding:9px 10px; white-space:nowrap; }
.dx-doc .dx-role .r-admin span { background:#58b898; }
.dx-doc .dx-role .r-worker span { background:#3880b8; }
.dx-doc .dx-role .r-mgr span { background:#8880b8; }
.dx-doc .dx-role .r-dec span { background:#3880b8; }
.dx-doc .dx-role .r-input span { background:#b8a038; }
/* 行ラベル列(左) */
.dx-doc .dx-role tbody th { text-align:left; font-weight:400; white-space:nowrap; padding-left:6px; padding-right:8px; }
.dx-doc .dx-role tbody th .rl-act { float:right; }
/* グループ区切りの上ボーダー（inset影で padding-box 内に描画＝列間の透明隙間に線が掛からない） */
.dx-doc .dx-role tbody th.rl-top { box-shadow: inset 0 1px 0 #c8c8c8; }
.dx-doc .dx-role tbody tr:nth-child(odd) th { background:#f5f5f5; }
.dx-doc .dx-role tbody tr:nth-child(even) th { background:#fbfbfb; }
/* データ列: 列ごとの色調、行で濃淡交互(奇=薄/偶=濃) */
.dx-doc .dx-role tbody tr:nth-child(odd) td:nth-child(2){background:#eff8f5;} .dx-doc .dx-role tbody tr:nth-child(even) td:nth-child(2){background:#dff1eb;}
.dx-doc .dx-role tbody tr:nth-child(odd) td:nth-child(3){background:#ebf3f8;} .dx-doc .dx-role tbody tr:nth-child(even) td:nth-child(3){background:#d8e7f1;}
.dx-doc .dx-role tbody tr:nth-child(odd) td:nth-child(4){background:#f3f3f8;} .dx-doc .dx-role tbody tr:nth-child(even) td:nth-child(4){background:#e8e7f1;}
.dx-doc .dx-role tbody tr:nth-child(odd) td:nth-child(5){background:#ebf3f8;} .dx-doc .dx-role tbody tr:nth-child(even) td:nth-child(5){background:#d8e7f1;}
/* 入力限定ユーザ列: より濃いオリーブ＋交互、◯セルは最濃、周囲を太枠で強調 */
.dx-doc .dx-role tbody tr:nth-child(odd) .col-input{background:#f1edd7;} .dx-doc .dx-role tbody tr:nth-child(even) .col-input{background:#e6dcb4;}
.dx-doc .dx-role tbody .col-input.is-on{background:#ddd49e;}
.dx-doc .dx-role tbody .col-input{ border-left:3px solid #b8a038; border-right:3px solid #b8a038; }
.dx-doc .dx-role tbody tr:first-child .col-input{ border-top:3px solid #b8a038; }
.dx-doc .dx-role tbody tr:last-child .col-input{ border-bottom:3px solid #b8a038; }

/* ============================= 8. 製品機能一覧表 ============================= */
.dx-doc .dx-spec { padding-block:46px; }
.dx-doc .dx-spec__ttl { font-size:26px; text-align:center; margin-bottom:24px; }
.dx-doc .dx-spec__wrap { overflow-x:auto; }
/* カード: タイトルバー → シェブロン → 表 → 下部アクセントバー */
.dx-doc .dx-spec__bar { background:linear-gradient(90deg,var(--c-blue-d),var(--c-teal-l)); color:#fff; text-align:center; font-weight:700; font-size:20px; padding:16px; border-radius:14px 14px 0 0; }
.dx-doc .dx-spec__chev { height:26px; background:linear-gradient(90deg,#84aed8,#8fc7ae); position:relative; margin-bottom:8px; }
.dx-doc .dx-spec__chev::after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-top:11px solid #fff; border-left:10px solid transparent; border-right:10px solid transparent; }
.dx-doc .dx-spec__foot { height:8px; background:linear-gradient(90deg,var(--c-blue-d),var(--c-teal-l)); border-radius:0 0 14px 14px; margin-bottom:64px; }
.dx-doc .dx-spec table { width:100%; border-collapse:collapse; font-size:14px; }
.dx-doc .dx-spec th, .dx-doc .dx-spec td { border:2px solid #fff; padding:7px 10px; white-space: nowrap;}
.dx-doc .dx-spec thead th { color:#fff; font-weight:700; text-align:center; vertical-align:baseline; }
/* ヘッダー: グループ行(濃)/サブ行(淡)で色分け */
.dx-doc .dx-spec thead tr:first-child .grp-name { background:var(--c-teal); }
.dx-doc .dx-spec thead tr:last-child .grp-name { background:#a2cac3; }
.dx-doc .dx-spec thead .grp-basic { background:#3d87b9; }
.dx-doc .dx-spec thead tr:first-child .grp-option { background:#baa739; }
.dx-doc .dx-spec thead tr:last-child .grp-option { background:#d3c98e; }
/* 本文: 左=薄緑 / 詳細2=白系 / 基本=薄青(行で交互) / オプション=薄オリーブ(行で交互) */
.dx-doc .dx-spec tbody th { color:var(--c-ink); font-weight:700; text-align:left; background:#daeae7; }
.dx-doc .dx-spec tbody th + th { background:#e8f0ee; }
/* 詳細グループ見出し（col1がrowspanする行でth+thに該当しないもの）を #e8f0ee に是正 */
.dx-doc .dx-spec tbody th.cA { background:#e8f0ee; }
/* 詳細項目セル（col3）の交互カラー：指定行を #daeae7 */
.dx-doc .dx-spec tbody td.cB { background:#daeae7; }
.dx-doc .dx-spec tbody td { background:#eaf0f0; }
.dx-doc .dx-spec tbody td.mark { text-align:center; }
.dx-doc .dx-spec tbody td.c-basic { background:#eaf0f6; }
.dx-doc .dx-spec tbody tr:nth-child(even) td.c-basic { background:#d8e4f0; }
.dx-doc .dx-spec tbody td.c-option { background:#f6f6ea; }
.dx-doc .dx-spec tbody tr:nth-child(even) td.c-option { background:#f0ead2; }
/* 製品機能一覧表(B): SPは表を画像で表示。PCでは画像を非表示（テーブル表示） */
.dx-doc .dx-spec__imgwrap { display:none; }

/* ============================= 9. システム構成図 ============================= */
.dx-doc .dx-system { background:#f1f1f1; padding-block:80px; }
.dx-doc .dx-system__desc { text-align:center; font-weight:700; font-size:18px; margin-top:22px; }
.dx-doc .dx-system__fig { margin:30px auto 0; max-width:960px; }
.dx-doc .dx-system__notes { max-width:640px; margin:48px auto 0;}
.dx-doc .dx-system__notes p {font-size:14px; line-height:1.9; }

/* ============================= 10. 料金表 ============================= */
.dx-doc .dx-price { padding-block:50px; }
.dx-doc .dx-price__grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px; }
.dx-doc .dx-price__plan h3 { display:flex; align-items:center; gap:10px; font-size:18px; margin-bottom:14px; }
/* h3先頭の人アイコン(青#018abf)。単数=人のアイコン / 複数=人々のアイコン */
.dx-doc .dx-price__pic { flex:none; display:inline-block; }
.dx-doc .dx-price__pic--single { width:18px; height:32px; background:url("../images/product/dx-bunsho/price_user_single.svg") no-repeat center/contain; }
.dx-doc .dx-price__pic--multi { width:38px; height:28px; background:url("../images/product/dx-bunsho/price_user_multi.svg") no-repeat center/contain; }
/* caption/見出し/料金セル同士に少し間隔(separate + border-spacing) */
.dx-doc .dx-ptable { width:100%; border-collapse:separate; border-spacing:3px 5px; border:none; font-size:13px; text-align:center; }
/* 表内のsup(※)は白 */
.dx-doc .dx-ptable sup { color:#fff; }
/* captionの左上・右上を角丸に */
.dx-doc .dx-ptable caption { caption-side:top; background:var(--c-blue); color:#fff; font-weight:700; padding:8px; font-size:15px; border-radius:8px 8px 0 0; }
.dx-doc .dx-ptable .sub th { background:#8bbdd6; color:#fff; font-weight:700; padding:8px 6px; vertical-align:middle; }
/* 料金セルは薄いグレー(hiも同色、文字色のみ強調) */
.dx-doc .dx-ptable .val td { padding:12px 6px; font-weight:700; background:#e8f1f4; }
.dx-doc .dx-ptable .val td.hi { background:#e8f1f4; color:var(--c-blue-d); }
/* その他: 基本料金表と分離し間隔をとる。2列を50%/50%に、見出しはティール */
.dx-doc .dx-ptable--other { table-layout:fixed; margin-top:16px; }
.dx-doc .dx-ptable--other caption { background:var(--c-teal); }
.dx-doc .dx-ptable .osub th { background:#a6d4c9; color:#fff; font-weight:700; padding:8px 6px; }
.dx-doc .dx-ptable .oval td { padding:10px; font-weight:700; background: #e8f1f4;}
.dx-doc .dx-price__notes { margin-top:28px;}
/* 「※n 」ぶんのぶら下げインデント(折り返し時に本文左端を揃える) */
.dx-doc .dx-price__notes p { padding-left:2.2em; font-size:13px; line-height:1.9; text-indent:-2.2em; }
/* dx-ptable1枚(グリッド1カラム=50%-gap/2)と同じ幅・左寄せ */
.dx-doc .dx-price__opt { margin-top:34px; width:calc(50% - 10px); }
.dx-doc .dx-price__opt h3 { font-size:22px; margin-bottom:12px; }
.dx-doc .dx-price__opt-bar { background:var(--c-yellow); color:#fff; font-weight:700; font-size:16px; padding:10px 16px; border-radius: 8px 8px 0 0;}
.dx-doc .dx-price__opt-bar sup { color:#fff; }
.dx-doc .dx-price__opt-val { background:#f3eec6; text-align:center; font-weight:700; padding:10px; margin-top:5px; }
.dx-doc .dx-price__opt-note { font-size:13px; margin-top:10px; }

/* ============================= レスポンシブ ============================= */
/* ============================= レスポンシブ(スマホ/タブレット) =============================
   ブレイクポイント: 1000px / 820px / 600px
   - 1000px: PCコンテンツ幅(1000px)未満。レイアウトは維持しつつ流動化(はみ出し防止)。
   - 820px : タブレット。2カラムのグリッドを1カラムへ(フローは2カラム維持)。
   - 600px : スマホ。フロー縮小・矢印非表示・表は横スクロール等。
   sp_1.pdf / sp_2.pdf 準拠。 */
/* サイト本体は body{min-width:1000px}(style.css)で 768px以上は常に1000px固定。
   実際に流動化するのは 767px 以下なので、モバイル用の変形は全て 767px 以下に統一する。
   (768〜1000px は承認済みのデスクトップ・レイアウトをそのまま表示) */
@media (max-width: 767px){
  .dx-doc .dx-inner {padding-inline: 5vw;}
  /* コンテンツが流動化。要素がはみ出さないよう調整 */
  .dx-doc .dx-sec { padding-block:34px; }
  .dx-doc .dx-merit { padding-block:160px 34px; }
  /* フロー内「端末+リンク+モニタ」の横一列は折り返し可に(列幅縮小時のはみ出し防止) */
  .dx-doc .dx-steps.dx-steps--row { flex-wrap:wrap; justify-content:center; }
  .dx-doc .dx-steps.dx-steps--row .dx-step--grow { flex:1 1 100%; }
  /* 大きな余白・見出しを微調整 */
  .dx-doc .dx-hero__title { font-size:24px; }
  .dx-doc .dx-solution__title { font-size:34px; }
}
/* 悩みの吹き出し: サイト本体は body{min-width:1000px} で 768px以上は1000px固定
   (横スクロール)。実際に流動化するのは style.css の 767px ブレイクポイント以下なので、
   吹き出しレイアウトの切替もそこに合わせる。
   768〜1000px は承認済みのデスクトップ配置(1000px内に収まる)を維持し、
   デスクトップの吹き出し(絶対配置)は本体幅が1000px未満に縮むと重なって読みにくいため、
   「作業員を左右・吹き出しは1行ピルの左右カスケード」への切替は 1024px 以下で行う(clamp で 320〜1024px を滑らかに) */
@media (max-width: 1024px){
  .dx-doc .dx-worry { padding-top:16px; }
  /* 行(作業員の枠)は640px、吹き出しの塊は400pxで各々中央寄せ。作業員を広めに、吹き出しは密に */
  .dx-doc .dx-worry__row { min-height:0; position:relative; max-width:640px; margin-inline:auto; padding-bottom:clamp(90px,16vw,140px); }
  .dx-doc .dx-worry__worker { position:absolute; bottom:-12px; width:clamp(112px,16vw,150px); z-index:1; }
  .dx-doc .dx-worry__worker--l { left:-8px; right:auto; float:none; }
  .dx-doc .dx-worry__worker--r { right:-8px; left:auto; float:none; }
  .dx-doc .dx-worry__bubbles { position:relative; z-index:2; display:block; max-width:400px; margin-inline:auto; padding-top:clamp(24px,5vw,44px); }
  .dx-doc .dx-brow { display:block; height:auto; position:relative; margin:0; }
  .dx-doc .dx-brow--low { margin-top:clamp(6px,1.4vw,12px); }
  .dx-doc .dx-bubble { position:static; display:block; width:fit-content; max-width:100%;
    white-space:nowrap; font-size:clamp(12px,2vw,16px); border-width:clamp(5px,0.8vw,7px);
    padding:clamp(8px,1.4vw,13px) clamp(16px,3vw,32px); margin:0; }
  /* デザイン用の固定オフセット(nth-child)を無効化して左右カスケードに上書き */
  .dx-doc .dx-brow:nth-child(1) .dx-bubble--l,
  .dx-doc .dx-brow:nth-child(2) .dx-bubble--l { margin-left:clamp(14px,4vw,44px); margin-right:auto; }
  .dx-doc .dx-brow:nth-child(1) .dx-bubble--r,
  .dx-doc .dx-brow:nth-child(2) .dx-bubble--r {
    right:auto; margin-left:auto; margin-right:clamp(6px,2vw,20px);
    margin-top:clamp(-6px,-0.8vw,-2px); font-size:clamp(12px,2vw,16px); }
}
@media (max-width: 767px){
  /* 非フローのグリッドを1カラムに */
  .dx-doc .dx-needs__top, .dx-doc .dx-plans, .dx-doc .dx-feature__body,
  .dx-doc .dx-point__grid, .dx-doc .dx-price__grid, .dx-doc .dx-opt__cols { grid-template-columns:1fr; display:block; }
  .dx-doc .dx-plan--basic { margin-bottom:32px; }
  .dx-doc .dx-point__grid > * { margin-bottom:16px; }
  .dx-doc .dx-feature__body { display:block; padding: 32px 20px; }
  .dx-doc .dx-feature__fig { margin-top:20px; justify-content:center; }
  .dx-doc .dx-needs__desc { flex:none; margin-bottom: 20px; }
  .dx-doc .dx-needs__ttl { font-size:24px; }
  /* 解決パネル: カード縦積み */
  .dx-doc .dx-solution__panel { padding:32px 18px 44px; }
  /* リードは「そのようなお悩みは / secHitecDx…簡単解決！」が2行に収まるサイズに */
  .dx-doc .dx-solution__lead { font-size:14px; padding-bottom:12px; }
  /* タイトルは「…最小限、/ だから…始められる。」が各1行で2行に収まるサイズに */
  .dx-doc .dx-solution__title { font-size:18px; margin-top:20px; }
  .dx-doc .dx-cards { flex-direction:column; align-items:stretch; }
  .dx-doc .dx-card { max-width:none; padding:24px 16px; }
  /* カード見出し・箇条書きは各行1行で収まるサイズに(2項目は横並び維持) */
  .dx-doc .dx-card__ttl { font-size:16px; }
  .dx-doc .dx-card__list { gap:8px; }
  .dx-doc .dx-card__list li { font-size:14px; white-space:nowrap; }
  /* メリット */
  .dx-doc .dx-etc-grid { grid-template-columns:1fr 1fr; }
  .dx-doc .dx-etc-grid figure {font-size: 14px;}
  .dx-doc .dx-etc-grid img {margin: 0 auto 10px;}
  .dx-doc .dx-input-methods { flex-direction:column; align-items:center; gap:26px; }
  .dx-doc .dx-feature--cloud .dx-feature__main { flex:none; }
  .dx-doc .dx-feature__fig--cloud { flex:none; }
  /* オプション見出し: バッジと名称を縦積み・左寄せ */
  .dx-doc .dx-opt__head { flex-direction:column; align-items:flex-start; gap:8px; }
  /* オプション: 説明と図は縦積み(ユーザ2枚の横並びは維持) */
  .dx-doc .dx-opt__fig { flex:none; margin-top:16px; }
  /* ユーザ2枚は横並び維持のまま、画像高さ・ラベル/注記を縮小して 320px でも収める */
  .dx-doc .dx-opt__users { gap:10px; }
  .dx-doc .dx-opt__user img { height:clamp(96px,26vw,160px); }
  .dx-doc .dx-opt__utag { font-size:clamp(10px,2.8vw,14px); padding:6px 10px; }
  .dx-doc .dx-opt__ucap { font-size:clamp(11px,3vw,14px); }
  /* ダイレクト入力の機材＋QRは列幅に対する割合で縮小(横並び・比率維持) */
  .dx-doc .dx-opt__fig--direct img:first-child { width:44%; }
  .dx-doc .dx-opt__fig--direct img:last-child { width:52%; margin-bottom:14px; }
  .dx-doc .dx-opt__reco { flex-direction:column; gap:12px; }
  .dx-doc .dx-opt__reco-banner { font-size:16px; padding:12px 16px; margin: 20px auto 0; border-radius: 16px;}
  .dx-doc .dx-opt__reco-banner::before { left: 50%; top: -20px; transform: translateX(-50%) rotate(90deg);}
  /* 料金: オプションバーは全幅 */
  .dx-doc .dx-price__opt { width:100%; }
  /* 権限表・製品機能一覧表は横スクロール(min-widthで潰さず、ラップをスクロール) */
  .dx-doc .dx-spec__wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  /* 表は内容に合わせて広げ(画像は同一高さ・ラベルは折り返さない)、はみ出しは横スクロール */
  .dx-doc .dx-role { table-layout:auto; width:auto; min-width:100%; font-size:12px;}
  .dx-doc .dx-spec table { min-width:720px; }
  /* 権限表: SPでは「自前の常時表示スクロールバー」(dx-role-scrollbar.js)を使う。
     ネイティブのバーはタッチ端末(iOS Safari等)で常時表示できないため隠す。 */
  .dx-doc .dx-role__wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;              /* Firefox: ネイティブバー非表示 */
    margin-bottom: 6px;
  }
  .dx-doc .dx-role__wrap::-webkit-scrollbar { display: none; height: 0; } /* WebKit: 非表示 */
  /* 自前スクロールバー（トラック＋つまみ）。操作前から常時表示 */
  .dx-doc .dx-role__sb { display: block; position: relative; height: 6px; margin: 0 0 40px; border-radius: 999px; background: #e6e6e6; touch-action: none; }
  .dx-doc .dx-role__sb.is-hidden { display: none; }
  .dx-doc .dx-role__sb-thumb { position: absolute; top: 0; left: 0; height: 100%; min-width: 24px; border-radius: 999px; background: #b7b7b7; cursor: grab; }

  /* ===== 製品機能一覧表(B): SPは表を画像で幅100%表示（横スクロール廃止・タップで拡大） ===== */
  .dx-doc .dx-spec .dx-spec__wrap,
  .dx-doc .dx-spec .dx-spec__chev { display:none; }
  .dx-doc .dx-spec__bar { border-radius:14px 14px 0 0; }
  .dx-doc .dx-spec__imgwrap { display:block; position:relative; cursor:zoom-in; }
  .dx-doc .dx-spec__img { display:block; width:100%; height:auto; }
  /* タップで拡大できることを示すヒント（画像中央のピル）。タップは下の画像へ透過 */
  .dx-doc .dx-spec__imghint { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:999px; background:rgba(0,0,0,.62); color:#fff; font-size:13px; font-weight:700; white-space:nowrap; pointer-events:none; box-shadow:0 2px 10px rgba(0,0,0,.25); }
  .dx-doc .dx-spec__imghint svg { display:block; }
  .dx-doc .dx-spec__foot { margin-top:0; }
  /* 悩みの吹き出しレイアウトは max-width:1000px の流動カスケードで一括対応(clamp) */
}

/* 製品機能一覧表(B): タップ拡大オーバーレイ（dx-spec-zoom.js が生成）。全幅で常時定義 */
.dx-spec__zoom { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.94); }
.dx-spec__zoom-scroll { position:absolute; inset:0; overflow:auto; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y pinch-zoom; padding:16px; }
.dx-spec__zoom-scroll img { display:block; width:min(200vw, 1968px); max-width:none; max-height:none; height:auto; margin:0 auto; }
.dx-spec__zoom-close { position:fixed; top:10px; right:14px; z-index:1; display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:none; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:26px; line-height:1; cursor:pointer; }

/* スマホ: フローを2カラム維持しつつ縮小、コネクタ矢印は非表示 */
/* サイト本体の流動化は 767px 以下(body{min-width:1000px}が外れる点)なので、
   モバイル用のフロー等のデザインも 767px 以下に統一する(601〜767px の崩れ対策) */
@media (max-width: 767px){
  .dx-doc .dx-flow .dx-inner { padding-inline:10px; }
  .dx-doc .dx-flow__bar { font-size:18px; padding:12px; }
  .dx-doc .dx-flow__heads { gap:10px; }
  .dx-doc .dx-flow__head { font-size:12px; padding:8px 4px; }
  /* before/after を必ず 50/50 に(min-width:auto による片寄りを防ぐ) */
  .dx-doc .dx-stage__cols { gap:10px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  /* 高さが揃うグリッド行内で、各カラムの内容を上下中央に配置 */
  .dx-doc .dx-stage__before, .dx-doc .dx-stage__after { min-width:0; padding:20px 8px; display:flex; flex-direction:column; justify-content:center; }
  .dx-doc .dx-stage__label span { font-size:15px; padding:5px 16px; }
  /* 画像を列幅に収まるよう縮小。601〜767px でも小さくなり過ぎないよう clamp でスケール */
  .dx-doc .dx-flow .dx-step img, .dx-doc .dx-stage__after img { height:auto; max-height:clamp(64px,11vw,104px); width:auto; max-width:100%; }
  .dx-doc .dx-done__worker { height:auto; max-height:clamp(78px,13vw,120px); width:auto; }
  .dx-doc .dx-steps { gap:8px; }
  .dx-doc .dx-steps.dx-steps--row { flex-wrap:wrap; }
  .dx-doc .dx-step__cap, .dx-doc .dx-step__caps span { font-size:11px; line-height:1.4; }
  /* 2つ目 after の2キャプションはSPでは縦積み(横並びで潰れるのを防ぐ) */
  .dx-doc .dx-step__caps { flex-direction:column; align-items:center; gap:6px; }
  /* コネクタ矢印(手書き→電子入力 等)は非表示 */
  .dx-doc .dx-flow-arrow { display:none; }
  /* チェブロン帯を細く */
  .dx-doc .dx-flow__stages::before { width:26px; background-size:26px auto; }
  /* 効率化バッジ縮小 */
  .dx-doc .dx-eff { width:56px; height:56px; font-size:9px; top:-6px; right:-6px; }
  /* リード文はデザイン(SP)通り左上に左寄せ配置(バッジは右上・1行目は短く重ならない) */
  .dx-doc .dx-after-lead { margin:0 auto 6px 0; text-align:left; font-size:13px; line-height:1.5; }
  .dx-doc .dx-stage__after--done .dx-after-lead { margin: 0 auto 32px; }
  /* 注記(1つ目 after 下部)は中央のまま */
  .dx-doc .dx-after-note { font-size:12px; }
  /* 承認回覧ボックスは列内に通常配置 */
  .dx-doc .dx-approval { position:static; max-width:none; margin-top:12px; }
  .dx-doc .dx-approval::after {
    bottom: -80px;
    width: 36px;
    height: 80px;
  }
  .dx-doc .dx-approval p {font-size:10px;}
  .dx-doc .dx-done__big { font-size:22px; }
  /* 紙吹雪(confetti)の横方向のはみ出しを抑え、カード内に収める(デスクトップは-60px) */
  .dx-doc .dx-done__text::before { inset:-12px -6px; }
  /* 「作業無し / お疲れ様でした」を列幅(≒172px)に収める */
  .dx-doc .dx-done { padding:0 6px; gap:20px; }
  .dx-doc .dx-done__thanks { font-size:15px; padding:0 clamp(10px,3.5vw,24px); }
  .dx-doc .dx-done__thanks::before, .dx-doc .dx-done__thanks::after { width:clamp(16px,3.5vw,26px); }
  .dx-doc .dx-after-graph-worker { width:80px; }
  /* オプションの契約比較は折り返し可 */
  .dx-doc .dx-opt__cmp { font-size:11px; gap:6px; white-space:normal; }
  /* 見出し */
  .dx-doc .dx-hero__title { font-size:22px; }
  .dx-doc .dx-lead-ttl__en { font-size:44px; gap:20px; }
  .dx-doc .dx-lead-ttl__ja { font-size:24px; }
  .dx-doc .dx-rule-ttl { font-size:26px; }
  /* スマホ専用改行を有効化 */
  .dx-doc .br-sp { display:inline; }
  /* ニーズ見出し: アイコンを縮小し2行目が1行に収まるように */
  .dx-doc .dx-needs__ttl { font-size:20px; gap:10px; }
  .dx-doc .dx-needs__ttl::before { width:44px; height:34px; }
  /* 比較表は全幅 */
  .dx-doc .dx-cmp { width:100%; }
  /* 2プランのリンク: badgeを改行して一段下げ、本文＋SKIPは横並び維持 */
  .dx-doc .dx-plan--option .dx-plan__link { flex-wrap:wrap; font-size:14px; }
  .dx-doc .dx-plan--option .dx-plan__link .skip { padding-left:6px; }
  /* --- フロー各ステージの並び(スマホ) --- */
  /* 1つ目: 1・2番目は横並び、3番目を次の行へ */
  .dx-doc .dx-flow__stages .dx-stage:nth-child(1) .dx-stage__before .dx-steps { flex-wrap:wrap; justify-content:center; }
  .dx-doc .dx-flow__stages .dx-stage:nth-child(1) .dx-stage__before .dx-step:nth-child(3) { flex-basis:100%; }
  /* 1つ目の after も画像を縦並び */
  .dx-doc .dx-flow__stages .dx-stage:nth-child(1) .dx-stage__after .dx-steps { flex-direction:column; align-items:center; }
  /* 2つ目・3つ目の before は画像を縦並び */
  .dx-doc .dx-flow__stages .dx-stage:nth-child(2) .dx-stage__before .dx-steps,
  .dx-doc .dx-flow__stages .dx-stage:nth-child(3) .dx-stage__before .dx-steps,
  .dx-doc .dx-flow__stages .dx-stage:nth-child(4) .dx-stage__before .dx-steps { flex-direction:column; flex-wrap:nowrap; align-items:center; }
  /* 3つ目の after: 作業員を一段下げる(テキストの下へ) */
  .dx-doc .dx-flow__stages .dx-stage:nth-child(3) .dx-stage__after .dx-done { flex-direction:column; }
  /* 4つ目の after: 画像を縦並び */
  .dx-doc .dx-flow__stages .dx-stage:nth-child(4) .dx-stage__after .dx-steps { flex-direction:column; align-items:center; }
}
@media (max-width: 480px){
  .dx-doc .dx-worry {padding-top: 0;}
  .dx-doc .dx-worry__row {padding-bottom: 36px;}
  .dx-doc .dx-worry__bubbles {max-width: 300px;}
  .dx-doc .dx-worry__worker {width: 80px; bottom: -32px;}
  .dx-doc .dx-brow:nth-child(1) .dx-bubble--l, .dx-doc .dx-brow:nth-child(2) .dx-bubble--l {margin-left:auto;}
  .dx-doc .dx-brow:nth-child(1) .dx-bubble--r, .dx-doc .dx-brow:nth-child(2) .dx-bubble--r {margin-right:auto;}
  .dx-doc .dx-solution__body {font-size: 14px;}
  .dx-doc .dx-needs__desc {font-size: 14px;}
  .dx-doc .dx-plan__ttl {font-size: 21px;}
  .dx-doc .dx-plan__body {font-size: 14px;}
  .dx-doc .dx-feature__tab {font-size: 18px;}
  .dx-doc .dx-feature__lead {font-size: 16px;}
  .dx-doc .dx-feature__list li {font-size: 14px;}
  .dx-doc .dx-feature__list li::before {top: 3px;}
  .dx-doc .dx-feature__note {font-size: 12px;}
  .dx-doc .dx-plan--option .dx-plan__link .badge { flex-basis:100%; margin:0 0 6px; }
  .dx-doc .dx-option__ttl {font-size: 24px;}
  .dx-doc .dx-opt__cols {margin-top: 20px;}
  .dx-doc .dx-opt__badge {font-size: 16px;}
  .dx-doc .dx-opt__name {font-size: 21px;}
  .dx-doc .dx-opt__lead {font-size: 14px;}
  .dx-doc .dx-opt__cmp {font-size: 9px;}
  .dx-doc .dx-point__ttl::before {content: none;}
  .dx-doc .dx-point__card {font-size: 14px;}
  .dx-doc .dx-role {margin-top: 48px;}
  .dx-doc .dx-spec {padding-block: 20px;}
  .dx-doc .dx-spec__foot {margin-bottom: 40px;}
  .dx-doc .dx-system__desc {font-size: 16px;}
  .dx-doc .dx-system__notes {margin: 20px auto 0;}
  .dx-doc .dx-price__plan {margin-bottom: 24px;}
  .dx-doc .dx-price__plan h3 {font-size: 16px;}
  .dx-doc .dx-ptable {font-size: 10px;}
}

/* ============================= 画像サイズ・微調整ユーティリティ ============================= */
.dx-doc .dx-h70 {height:70px} .dx-doc .dx-h80 {height:80px} .dx-doc .dx-h85 {height:85px} .dx-doc .dx-h90 {height:90px}
.dx-doc .dx-h96 {height:96px} .dx-doc .dx-h100 {height:100px} .dx-doc .dx-h110 {height:110px}
.dx-doc .dx-h130 {height:130px} .dx-doc .dx-h140 {height:140px} .dx-doc .dx-h150 {height:150px}
.dx-doc .dx-h160 {height:248px} .dx-doc .dx-h170 {height:170px} .dx-doc .dx-h180 {height:180px}
.dx-doc .dx-h200 {height:248px}
.dx-doc .dx-w420 {width:420px}
.dx-doc .dx-mt20 {margin-top:20px} .dx-doc .dx-mb12 {margin-bottom:12px;text-align: center; font-weight: 600;}
.dx-doc .dx-feature__body--block {display:block}
.dx-doc .dx-after-note--big {font-size:24px}

/* ==========================================================================
   下部固定サブメニュー ＋ お問い合わせ追従ボタン（文書管理ページ限定）
   ※ hitecdx_submenu.pdf 準拠。single-product.php(post 62) / dx-submenu.php で出力。
   ========================================================================== */

/* アンカー着地位置の調整（固定ヘッダー/バー考慮の微調整） */
#dx-top, #kihon, #merit, #option, #system, #price { scroll-margin-top: 24px; }

/* 固定バーに隠れないよう、フッターに下部余白を確保（このページのみ・兄弟結合子で限定） */
.dx-submenu ~ footer { padding-bottom: 88px; }

/* --- 下部固定サブメニュー --- */
.dx-submenu {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  background: linear-gradient(90deg, #008bc0 0%, #0aa0b4 55%, #07aea8 100%);
  box-shadow: 0 -2px 10px rgba(0,0,0,.15);
}
/* トグル（SP専用。PCでは非表示） */
.dx-submenu__toggle { display: none; }

.dx-submenu__inner {
  max-width: 1040px; margin-inline: auto; padding: 10px 20px;
  display: flex; align-items: stretch; justify-content: space-between; gap: 16px;
}
.dx-submenu__list {
  display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0;
  flex: 1 1 0; min-width: 0;           /* カードを押し出さず、狭い時はメニュー側を縮小/スクロール */
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.dx-submenu__list li { display: flex; }
.dx-submenu__list li + li { border-left: 1px solid rgba(255,255,255,.35); }
.dx-submenu__list a {
  display: flex; align-items: center; justify-content: center;
  padding: 0px 16px; color: #fff; font-weight: 700; font-size: 14px;
  text-decoration: none; white-space: nowrap; line-height: 1.3;
  transition: background-color .2s;
}
.dx-submenu__list a:hover { background: rgba(255,255,255,.15); }

/* お問い合わせ先：白背景の角丸カード＋中央寄せ（hitecdx_submenu_design.png 準拠） */
.dx-submenu__contact {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  flex: 0 0 auto; align-self: stretch;      /* バーの高さいっぱい */
  background: #fff; text-align: center;      /* 白背景・センタリング */
  padding: 6px 20px; margin-left: 16px;
  border-radius: 14px;
}
.dx-submenu__contact-label { font-size: 10px; line-height: 1.5; font-weight: 700; color: #0a8f9b; }
.dx-submenu__contact-mail  { font-size: 16px; font-weight: 700; line-height: 1.15; color: #0a8f9b; white-space: nowrap; }
.dx-submenu__contact-mail a { color: inherit; text-decoration: none; }
.dx-submenu__contact-note  { font-size: 8px; line-height: 1.5; color: #666; }

/* 固定サブメニューバーと重なるページトップボタンは本ページでは非表示（バー内「製品TOP」で代替） */
.dx-submenu ~ #pagetop { display: none !important; }

/* --- SP：トグル開閉メニュー（hitecdx_submenu_sp_open/close.png 準拠） --- */
@media (max-width: 900px){
  /* トグルボタン（閉じた状態＝これだけ表示） */
  .dx-submenu__toggle {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    width: 100%; padding: 16px; border: 0; background: transparent; cursor: pointer;
    color: #fff; font-weight: 700; font-size: 16px; font-family: inherit; line-height: 1;
  }
  .dx-submenu__toggle-icon {
    width: 11px; height: 11px; margin-top: -4px;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(45deg); transition: transform .3s;
  }
  .dx-submenu.is-open .dx-submenu__toggle-icon { transform: rotate(-135deg); margin-top: 3px; }

  /* パネル（開いた時のみ表示） */
  .dx-submenu__inner { display: none; max-width: none; margin: 0; padding: 0; }
  .dx-submenu.is-open .dx-submenu__inner { display: block; border-top: 1px solid rgba(255,255,255,.4); }

  /* メニュー：3列×2行グリッド＋列区切り */
  .dx-submenu__list { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .dx-submenu__list li { display: block; }
  .dx-submenu__list li + li { border-left: none; }
  .dx-submenu__list a {
    width: 100%; padding: 16px 8px; font-size: 15px; justify-content: center;
    border-right: 1px solid rgba(255,255,255,.4);
  }
  .dx-submenu__list li:nth-child(3n) a { border-right: none; }

  /* お問い合わせ先：白い横長ピル（左ラベル＋右メール） */
  .dx-submenu__contact {
    flex-direction: row; justify-content: space-between; align-items: center;
    align-self: auto; margin: 6px 16px 16px; padding: 12px 24px;
    border-radius: 999px; text-align: left;
  }
  .dx-submenu__contact-label { font-size: 13px; font-weight: 400; color: #666; }
  .dx-submenu__contact-mail  { font-size: 22px; }
  .dx-submenu__contact-note  { display: none; } /* SPパネルでは注記は非表示（comp準拠） */

  /* 固定バー（閉じた状態のトグル）分の余白を確保 */
  .dx-submenu ~ footer { padding-bottom: 56px; }
}
@media (max-width: 600px){
  .dx-submenu__list a { font-size: 13.5px; padding: 15px 6px; }
  .dx-submenu__contact { padding: 12px 18px; }
  .dx-submenu__contact-label { font-size: 12px; }
  .dx-submenu__contact-mail { font-size: 18px; }
}
@media (max-width: 400px){
  .dx-submenu__contact-label { font-size: 11px; }
}