.dx-preview { background: #fff; color: #333; font-family: 'Roboto', 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; }
.dx-preview * { box-sizing: border-box; }
.dx-preview__banner { min-height: 375px; display: flex; align-items: flex-end; padding-bottom: 58px; background: url('../img/sub/faci_title_bg.jpg') center / cover no-repeat; color: #fff; }
.dx-preview__banner-inner { width: min(1140px, calc(100% - 48px)); margin: 0 auto; text-align: center; }
.dx-preview__banner h1 { margin: 0; color: #fff; font: 800 clamp(30px, 3.3vw, 46px)/1.45 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; letter-spacing: .12em; }
.dx-preview__banner h1 span { display: inline-block; max-width: 100%; padding: .07em .34em; overflow-wrap: anywhere; }
.dx-preview__banner p { margin: 7px 0 0; color: #fff; font: 700 13px/1.5 Arial, sans-serif; letter-spacing: .15em; }

.dx-preview__inner { width: min(1140px, calc(100% - 48px)); margin: 0 auto; }
.dx-preview__intro { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); align-items: center; gap: 40px; padding: 76px 0 84px; }
.dx-preview__intro-visual, .dx-preview__visual, .dx-preview__copy, .dx-preview__intro-copy { min-width: 0; }
.dx-preview__intro-label, .dx-preview__number { margin: 0 0 14px; color: #0b83c5; font: 500 12px/1.5 Arial, Meiryo, sans-serif; letter-spacing: .08em; }
.dx-preview__intro h2, .dx-preview__copy h2 { margin: 0 0 22px; color: #0b83c5; font-size: 24px; font-weight: 500; line-height: 1.7; letter-spacing: .02em; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.dx-preview__intro-copy > p, .dx-preview__section-body > p { margin: 0 0 16px; font-size: 15px; line-height: 1.95; text-wrap: pretty; }
.dx-preview__section-body > p:last-child, .dx-preview__intro-copy > p:last-child { margin-bottom: 0; }
.dx-preview__intro-visual img, .dx-preview__photo-frame img { display: block; width: 100%; height: auto; object-fit: contain; }
/* Management examples share a quiet background and a common image baseline. */
.dx-preview__examples { padding-block: 64px 70px; background: #f5f8fa; }
.dx-preview__examples-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; }
.dx-preview__examples-grid > :not(.dx-preview__story) { grid-column: 1 / -1; }
.dx-preview__story { min-width: 0; scroll-margin-top: 120px; }
.dx-preview__examples .dx-preview__story { display: flex; flex-direction: column; gap: 28px; }
.dx-preview__examples .dx-preview__photo-frame { display: flex; align-items: center; justify-content: center; height: 235px; background: #fff; }
.dx-preview__examples .dx-preview__photo-frame img { max-height: 100%; }
.dx-preview__examples .dx-preview__copy h2 { font-size: 22px; margin-bottom: 18px; }
#dx-automation { padding: 72px 0 76px; }
#dx-automation .dx-preview__copy { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 76px; }
#dx-improvement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 76px; border-top: 1px solid #e3ebf0; padding: 66px 0; }
#dx-improvement .dx-preview__photo-frame { max-width: 425px; }
.dx-preview__ending { padding: 38px 0 68px; text-align: center; }
.dx-preview__ending h2 { margin: 0 0 25px; color: #0b83c5; font-size: 22px; line-height: 1.7; font-weight: 500; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.dx-preview__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; }
.dx-preview__actions a { min-width: 210px; padding: 15px 24px; border: 1px solid #0b83c5; color: #0b83c5; background: #fff; font-size: 14px; text-decoration: none; }
.dx-preview__actions a:hover { background: #eaf4fa; }
.dx-preview a:focus-visible { outline: 3px solid #0b83c5; outline-offset: 4px; }
.kote_r { display: none; }
@media (max-width: 1100px) and (min-width: 801px) {
    .dx-preview__intro, .dx-preview__examples-grid, #dx-automation .dx-preview__copy, #dx-improvement { gap: 36px; }
    .dx-preview__examples .dx-preview__photo-frame { height: 195px; }
}
@media (max-width: 800px) {
    .dx-preview__inner { width: min(100% - 40px, 640px); }
    .dx-preview__banner { min-height: 220px; padding-bottom: 30px; }
    .dx-preview__banner-inner { width: min(100% - 36px, 640px); }
    .dx-preview__intro, .dx-preview__examples-grid, #dx-automation .dx-preview__copy, #dx-improvement { grid-template-columns: 1fr; gap: 28px; }
    .dx-preview__intro { padding: 40px 0 46px; }
    .dx-preview__intro h2, .dx-preview__copy h2 { font-size: 22px; margin-bottom: 17px; }
    .dx-preview__examples { padding-block: 44px; }
    .dx-preview__examples-grid { row-gap: 42px; }
    .dx-preview__examples .dx-preview__story { gap: 25px; }
    .dx-preview__examples .dx-preview__story + .dx-preview__story { border-top: 1px solid #dbe7ed; padding-top: 40px; }
    .dx-preview__examples .dx-preview__photo-frame { height: auto; }
    .dx-preview__examples .dx-preview__photo-frame img { max-height: none; }
    #dx-automation { padding: 46px 0; }
    #dx-automation .dx-preview__copy { gap: 4px; }
    #dx-improvement { padding: 44px 0; }
    #dx-improvement .dx-preview__photo-frame { width: 100%; max-width: 380px; margin: 0 auto; }
    .dx-preview__ending { padding: 10px 0 48px; }
    .dx-preview__ending h2 { font-size: 20px; }
}
@media (max-width: 380px) {
    .dx-preview__banner h1 { font-size: 26px; letter-spacing: .04em; }
    .dx-preview__intro h2 { font-size: 20px; letter-spacing: 0; }
}