/* ==========================================================
   DX推進の取組について（/company/dx/）
   コーポレートの部品（.cfv / .ch / .cstate / .cbody など）に、このページ専用の部品を足す
   ========================================================== */
.dx-index { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 4vw, 64px); align-items: start; }
.dx-index .clead { margin-top: 0; }
.dx-toc { list-style: none; border-top: 2px solid var(--corp-ink); }
.dx-toc a { display: flex; align-items: center; gap: 1.2em; padding: 1.05em .4em; border-bottom: 1px solid var(--corp-line); font-size: .9rem; letter-spacing: .03em; transition: background .25s, padding .25s; }
.dx-toc a:hover { background: #f5f9fc; padding-left: .9em; }
.dx-toc .no { font-family: var(--font-en); font-size: .76rem; letter-spacing: .1em; color: var(--c-lime); flex-shrink: 0; width: 2em; }
.dx-toc i { margin-left: auto; font-style: normal; color: var(--corp-mute); }
section[id^="dx-"] { scroll-margin-top: 80px; }

/* 2枚組のカード */
.dx-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
.dx-card { background: #fff; border: 1px solid var(--corp-line); padding: clamp(24px, 3vw, 36px); }
.dx-card h3 { font-size: 1.1rem; letter-spacing: .04em; margin-top: .8em; }
.dx-card p { font-size: .86rem; line-height: 2.05; margin-top: 1em; word-break: auto-phrase; }
.dx-tag { display: inline-block; font-family: var(--font-en); font-size: .66rem; letter-spacing: .18em; padding: .35em .9em; background: var(--c-lime); color: #fff; }
.dx-tag--ink { background: var(--corp-ink); }
.dx-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--corp-ink); color: var(--c-on-dark, #5bc8f5); font-size: 1.1rem; }

/* 見出し付きカード（戦略 01 / 02） */
.dx-card--head { padding: 0; }
.dx-card--head > p { padding: 0 clamp(24px, 3vw, 36px); }
.dx-card-h { display: flex; align-items: center; gap: 16px; padding: 20px clamp(24px, 3vw, 36px); background: var(--corp-ink); color: #fff; }
.dx-card-h .no { font-family: var(--font-en); font-size: 2rem; line-height: 1; color: var(--c-on-dark, #5bc8f5); }
.dx-card-h .en { display: block; font-family: var(--font-en); font-size: .64rem; letter-spacing: .18em; color: rgba(255, 255, 255, .7); }
.dx-card-h h3 { margin-top: .1em; font-size: 1rem; }
.dx-goal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 1.4em clamp(24px, 3vw, 36px) clamp(24px, 3vw, 32px) !important; padding: 1.2em 0 0 !important; border-top: 1px dashed var(--corp-line); }
.dx-goal span { font-size: .72rem; letter-spacing: .08em; color: var(--corp-mute); margin-right: .4em; }
.dx-goal em { font-style: normal; font-size: .76rem; padding: .35em 1em; border-radius: 999px; background: var(--c-lime); color: #fff; }

/* ビジョン */
.cstate h2 em { font-style: normal; color: var(--c-on-dark, #5bc8f5); }
.dx-body { max-width: 60em; }
.dx-model { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 34px; }
.dx-model-src { display: grid; gap: .4em; padding: 28px; text-align: center; background: var(--c-lime); color: #fff; }
.dx-model-src .en { font-family: var(--font-en); font-size: .7rem; letter-spacing: .2em; opacity: .85; }
.dx-model-src b { font-size: 1.05rem; line-height: 1.6; }
.dx-model-src small { font-size: .74rem; opacity: .9; }
.dx-model-arr { font-size: 1.6rem; color: var(--c-lime); }
.dx-model-out { display: grid; gap: 12px; }
.dx-model-out div { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 2px solid var(--corp-ink); font-size: .86rem; }
.dx-model-out span { flex-shrink: 0; min-width: 7.5em; text-align: center; font-size: .74rem; padding: .4em .8em; background: var(--corp-ink); color: #fff; }

/* 戦略のフロー */
.dx-flow { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; margin-top: 30px; }
.dx-flow li { position: relative; display: grid; align-content: start; gap: .35em; padding: 20px 16px; background: #fff; border: 1px solid var(--corp-line); border-top: 3px solid var(--c-lime); }
.dx-flow li + li::before { content: "→"; position: absolute; left: -18px; top: 50%; transform: translateY(-50%); color: var(--corp-mute); }
.dx-flow li.is-goal { border-top-color: var(--corp-ink); }
.dx-flow .en { font-family: var(--font-en); font-size: .66rem; letter-spacing: .16em; color: var(--c-lime); }
.dx-flow .is-goal .en { color: var(--corp-ink); }
.dx-flow b { font-size: .92rem; }
.dx-flow small { font-size: .74rem; line-height: 1.7; color: var(--corp-mute); word-break: auto-phrase; }

/* 体制 */
.dx-structure { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(30px, 4vw, 56px); align-items: start; }
.dx-leader { padding: 28px 24px; background: var(--corp-ink); color: #fff; }
.dx-leader .en { font-family: var(--font-en); font-size: .64rem; letter-spacing: .18em; color: var(--c-on-dark, #5bc8f5); }
.dx-leader small { display: block; margin-top: 1.4em; font-size: .78rem; color: rgba(255, 255, 255, .75); }
.dx-leader b { display: block; font-size: 1.6rem; letter-spacing: .1em; margin-top: .2em; }
.dx-leader-role { display: inline-block; margin-top: .8em; font-size: .74rem; padding: .35em .8em; background: var(--c-lime); }
.dx-leader ul { list-style: none; margin-top: 1.4em; }
.dx-leader li { font-size: .78rem; padding: .7em 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.dx-h3 { font-size: 1rem; letter-spacing: .04em; padding-left: .8em; border-left: 4px solid var(--c-lime); }
.dx-h3 ~ .dx-h3 { margin-top: 2em; }
.dx-structure .cbody p { margin-top: .9em; }

/* チップ */
.dx-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1.2em; }
.dx-chips li { font-size: .72rem; padding: .35em .8em; border: 1px solid var(--corp-line); background: #f7f7f7; }

/* KPI */
.dx-kpis { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 20px; margin-top: 30px; }
.dx-kpi { padding: 26px 24px; border: 1px solid var(--corp-line); border-top: 4px solid var(--c-lime); background: #fff; }
.dx-kpi:nth-child(2) { border-top-color: var(--c-pink); }
.dx-kpi:nth-child(3) { border-top-color: var(--corp-ink); }
.dx-kpi .en { font-family: var(--font-en); font-size: .66rem; letter-spacing: .18em; color: var(--c-lime); }
.dx-kpi h3 { font-size: .98rem; margin-top: .4em; }
.dx-kpi ol { list-style: none; margin-top: 1em; }
.dx-kpi li { display: flex; align-items: flex-start; gap: .8em; padding: .8em 0; border-top: 1px dashed var(--corp-line); font-size: .84rem; line-height: 1.6; }
.dx-kpi .no { flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #f1f1f1; font-family: var(--font-en); font-size: .66rem; }

/* トップメッセージ */
.dx-msg { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(30px, 5vw, 80px); align-items: end; }
.dx-msg-body p { font-size: .94rem; line-height: 2.3; color: rgba(255, 255, 255, .88); word-break: auto-phrase; }
.dx-msg-body p + p { margin-top: 1.4em; }
.dx-sign { padding-top: 1.2em; border-top: 2px solid var(--c-on-dark, #5bc8f5); }
.dx-sign small { display: block; font-size: .76rem; color: rgba(255, 255, 255, .7); }
.dx-sign b { display: block; font-size: 1.5rem; letter-spacing: .12em; margin-top: .3em; }

@media (max-width: 1099px) {
  .cfv-en .sp { display: inline; }
  .dx-index, .dx-structure, .dx-msg { grid-template-columns: minmax(0, 1fr); }
  .dx-cards, .dx-kpis { grid-template-columns: minmax(0, 1fr); }
  .dx-model { grid-template-columns: minmax(0, 1fr); }
  .dx-model-arr { transform: rotate(90deg); justify-self: center; }
  .dx-flow { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .dx-flow li + li::before { content: "↓"; left: 50%; top: -18px; transform: translateX(-50%); }
  .dx-model-out div { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (min-width: 1100px) { .cfv-en .sp { display: none; } }
@media (max-width: 767px) { .cfv-en { font-size: clamp(2rem, 10.4vw, 2.8rem); } }
@media (max-width: 767px) { .cfv .cfv-en { font-size: 9.4vw; } }