/* =========================================================
   RESET
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* =========================================================
   DEN.AI HERO — LEFT CONTENT ONLY
   Existing background image remains untouched
========================================================= */

.dx-denai-hero {
  position: relative;
  width: 100%;
  min-height: 527px;
  overflow: hidden;
}

/* Left-side content placement */
.dx-denai-hero-content {
  position: relative;
  z-index: 2;
  width: 430px;
  margin-left: 52px;
  padding-top: 20px;
  box-sizing: border-box;
  color: #07192f;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}

/* Top blue caption */
.dx-denai-hero-eyebrow {
  margin: 0 0 10px;
  color: #0759de;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Main Japanese title */
.dx-denai-hero-title {
  margin: 0;
  color: #07192f;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 55px;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: 4.5px;
  text-shadow: 0 1px 1px rgba(7, 25, 47, 0.08);
}

/* Description */
.dx-denai-hero-description {
  margin: 9px 0 10px;
  color: #1f2937;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.4px;
}

/* Feature checkmarks */
.dx-denai-hero-features {
  display: flex;
  align-items: center;
  gap: 45px;
  width: 100%;
  margin-top: 5px;
}

.dx-denai-hero-feature {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #30343b;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.dx-denai-hero-feature i {
  color: #054ee5;
  font-size: 17px;
  font-weight: 900;
}

/* CTA button row */
.dx-denai-hero-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 14px;
}

.dx-denai-hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 177px;
  height: 42px;
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.dx-denai-hero-button i {
  font-size: 14px;
}

/* Solid button */
.dx-denai-hero-button-primary {
  border: 2px solid #064cdc;
  background: #064cdc;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(6, 76, 220, 0.16);
}

/* Outline button */
.dx-denai-hero-button-outline {
  border: 2px solid #1763ef;
  background: rgba(255, 255, 255, 0.82);
  color: #0759de;
}

/* Button hover */
.dx-denai-hero-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 13px rgba(6, 76, 220, 0.19);
}

.dx-denai-hero-button-outline:hover {
  background: #f2f6ff;
}

/* =========================================================
   Patent section
========================================================= */

.dx-denai-patent-card {
  display: grid;
  grid-template-columns: 135px 1fr;
  align-items: center;
  width: 400px;
  min-height: 94px;
  margin-top: 15px;
  padding: 7px 14px 7px 9px;
  border: 2px solid #396ff2;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
}

/* Real patent image */
.dx-denai-patent-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 125px;
  height: 78px;
  overflow: hidden;
}

.dx-denai-patent-image {
  display: block;
  width: 108px;
  height: 74px;
  max-width: none;
  object-fit: contain;
}

/* Patent text */
.dx-denai-patent-copy {
  align-self: center;
  padding-left: 4px;
}

.dx-denai-patent-copy h2 {
  margin: 0 0 5px;
  color: #0759de;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
}

.dx-denai-patent-copy p {
  margin: 0;
  color: #252c34;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0;
  white-space: nowrap;
}

/* =========================================================
   Tablet
========================================================= */

@media (max-width: 900px) {
  .dx-denai-hero {
    min-height: 500px;
  }

  .dx-denai-hero-content {
    margin-left: 24px;
    transform: scale(0.9);
    transform-origin: top left;
  }
}

/* =========================================================
   Mobile
========================================================= */

@media (max-width: 600px) {
  .dx-denai-hero {
    min-height: auto;
    padding: 24px 18px 30px;
    box-sizing: border-box;
  }

  .dx-denai-hero-content {
    width: 100%;
    margin-left: 0;
    padding-top: 0;
    transform: none;
  }

  .dx-denai-hero-eyebrow {
    font-size: 12px;
    white-space: normal;
  }

  .dx-denai-hero-title {
    font-size: clamp(42px, 13vw, 55px);
  }

  .dx-denai-hero-description {
    font-size: 15px;
  }

  .dx-denai-hero-features {
    flex-wrap: wrap;
    gap: 10px 25px;
  }

  .dx-denai-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .dx-denai-hero-button {
    width: 100%;
  }

  .dx-denai-patent-card {
    grid-template-columns: 112px 1fr;
    width: 100%;
    padding-right: 10px;
  }

  .dx-denai-patent-image-wrap {
    width: 105px;
    height: 72px;
  }

  .dx-denai-patent-image {
    width: 98px;
    height: auto;
  }

  .dx-denai-patent-copy h2,
  .dx-denai-patent-copy p {
    white-space: normal;
  }

  .dx-denai-patent-copy h2 {
    font-size: 12px;
  }

  .dx-denai-patent-copy p {
    font-size: 9.5px;
  }
}

/*-- START - 1st CARD --*/


/* =========================================================
   MAIN CARD
========================================================= */

.dx-denai-problems {

  width: 100%;
  max-width: 1160px;
  min-height: 203px;
  margin: 50px auto;

  padding: 15px 48px 18px;

  background: #ffffff;
  border: 1px solid #edf3fc;
  border-radius: 14px;

  box-shadow:
    0 1px 5px rgba(36, 92, 180, 0.04),
    0 5px 18px rgba(36, 92, 180, 0.055);
}

/* =========================================================
   TOP HEADING
========================================================= */

.dx-denai-problems-heading {
  text-align: center;
}

.dx-denai-problems-heading h2 {
  margin: 0 0 4px;

  color: #151515;

  font-size: 21px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.055em;
}

.dx-denai-problems-heading p {
  margin: 0;

  color: #515762;

  font-size: 12px;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.025em;
}

/* =========================================================
   THREE-COLUMN AREA
========================================================= */

.dx-denai-problems-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  width: 100%;
  margin-top: 11px;
}

/* =========================================================
   EACH ITEM
========================================================= */

.dx-denai-problem-item {
  position: relative;

  display: flex;
  align-items: center;

  min-width: 0;
  min-height: 68px;

  padding: 0 30px;
}

/* First column alignment */
.dx-denai-problem-item:first-child {
  padding-left: 4px;
  padding-right: 31px;
}

/* Middle column alignment */
.dx-denai-problem-item:nth-child(2) {
  padding-left: 31px;
  padding-right: 31px;
}

/* Last column alignment */
.dx-denai-problem-item:last-child {
  padding-left: 31px;
  padding-right: 0;
}

/* Vertical separators */
.dx-denai-problem-item:not(:last-child)::after {
  content: "";

  position: absolute;
  top: 1px;
  right: 0;

  width: 1px;
  height: 67px;

  background: #bdd0ff;
}

/* =========================================================
   ICON CIRCLE
========================================================= */

.dx-denai-problem-icon {
  flex: 0 0 62px;

  width: 62px;
  height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-right: 18px;

  background: #ffffff;
  border: 2px solid #dfe9ff;
  border-radius: 50%;
}

.dx-denai-problem-icon i {
  color: #1758ff;
  font-size: 27px;
  line-height: 1;
}

/* Slight adjustment for each Font Awesome icon */
.dx-denai-problem-item:first-child
.dx-denai-problem-icon i {
  font-size: 25px;
}

.dx-denai-problem-item:nth-child(2)
.dx-denai-problem-icon i {
  font-size: 27px;
}

.dx-denai-problem-item:nth-child(3)
.dx-denai-problem-icon i {
  font-size: 26px;
}

/* =========================================================
   ITEM TEXT
========================================================= */

.dx-denai-problem-text {
  min-width: 0;
}

.dx-denai-problem-text h3 {
  margin: 0 0 5px;

  color: #171717;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.025em;

  white-space: nowrap;
}

.dx-denai-problem-text p {
  margin: 0;

  color: #5d626c;

  font-size: 10px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.015em;

  white-space: nowrap;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

  body {
    padding: 20px;
  }

  .dx-denai-problems {
    padding: 20px 25px 24px;
  }

  .dx-denai-problem-item,
  .dx-denai-problem-item:first-child,
  .dx-denai-problem-item:nth-child(2),
  .dx-denai-problem-item:last-child {
    padding-left: 18px;
    padding-right: 18px;
  }

  .dx-denai-problem-icon {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
    margin-right: 13px;
  }

  .dx-denai-problem-icon i {
    font-size: 23px;
  }

  .dx-denai-problem-text h3 {
    font-size: 12px;
    white-space: normal;
  }

  .dx-denai-problem-text p {
    font-size: 9px;
    white-space: normal;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  body {
    padding: 16px;
  }

  .dx-denai-problems {
    min-height: auto;
    padding: 23px 20px;
  }

  .dx-denai-problems-heading h2 {
    font-size: 17px;
    line-height: 1.7;
    letter-spacing: 0.03em;
  }

  .dx-denai-problems-heading p {
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.8;
  }

  .dx-denai-problems-grid {
    grid-template-columns: 1fr;
    margin-top: 17px;
  }

  .dx-denai-problem-item,
  .dx-denai-problem-item:first-child,
  .dx-denai-problem-item:nth-child(2),
  .dx-denai-problem-item:last-child {
    min-height: 0;
    padding: 18px 0;
  }

  .dx-denai-problem-item:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 1px;
  }

  .dx-denai-problem-icon {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    margin-right: 16px;
  }

  .dx-denai-problem-text h3 {
    font-size: 14px;
    white-space: normal;
  }

  .dx-denai-problem-text p {
    font-size: 10px;
    white-space: normal;
  }
}

/*-- END - 1st CARD --*/

/*-- START - 2nd CARD --*/


/* ======================================================
   MAIN CARD
====================================================== */

.dx-denai-results {
  width: 100%;
  max-width: 1160px;
  min-height: 203px;
  margin: 50px auto;

  padding: 15px 48px 18px;

  background: #ffffff;
  border: 1px solid #edf3fc;
  border-radius: 14px;

  box-shadow:
    0 1px 5px rgba(36, 92, 180, 0.04),
    0 5px 18px rgba(36, 92, 180, 0.055);
}

/* ======================================================
   LEFT AREA
====================================================== */

.dx-denai-results-content {
  position: absolute;
  top: 24px;
  left: 43px;
  width: 528px;
}

.dx-denai-results-title {
  margin: 0 0 13px 2px;

  color: #111111;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.105em;
  white-space: nowrap;
}

.dx-denai-results-stats {
  display: grid;
  grid-template-columns: repeat(4, 119px);
  gap: 16px;
}

.dx-denai-results-stat-card {
  width: 119px;
  height: 69px;
  padding-top: 9px;

  text-align: center;

  border: 1px solid #e2ebf7;
  border-radius: 7px;

  background: rgba(255, 255, 255, 0.96);

  box-shadow:
    0 0 8px rgba(30, 92, 190, 0.018),
    inset 0 0 8px rgba(39, 99, 195, 0.018);
}

.dx-denai-results-stat-label {
  margin-bottom: 5px;

  color: #262626;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.dx-denai-results-stat-result {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;

  color: #0751df;
  white-space: nowrap;
}

.dx-denai-results-stat-result strong {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}

.dx-denai-results-stat-result span {
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.dx-denai-results-button {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 176px;
  height: 29px;
  margin-top: 7px;
  padding: 0 21px 0 31px;

  border: 1.5px solid #0759f6;
  border-radius: 5px;

  background: #ffffff;
  color: #0759f6;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.dx-denai-results-button i {
  font-size: 12px;
}

/* ======================================================
   RIGHT DIAGRAM
====================================================== */

.dx-denai-results-diagram {
  position: absolute;
  top: 4px;
  left: 623px;
  width: 500px;
  height: 174px;
}

.dx-denai-results-orbit {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.dx-denai-results-orbit-large {
  top: 9px;
  left: 158px;
  width: 178px;
  height: 158px;

  border: 1px dashed #d9e6fa;
}

.dx-denai-results-orbit-small {
  top: 20px;
  left: 170px;
  width: 154px;
  height: 136px;

  border: 1px solid rgba(219, 231, 249, 0.72);
}

.dx-denai-results-center-glow {
  position: absolute;
  top: 30px;
  left: 181px;
  width: 132px;
  height: 122px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(19, 98, 241, 0.23) 0%,
    rgba(27, 103, 242, 0.12) 40%,
    rgba(27, 103, 242, 0) 72%
  );
}

.dx-denai-results-center {
  position: absolute;
  z-index: 5;
  top: 43px;
  left: 196px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 101px;
  height: 101px;

  border: 7px solid rgba(157, 196, 255, 0.74);
  border-radius: 50%;

  background: radial-gradient(
    circle at 50% 28%,
    #4898ff 0%,
    #2375f3 37%,
    #0751df 75%,
    #0346d2 100%
  );

  box-shadow:
    0 0 0 4px rgba(222, 235, 255, 0.93),
    0 5px 14px rgba(19, 87, 214, 0.22),
    inset 0 3px 7px rgba(255, 255, 255, 0.25);

  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ======================================================
   ICON CIRCLES
====================================================== */

.dx-denai-results-diagram-icon {
  position: absolute;
  z-index: 8;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border: 1px solid #dce8fa;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.98);

  box-shadow:
    0 2px 5px rgba(22, 78, 172, 0.07),
    inset 0 0 7px rgba(31, 97, 203, 0.035);

  color: #0759f6;
  font-size: 16px;
}

.dx-denai-results-diagram-icon small {
  position: absolute;
  right: 7px;
  bottom: 5px;

  font-size: 6px;
  font-weight: 800;
}

/* Icon positions */

.dx-denai-results-icon-top-left {
  top: 6px;
  left: 177px;
}

.dx-denai-results-icon-top-right {
  top: 7px;
  left: 269px;
}

.dx-denai-results-icon-middle-left {
  top: 67px;
  left: 135px;
}

.dx-denai-results-icon-middle-right {
  top: 68px;
  left: 321px;
}

.dx-denai-results-icon-bottom-left {
  top: 129px;
  left: 177px;
}

.dx-denai-results-icon-bottom-right {
  top: 130px;
  left: 269px;
}

/* ======================================================
   DIAGRAM TEXT
====================================================== */

.dx-denai-results-label {
  position: absolute;
  z-index: 9;

  color: #282828;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.dx-denai-results-label-top-left {
  top: 17px;
  left: 28px;
}

.dx-denai-results-label-top-right {
  top: 18px;
  left: 340px;
}

.dx-denai-results-label-middle-left {
  top: 78px;
  left: 1px;
}

.dx-denai-results-label-middle-right {
  top: 79px;
  left: 373px;
}

.dx-denai-results-label-bottom-left {
  top: 141px;
  left: 23px;
}

/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width: 1220px) {
  body {
    padding: 12px;
  }

  .dx-denai-results {
    transform-origin: top left;
  }
}

@media (max-width: 900px) {
  body {
    overflow-x: hidden;
  }

  .dx-denai-results {
    width: 100%;
    height: auto;
    min-height: 510px;
    padding: 26px 20px;
  }

  .dx-denai-results-content {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
  }

  .dx-denai-results-title {
    white-space: normal;
  }

  .dx-denai-results-stats {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 12px;
  }

  .dx-denai-results-stat-card {
    width: 100%;
  }

  .dx-denai-results-button {
    width: 100%;
    justify-content: center;
    gap: 25px;
  }

  .dx-denai-results-diagram {
    top: 312px;
    left: 50%;
    transform: translateX(-50%) scale(0.86);
    transform-origin: top center;
  }
}

/*-- END - 2nd CARD --*/

/*-- START - 3rd CARD --*/

/* =========================================================
   WHY DEN.AI SECTION
   ========================================================= */

.dx-denai-reasons {
  width: 100%;
  padding: 22px 28px 28px;
  background: #ffffff;
  border: 1px solid #e7edf6;
  border-radius: 18px;
  box-shadow: 0 3px 10px rgba(31, 65, 123, 0.05);
  color: #111111;
}

.dx-denai-reasons-inner {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}

.dx-denai-reasons-title {
  margin: 0 0 18px;
  text-align: center;
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #111111;
}

.dx-denai-reasons-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

/* =========================================================
   REASON CARD
   ========================================================= */

.dx-denai-reason-card {
  min-height: 215px;
  padding: 22px 18px 20px;
  background: #ffffff;
  border: 1px solid #dfe8f5;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(33, 72, 132, 0.06);
}

.dx-denai-reason-header {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 66px;
}

.dx-denai-reason-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  color: #124cff;
}

.dx-denai-reason-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dx-denai-reason-title {
  margin: 0;
  font-size: clamp(16px, 1.25vw, 21px);
  line-height: 1.55;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #151515;
}

.dx-denai-reason-text {
  margin: 18px 0 0;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.9;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #555555;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {
  .dx-denai-reasons-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dx-denai-reason-card:last-child {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {
  .dx-denai-reasons {
    padding: 20px 14px;
    border-radius: 14px;
  }

  .dx-denai-reasons-title {
    margin-bottom: 16px;
    font-size: 24px;
  }

  .dx-denai-reasons-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .dx-denai-reason-card,
  .dx-denai-reason-card:last-child {
    grid-column: auto;
  }

  .dx-denai-reason-card {
    min-height: 0;
    padding: 18px 16px;
  }

  .dx-denai-reason-header {
    min-height: auto;
  }

  .dx-denai-reason-icon {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }

  .dx-denai-reason-title {
    font-size: 17px;
  }

  .dx-denai-reason-text {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.8;
  }
}

/*-- END - 3rd CARD --*/


/*-- START - 4th CARD --*/

/* =========================================================
   START - DEN.AI VS IVR COMPARISON SECTION
   Unique selector prefix: dx-ivr-compare-
   ========================================================= */

.dx-ivr-compare-section {
  width: 100%;
  padding: 24px 18px;
  background: #f6f9fd;
  box-sizing: border-box;
}

.dx-ivr-compare-box {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 22px 38px 26px;
  background: #ffffff;
  border: 1px solid #e5edf7;
  border-radius: 16px;
  box-shadow:
    0 2px 8px rgba(34, 73, 140, 0.04),
    0 8px 24px rgba(34, 73, 140, 0.06);
  box-sizing: border-box;
}

/* =========================================================
   SECTION TITLE
   ========================================================= */

.dx-ivr-compare-title {
  margin: 0 0 18px;
  text-align: center;
  color: #111111;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.025em;
}

.dx-ivr-compare-title-blue {
  color: #0754e6;
}

/* =========================================================
   TABLE WRAPPER
   ========================================================= */

.dx-ivr-compare-table {
  width: 100%;
  overflow: hidden;
  border-radius: 11px;
}

/* =========================================================
   TABLE HEADER
   ========================================================= */

.dx-ivr-compare-header {
  display: grid;
  grid-template-columns: 25% 37.5% 37.5%;
  width: 100%;
  min-height: 52px;
}

.dx-ivr-compare-header-empty {
  background: transparent;
}

.dx-ivr-compare-header-denai,
.dx-ivr-compare-header-ivr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 10px 14px;
  box-sizing: border-box;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.dx-ivr-compare-header-denai {
  color: #ffffff;
  background: linear-gradient(
    110deg,
    #0d5ff0 0%,
    #0b4edc 50%,
    #0b3ec7 100%
  );
  border-top: 2px solid #a8c2ff;
  border-left: 2px solid #a8c2ff;
  border-right: 2px solid #a8c2ff;
  border-radius: 11px 11px 0 0;
}

.dx-ivr-compare-header-ivr {
  color: #171717;
  background: linear-gradient(
    180deg,
    #f2f2f2 0%,
    #e8e8e8 100%
  );
  border-top: 1px solid #e1e1e1;
  border-right: 1px solid #e1e1e1;
  border-radius: 11px 11px 0 0;
}

.dx-ivr-compare-symbol-circle,
.dx-ivr-compare-symbol-triangle {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

/* =========================================================
   TABLE ROWS
   ========================================================= */

.dx-ivr-compare-row {
  display: grid;
  grid-template-columns: 25% 37.5% 37.5%;
  width: 100%;
  min-height: 58px;
}

.dx-ivr-compare-label,
.dx-ivr-compare-denai-value,
.dx-ivr-compare-ivr-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 12px 15px;
  text-align: center;
  background: #ffffff;
  box-sizing: border-box;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  line-height: 1.45;
}

/* =========================================================
   LEFT LABEL COLUMN
   ========================================================= */

.dx-ivr-compare-label {
  color: #181818;
  font-size: 15px;
  font-weight: 700;
  border-left: 2px solid #a8c2ff;
  border-right: 1px solid #bfd0ff;
  border-bottom: 1px solid #e3e8ef;
}

/* Missing top-left horizontal line */
.dx-ivr-compare-row-first .dx-ivr-compare-label {
  border-top: 2px solid #a8c2ff;
  border-top-left-radius: 11px;
}

/* =========================================================
   DEN.AI COLUMN
   ========================================================= */

.dx-ivr-compare-denai-value {
  color: #0754e6;
  font-size: 17px;
  font-weight: 800;
  border-right: 2px solid #a8c2ff;
  border-bottom: 1px solid #e3e8ef;
}

/* =========================================================
   IVR COLUMN
   ========================================================= */

.dx-ivr-compare-ivr-value {
  color: #272727;
  font-size: 14px;
  font-weight: 600;
  border-right: 1px solid #e1e1e1;
  border-bottom: 1px solid #e3e8ef;
}

/* =========================================================
   LAST ROW BORDERS
   ========================================================= */

.dx-ivr-compare-row-last .dx-ivr-compare-label {
  border-bottom: 2px solid #a8c2ff;
  border-bottom-left-radius: 11px;
}

.dx-ivr-compare-row-last .dx-ivr-compare-denai-value {
  border-bottom: 2px solid #a8c2ff;
  border-bottom-right-radius: 11px;
}

.dx-ivr-compare-row-last .dx-ivr-compare-ivr-value {
  border-bottom: 1px solid #e1e1e1;
  border-bottom-right-radius: 11px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .dx-ivr-compare-section {
    padding: 22px 14px;
  }

  .dx-ivr-compare-box {
    padding: 20px 20px 22px;
  }

  .dx-ivr-compare-title {
    font-size: 24px;
  }

  .dx-ivr-compare-header-denai,
  .dx-ivr-compare-header-ivr {
    font-size: 14px;
  }

  .dx-ivr-compare-label {
    font-size: 13px;
  }

  .dx-ivr-compare-denai-value {
    font-size: 15px;
  }

  .dx-ivr-compare-ivr-value {
    font-size: 13px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .dx-ivr-compare-section {
    padding: 18px 10px;
  }

  .dx-ivr-compare-box {
    padding: 18px 9px 20px;
    border-radius: 13px;
  }

  .dx-ivr-compare-title {
    margin-bottom: 14px;
    font-size: 20px;
    line-height: 1.4;
  }

  .dx-ivr-compare-table {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .dx-ivr-compare-header,
  .dx-ivr-compare-row {
    grid-template-columns: 130px 185px 185px;
    min-width: 500px;
  }

  .dx-ivr-compare-header {
    min-height: 47px;
  }

  .dx-ivr-compare-row {
    min-height: 55px;
  }

  .dx-ivr-compare-header-denai,
  .dx-ivr-compare-header-ivr {
    padding: 8px 7px;
    font-size: 12px;
  }

  .dx-ivr-compare-symbol-circle,
  .dx-ivr-compare-symbol-triangle {
    font-size: 15px;
  }

  .dx-ivr-compare-label,
  .dx-ivr-compare-denai-value,
  .dx-ivr-compare-ivr-value {
    padding: 9px 7px;
  }

  .dx-ivr-compare-label {
    font-size: 12px;
  }

  .dx-ivr-compare-denai-value {
    font-size: 13px;
  }

  .dx-ivr-compare-ivr-value {
    font-size: 12px;
  }
}

/* =========================================================
   END - DEN.AI VS IVR COMPARISON SECTION
   ========================================================= */
/*-- END - 4th CARD --*/

/*-- START - 5th CARD --*/

/* =========================================================
   START - DEN.AI AUTOMATIC VOICE DEMO SECTION
   Unique selector prefix: dx-auto-demo-
   ========================================================= */

.dx-auto-demo-section {
  width: 100%;
  padding: 28px 24px;
  background: #f5f9fe;
  box-sizing: border-box;
}

.dx-auto-demo-container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 28px 58px 20px;
  background:
    radial-gradient(
      circle at 50% 43%,
      rgba(220, 234, 255, 0.34),
      rgba(255, 255, 255, 0) 58%
    ),
    #ffffff;
  border: 1px solid #dfe9f7;
  border-radius: 18px;
  box-shadow:
    0 2px 8px rgba(28, 75, 145, 0.035),
    0 10px 30px rgba(28, 75, 145, 0.05);
  box-sizing: border-box;
}

/* =========================================================
   SECTION HEADING
   ========================================================= */

.dx-auto-demo-heading-wrap {
  margin-bottom: 20px;
  text-align: center;
}

.dx-auto-demo-heading {
  margin: 0;
  color: #111111;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 31px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.055em;
}

.dx-auto-demo-subheading {
  margin: 5px 0 0;
  color: #4c5058;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

/* =========================================================
   MAIN DEMO PANEL
   ========================================================= */

.dx-auto-demo-panel {
  display: grid;
  grid-template-columns: 43% 1px minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 272px;
  padding: 26px 36px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #dfebf9;
  border-radius: 15px;
  box-shadow:
    0 4px 14px rgba(27, 74, 146, 0.055),
    0 12px 28px rgba(27, 74, 146, 0.045);
  box-sizing: border-box;
}

/* =========================================================
   VOICE AREA
   ========================================================= */

.dx-auto-demo-voice-area {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) 132px minmax(70px, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  min-width: 0;
  padding-right: 18px;
}

/* =========================================================
   AUTOMATIC SOUND WAVES
   ========================================================= */

.dx-auto-demo-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100px;
  overflow: hidden;
}

.dx-auto-demo-wave-left {
  grid-column: 1;
  grid-row: 1;
}

.dx-auto-demo-wave-right {
  grid-column: 3;
  grid-row: 1;
}

.dx-auto-demo-wave span {
  display: block;
  flex: 0 0 3px;
  width: 3px;
  height: var(--dx-height);
  min-height: 7px;
  max-height:none;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    #8eb4ff 0%,
    #4f86f4 48%,
    #87aeff 100%
  );
  opacity: 0.82;
  transform-origin: center;
  animation:
    dxAutoDemoWaveMotion 0.9s ease-in-out infinite;
  animation-delay: var(--dx-delay);
}

/* Wave animation starts automatically */
@keyframes dxAutoDemoWaveMotion {
  0%,
  100% {
    transform: scaleY(0.3);
    opacity: 0.45;
  }

  25% {
    transform: scaleY(0.65);
    opacity: 0.72;
  }

  50% {
    transform: scaleY(1.18);
    opacity: 1;
  }

  75% {
    transform: scaleY(0.55);
    opacity: 0.68;
  }
}

/* =========================================================
   MICROPHONE BUTTON
   ========================================================= */

.dx-auto-demo-mic-button {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 24%,
    #4f8dff 0%,
    #286bee 38%,
    #1352df 68%,
    #063cc3 100%
  );
  color: #ffffff;
  cursor: pointer;
  box-shadow:
    0 0 0 9px rgba(92, 143, 255, 0.12),
    0 0 0 17px rgba(92, 143, 255, 0.07),
    0 8px 22px rgba(24, 84, 210, 0.23),
    inset 0 5px 10px rgba(255, 255, 255, 0.22);
  animation:
    dxAutoDemoMicPulse 1.7s ease-in-out infinite;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.dx-auto-demo-mic-button:hover {
  transform: translateY(-2px);
}

.dx-auto-demo-mic-button:active {
  transform: scale(0.97);
}

/* Automatic microphone glow */
@keyframes dxAutoDemoMicPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 9px rgba(92, 143, 255, 0.11),
      0 0 0 17px rgba(92, 143, 255, 0.06),
      0 8px 22px rgba(24, 84, 210, 0.22),
      inset 0 5px 10px rgba(255, 255, 255, 0.22);
  }

  50% {
    box-shadow:
      0 0 0 13px rgba(92, 143, 255, 0.16),
      0 0 0 23px rgba(92, 143, 255, 0.08),
      0 12px 30px rgba(24, 84, 210, 0.31),
      inset 0 5px 10px rgba(255, 255, 255, 0.22);
  }
}

.dx-auto-demo-mic-icon {
  width: 52px;
  height: 52px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dx-auto-demo-mic-label {
  grid-column: 1 / 4;
  grid-row: 2;
  margin: 18px 0 0;
  color: #202020;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

/* =========================================================
   CENTER DIVIDER
   ========================================================= */

.dx-auto-demo-divider {
  width: 1px;
  height: 214px;
  background: #bdd2f4;
}

/* =========================================================
   CONVERSATION AREA
   ========================================================= */

.dx-auto-demo-conversation {
  min-width: 0;
  padding-left: 40px;
}

.dx-auto-demo-message-group + .dx-auto-demo-message-group {
  margin-top: 20px;
}

.dx-auto-demo-speaker {
  margin: 0 0 8px;
  color: #171717;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

/* =========================================================
   CUSTOMER MESSAGE
   ========================================================= */

.dx-auto-demo-customer-message {
  position: relative;
  max-width: 92%;
  min-height: 55px;
  padding: 15px 22px;
  background: linear-gradient(
    110deg,
    #edf3ff 0%,
    #e0e9fd 100%
  );
  border-radius: 0 13px 13px 13px;
  color: #222222;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  box-sizing: border-box;
}

.dx-auto-demo-customer-message::before {
  content: "";
  position: absolute;
  top: 0;
  left: -17px;
  width: 18px;
  height: 18px;
  background: #edf3ff;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}

/* =========================================================
   OPERATOR MESSAGE
   ========================================================= */

.dx-auto-demo-operator-message {
  max-width: 96%;
  min-height: 87px;
  padding: 15px 22px;
  background: #ffffff;
  border: 1px solid #c7daf8;
  border-radius: 13px;
  color: #252525;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
  box-sizing: border-box;
}

/* =========================================================
   ACTION BUTTON
   ========================================================= */

.dx-auto-demo-action-wrap {
  display: flex;
  justify-content: center;
  margin-top: 19px;
}

.dx-auto-demo-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-width: 300px;
  min-height: 50px;
  padding: 10px 28px;
  background: linear-gradient(
    110deg,
    #0759e9 0%,
    #0847d3 100%
  );
  border: 1px solid #074ad8;
  border-radius: 8px;
  color: #ffffff;
  box-shadow:
    0 5px 13px rgba(9, 73, 205, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.dx-auto-demo-action-button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 18px rgba(9, 73, 205, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.dx-auto-demo-action-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .dx-auto-demo-section {
    padding: 24px 16px;
  }

  .dx-auto-demo-container {
    padding: 22px 24px 20px;
  }

  .dx-auto-demo-heading {
    font-size: 26px;
  }

  .dx-auto-demo-panel {
    grid-template-columns: 40% 1px minmax(0, 1fr);
    padding: 24px 22px;
  }

  .dx-auto-demo-voice-area {
    grid-template-columns: minmax(45px, 1fr) 110px minmax(45px, 1fr);
    padding-right: 18px;
  }

  .dx-auto-demo-mic-button {
    width: 110px;
    height: 110px;
  }

  .dx-auto-demo-mic-icon {
    width: 44px;
    height: 44px;
  }

  .dx-auto-demo-conversation {
    padding-left: 25px;
  }

  .dx-auto-demo-customer-message,
  .dx-auto-demo-operator-message {
    font-size: 14px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {
  .dx-auto-demo-section {
    padding: 18px 10px;
  }

  .dx-auto-demo-container {
    padding: 20px 12px 18px;
    border-radius: 14px;
  }

  .dx-auto-demo-heading-wrap {
    margin-bottom: 16px;
  }

  .dx-auto-demo-heading {
    font-size: 23px;
    line-height: 1.45;
  }

  .dx-auto-demo-subheading {
    font-size: 13px;
  }

  .dx-auto-demo-panel {
    display: block;
    min-height: 0;
    padding: 25px 15px 20px;
  }

  .dx-auto-demo-voice-area {
    grid-template-columns: minmax(32px, 1fr) 110px minmax(32px, 1fr);
    padding: 0;
  }

  .dx-auto-demo-wave {
    height: 80px;
    gap: 3px;
  }

  .dx-auto-demo-wave span {
    flex-basis: 2px;
    width: 2px;
    max-height:none;
  }

  .dx-auto-demo-mic-button {
    width: 110px;
    height: 110px;
  }

  .dx-auto-demo-mic-label {
    margin-top: 17px;
  }

  .dx-auto-demo-divider {
    width: 100%;
    height: 1px;
    margin: 25px 0;
  }

  .dx-auto-demo-conversation {
    padding-left: 0;
  }

  .dx-auto-demo-customer-message,
  .dx-auto-demo-operator-message {
    max-width: 100%;
    padding: 14px 16px;
    font-size: 14px;
  }

  .dx-auto-demo-action-wrap {
    margin-top: 17px;
  }

  .dx-auto-demo-action-button {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 10px 18px;
    font-size: 14px;
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {
  .dx-auto-demo-heading {
    font-size: 21px;
  }

  .dx-auto-demo-voice-area {
    grid-template-columns: minmax(22px, 1fr) 96px minmax(22px, 1fr);
  }

  .dx-auto-demo-mic-button {
    width: 96px;
    height: 96px;
  }

  .dx-auto-demo-mic-icon {
    width: 39px;
    height: 39px;
  }

  .dx-auto-demo-wave {
    gap: 2px;
  }

  .dx-auto-demo-wave span {
    width: 2px;
    flex-basis: 2px;
  }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .dx-auto-demo-wave span,
  .dx-auto-demo-mic-button {
    animation: none;
  }
}

/* =========================================================
   END - DEN.AI AUTOMATIC VOICE DEMO SECTION
   ========================================================= */

/*-- END - 5th CARD --*/


/*-- START - 6th CARD --*/

/* =========================================================
   START - DEN.AI FEATURE SUITE SECTION
   Unique selector prefix: dx-feature-suite-
   ========================================================= */

.dx-feature-suite-section {
  width: 100%;
  padding: 24px 20px;
  background: #f7faff;
  box-sizing: border-box;
}

.dx-feature-suite-container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 14px 28px 24px;
  background: #ffffff;
  border: 1px solid #e1eaf7;
  border-radius: 16px;
  box-shadow:
    0 2px 8px rgba(31, 73, 145, 0.035),
    0 8px 22px rgba(31, 73, 145, 0.05);
  box-sizing: border-box;
}

/* =========================================================
   SECTION HEADING
   ========================================================= */

.dx-feature-suite-heading {
  margin: 0 0 18px;
  text-align: center;
  color: #0753e6;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.04em;
}

/* =========================================================
   FEATURE GRID
   ========================================================= */

.dx-feature-suite-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: 100%;
}

/* =========================================================
   FEATURE ITEM
   ========================================================= */

.dx-feature-suite-item {
  position: relative;
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
  padding: 4px 18px 6px;
}

/* Vertical separators */
.dx-feature-suite-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 0;
  width: 1px;
  height: calc(100% - 10px);
  background: #d8e4f4;
}

/* =========================================================
   ICON
   ========================================================= */

.dx-feature-suite-icon-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 45px;
  min-width: 45px;
  padding-top: 2px;
  color: #0754e6;
}

.dx-feature-suite-icon {
  display: block;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   FEATURE COPY
   ========================================================= */

.dx-feature-suite-copy {
  min-width: 0;
}

.dx-feature-suite-title {
  margin: 0;
  color: #0754e6;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
  white-space: nowrap;
}

.dx-feature-suite-text {
  margin: 12px 0 0;
  color: #555b65;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.01em;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {
  .dx-feature-suite-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 24px;
  }

  .dx-feature-suite-item:nth-child(3)::after,
  .dx-feature-suite-item:nth-child(6)::after {
    display: none;
  }

  .dx-feature-suite-item:nth-child(n + 4) {
    padding-top: 20px;
    border-top: 1px solid #e1eaf6;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {
  .dx-feature-suite-section {
    padding: 18px 10px;
  }

  .dx-feature-suite-container {
    padding: 18px 14px 20px;
    border-radius: 14px;
  }

  .dx-feature-suite-heading {
    margin-bottom: 16px;
    font-size: 23px;
  }

  .dx-feature-suite-grid {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .dx-feature-suite-item {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 14px;
    padding: 17px 6px;
  }

  .dx-feature-suite-item:not(:last-child)::after {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    display: block;
  }

  .dx-feature-suite-item:nth-child(n + 4) {
    padding-top: 17px;
    border-top: 0;
  }

  .dx-feature-suite-icon-wrap {
    width: 50px;
    min-width: 50px;
  }

  .dx-feature-suite-icon {
    width: 38px;
    height: 38px;
  }

  .dx-feature-suite-title {
    font-size: 16px;
    white-space: normal;
  }

  .dx-feature-suite-text {
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.65;
  }
}

/* =========================================================
   END - DEN.AI FEATURE SUITE SECTION
   ========================================================= */

/*-- END - 6th CARD --*/

/*-- START - 7th CARD --*/


/* =========================================================
   START - INDUSTRY USE CASE SECTION
   Unique selector prefix: dx-industry-scene-
   ========================================================= */

.dx-industry-scene-section {
  width: 100%;
  padding: 24px 20px;
  background: #f6f9fd;
  box-sizing: border-box;
}

.dx-industry-scene-container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px 56px 20px;
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(224, 236, 255, 0.22),
      rgba(255, 255, 255, 0) 62%
    ),
    #ffffff;
  border: 1px solid #dfe8f6;
  border-radius: 17px;
  box-shadow:
    0 2px 8px rgba(29, 73, 142, 0.035),
    0 9px 26px rgba(29, 73, 142, 0.05);
  box-sizing: border-box;
}

/* =========================================================
   SECTION HEADING
   ========================================================= */

.dx-industry-scene-heading-wrap {
  margin-bottom: 12px;
  text-align: center;
}

.dx-industry-scene-heading {
  margin: 0;
  color: #111111;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 29px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.06em;
}

.dx-industry-scene-subheading {
  margin: 5px 0 0;
  color: #535860;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
}

/* =========================================================
   INDUSTRY CARD GRID
   ========================================================= */

.dx-industry-scene-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

/* =========================================================
   INDUSTRY CARD
   ========================================================= */

.dx-industry-scene-card {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 132px;
  padding: 13px 25px 12px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #e1eaf7;
  border-radius: 14px;
  box-shadow:
    0 3px 10px rgba(34, 78, 148, 0.045),
    0 8px 20px rgba(34, 78, 148, 0.035);
  box-sizing: border-box;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.dx-industry-scene-card:hover {
  transform: translateY(-2px);
  border-color: #c8d9f5;
  box-shadow:
    0 6px 15px rgba(34, 78, 148, 0.075),
    0 12px 25px rgba(34, 78, 148, 0.055);
}

/* =========================================================
   CARD ICON
   ========================================================= */

.dx-industry-scene-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  color: #0754e6;
}

.dx-industry-scene-icon {
  display: block;
  width: 72px;
  height: 72px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   CARD CONTENT
   ========================================================= */

.dx-industry-scene-content {
  min-width: 0;
  padding-left: 4px;
}

.dx-industry-scene-title {
  margin: 0;
  color: #161616;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}

.dx-industry-scene-description {
  margin: 3px 0 7px;
  color: #555a62;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.55;
}

/* =========================================================
   TAGS
   ========================================================= */

.dx-industry-scene-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.dx-industry-scene-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 21px;
  padding: 2px 13px;
  background: linear-gradient(
    180deg,
    #edf3ff 0%,
    #dfe9ff 100%
  );
  border-radius: 999px;
  color: #0754e6;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* =========================================================
   DETAIL LINK
   ========================================================= */

.dx-industry-scene-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: #0754e6;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
  transition:
    gap 0.2s ease,
    color 0.2s ease;
}

.dx-industry-scene-link:hover {
  gap: 12px;
  color: #0343c6;
}

.dx-industry-scene-arrow {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   BOTTOM ACTION BUTTON
   ========================================================= */

.dx-industry-scene-action-wrap {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.dx-industry-scene-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-width: 390px;
  min-height: 44px;
  padding: 9px 28px;
  background: linear-gradient(
    110deg,
    #0758e8 0%,
    #0845cf 100%
  );
  border: 1px solid #0645cf;
  border-radius: 7px;
  color: #ffffff;
  box-shadow:
    0 4px 12px rgba(9, 73, 205, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.dx-industry-scene-action-button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 7px 18px rgba(9, 73, 205, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.dx-industry-scene-action-arrow {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .dx-industry-scene-section {
    padding: 22px 14px;
  }

  .dx-industry-scene-container {
    padding: 19px 24px 20px;
  }

  .dx-industry-scene-heading {
    font-size: 26px;
  }

  .dx-industry-scene-card {
    grid-template-columns: 84px minmax(0, 1fr);
    padding: 14px 16px;
  }

  .dx-industry-scene-icon-wrap {
    width: 72px;
    height: 72px;
  }

  .dx-industry-scene-icon {
    width: 60px;
    height: 60px;
  }

  .dx-industry-scene-title {
    font-size: 16px;
  }

  .dx-industry-scene-description {
    font-size: 10px;
  }

  .dx-industry-scene-tag {
    padding: 2px 10px;
    font-size: 9px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {
  .dx-industry-scene-section {
    padding: 18px 10px;
  }

  .dx-industry-scene-container {
    padding: 19px 12px 18px;
    border-radius: 14px;
  }

  .dx-industry-scene-heading-wrap {
    margin-bottom: 15px;
  }

  .dx-industry-scene-heading {
    font-size: 23px;
  }

  .dx-industry-scene-subheading {
    font-size: 12px;
    line-height: 1.7;
  }

  .dx-industry-scene-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dx-industry-scene-card {
    grid-template-columns: 82px minmax(0, 1fr);
    min-height: 124px;
    padding: 14px 14px;
  }

  .dx-industry-scene-icon-wrap {
    width: 70px;
    height: 70px;
  }

  .dx-industry-scene-icon {
    width: 58px;
    height: 58px;
  }

  .dx-industry-scene-title {
    font-size: 17px;
  }

  .dx-industry-scene-description {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.6;
  }

  .dx-industry-scene-tags {
    gap: 6px;
  }

  .dx-industry-scene-tag {
    padding: 3px 10px;
    font-size: 9px;
  }

  .dx-industry-scene-link {
    margin-top: 8px;
    font-size: 13px;
  }

  .dx-industry-scene-action-wrap {
    margin-top: 13px;
  }

  .dx-industry-scene-action-button {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {
  .dx-industry-scene-card {
    grid-template-columns: 68px minmax(0, 1fr);
    padding: 13px 10px;
  }

  .dx-industry-scene-icon-wrap {
    width: 60px;
    height: 60px;
  }

  .dx-industry-scene-icon {
    width: 50px;
    height: 50px;
  }

  .dx-industry-scene-title {
    font-size: 15px;
  }

  .dx-industry-scene-description {
    font-size: 10px;
  }
}

/* =========================================================
   END - INDUSTRY USE CASE SECTION
   ========================================================= */


/*-- END - 7th CARD --*/


/*-- START - 8th CARD --*/

/* =========================================================
   START - DEN.AI DOWNLOAD SECTION
   Unique prefix: dx-download-card-
   ========================================================= */

/* =========================================================
   SECTION WRAPPER
   ========================================================= */

.dx-download-card-section {
  width: 100%;
  padding: 42px 20px;
  background: #f5f8fc;
  box-sizing: border-box;
}

/* =========================================================
   MAIN DOWNLOAD CARD
   ========================================================= */

.dx-download-card-panel {
  position: relative;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: center;

  width: 100%;
  max-width: 1160px;
  min-height: 260px;

  margin: 0 auto;
  padding: 44px 70px;

  overflow: visible;

  background:
    linear-gradient(
      105deg,
      #ffffff 0%,
      #f8fbff 46%,
      #edf5ff 100%
    );

  border: 1px solid #d5e3f5;
  border-radius: 22px;

  box-shadow:
    0 3px 10px rgba(31, 71, 132, 0.045),
    0 12px 30px rgba(31, 71, 132, 0.07);

  box-sizing: border-box;
}

/* =========================================================
   DECORATIVE BACKGROUND
   ========================================================= */

.dx-download-card-decoration {
  position: absolute;
  left: 40px;
  bottom: 0;

  width: 640px;
  height: 170px;

  overflow: hidden;
  opacity: 0.42;
  pointer-events: none;
}

.dx-download-card-decoration::before {
  content: "";

  position: absolute;
  left: 10px;
  bottom: 0;

  width: 10px;
  height: 82px;

  background: rgba(92, 151, 235, 0.12);

  box-shadow:
    34px -30px 0 rgba(92, 151, 235, 0.09),
    70px -4px 0 rgba(92, 151, 235, 0.1),
    108px -52px 0 rgba(92, 151, 235, 0.08),
    148px -16px 0 rgba(92, 151, 235, 0.09),
    192px -66px 0 rgba(92, 151, 235, 0.07),
    240px -24px 0 rgba(92, 151, 235, 0.08),
    290px -42px 0 rgba(92, 151, 235, 0.07);
}

.dx-download-card-decoration::after {
  content: "";

  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 110px;

  background:
    linear-gradient(
      to top,
      rgba(138, 183, 244, 0.13),
      rgba(138, 183, 244, 0)
    );
}

/* =========================================================
   LEFT CONTENT
   ========================================================= */

.dx-download-card-content {
  position: relative;
  z-index: 2;

  min-width: 0;
  padding-left: 120px;
}

/* =========================================================
   TITLE
   ========================================================= */

.dx-download-card-title {
  margin: 0;

  color: #171717;

  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;

  font-size: 32px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.025em;
}

/* =========================================================
   DESCRIPTION
   ========================================================= */

.dx-download-card-description {
  margin: 12px 0 0;

  color: #555b64;

  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;

  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

/* =========================================================
   BUTTON AREA
   ========================================================= */

.dx-download-card-actions {
  display: flex;
  align-items: center;
  gap: 26px;

  margin-top: 24px;
}

/* =========================================================
   COMMON BUTTON
   ========================================================= */

.dx-download-card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  min-width: 220px;
  min-height: 58px;

  padding: 12px 26px;

  border-radius: 9px;

  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;

  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;

  text-decoration: none;
  box-sizing: border-box;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.dx-download-card-button-primary {
  color: #ffffff;

  background:
    linear-gradient(
      110deg,
      #0759eb 0%,
      #0846d2 100%
    );

  border: 2px solid #0754df;

  box-shadow:
    0 6px 16px rgba(7, 83, 216, 0.21),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* =========================================================
   OUTLINE BUTTON
   ========================================================= */

.dx-download-card-button-outline {
  color: #0755df;

  background: #ffffff;
  border: 2px solid #1762ea;
}

/* =========================================================
   BUTTON HOVER
   ========================================================= */

.dx-download-card-button:hover {
  transform: translateY(-2px);
}

.dx-download-card-button-primary:hover {
  box-shadow:
    0 10px 22px rgba(7, 83, 216, 0.27),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.dx-download-card-button-outline:hover {
  background: #f2f6ff;
}

/* =========================================================
   BUTTON ICON
   ========================================================= */

.dx-download-card-button-icon {
  width: 21px;
  height: 21px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   BOOKLET AREA
   Allows the book to overlap the card
   ========================================================= */

.dx-download-card-book-area {
  position: absolute;
  z-index: 5;

  top: -36px;
  right: 95px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 270px;
  height: 310px;

  overflow: visible;
  pointer-events: none;
}

/* =========================================================
   BOOKLET GLOW
   ========================================================= */

.dx-download-card-book-glow {
  position: absolute;

  width: 300px;
  height: 190px;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(69, 140, 255, 0.26) 0%,
      rgba(91, 159, 255, 0.13) 44%,
      rgba(91, 159, 255, 0) 74%
    );

  transform: rotate(-7deg);
}

/* =========================================================
   BOOKLET IMAGE
   ========================================================= */

.dx-download-card-book-image {
  position: relative;
  z-index: 6;

  display: block;

  width: 305px;
  max-width: none;
  height: auto;

  object-fit: contain;
  object-position: center;

  transform:
    translateY(4px)
    rotate(7deg);

  filter:
    drop-shadow(
      0 18px 16px rgba(34, 61, 103, 0.32)
    );
}

/* =========================================================
   LARGE TABLET
   ========================================================= */

@media (max-width: 1000px) {
  .dx-download-card-panel {
    grid-template-columns: minmax(0, 1fr) 250px;
    min-height: 240px;
    padding: 38px 40px;
  }

  .dx-download-card-content {
    padding-left: 40px;
  }

  .dx-download-card-title {
    font-size: 28px;
  }

  .dx-download-card-description {
    font-size: 13px;
  }

  .dx-download-card-button {
    min-width: 185px;
    min-height: 52px;
    font-size: 14px;
  }

  .dx-download-card-book-area {
    top: -22px;
    right: 20px;
    width: 230px;
    height: 275px;
  }

  .dx-download-card-book-image {
    width: 170px;
  }

  .dx-download-card-book-glow {
    width: 250px;
    height: 165px;
  }
}

/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .dx-download-card-section {
    padding: 28px 12px;
  }

  .dx-download-card-panel {
    display: flex;
    flex-direction: column;

    min-height: 0;

    padding:
      225px
      22px
      28px;

    overflow: hidden;

    text-align: center;
  }

  .dx-download-card-decoration {
    left: 0;
    width: 100%;
    opacity: 0.24;
  }

  .dx-download-card-content {
    width: 100%;
    padding-left: 0;
  }

  .dx-download-card-title {
    font-size: 25px;
  }

  .dx-download-card-description {
    font-size: 13px;
  }

  .dx-download-card-actions {
    flex-direction: column;
    gap: 13px;

    width: 100%;
  }

  .dx-download-card-button {
    width: 100%;
    min-width: 0;
  }

  .dx-download-card-book-area {
    top: 18px;
    right: 50%;

    width: 220px;
    height: 190px;

    transform: translateX(50%);
  }

  .dx-download-card-book-image {
    width: 145px;

    transform:
      translateY(0)
      rotate(5deg);
  }

  .dx-download-card-book-glow {
    width: 240px;
    height: 145px;
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {
  .dx-download-card-panel {
    padding:
      205px
      16px
      24px;

    border-radius: 17px;
  }

  .dx-download-card-title {
    font-size: 22px;
  }

  .dx-download-card-description {
    font-size: 12px;
  }

  .dx-download-card-book-area {
    top: 16px;
    width: 195px;
    height: 170px;
  }

  .dx-download-card-book-image {
    width: 128px;
  }

  .dx-download-card-book-glow {
    width: 210px;
    height: 130px;
  }

  .dx-download-card-button {
    min-height: 50px;
    font-size: 14px;
  }
}

/* =========================================================
   END - DEN.AI DOWNLOAD SECTION
   ========================================================= */

/*-- END - 8th CARD --*/

/*-- START - 9th CARD --*/

/* =========================================================
   START - DEN.AI FOOTER
   Unique selector prefix: dx-denai-footer-
   ========================================================= */

.dx-denai-footer-section {
  width: 100%;
  padding: 0 20px 22px;
  background: #f7f9fc;
  box-sizing: border-box;
}

.dx-denai-footer-container {
  display: grid;
  grid-template-columns:
    minmax(220px, 1.2fr)
    minmax(130px, 0.7fr)
    minmax(130px, 0.7fr)
    minmax(180px, 0.8fr);
  grid-template-rows: auto auto;
  column-gap: 55px;
  row-gap: 18px;
  align-items: start;

  width: 100%;
  max-width: 1160px;
  min-height: 160px;

  margin: 0 auto;
  padding: 22px 48px 18px;

  background: #ffffff;
  border: 1px solid #e5e9ef;
  border-radius: 0;

  box-shadow:
    0 2px 7px rgba(30, 62, 112, 0.025),
    0 7px 18px rgba(30, 62, 112, 0.035);

  box-sizing: border-box;
}

/* =========================================================
   BRAND COLUMN
   ========================================================= */

.dx-denai-footer-brand {
  grid-column: 1;
  grid-row: 1 / 3;

  min-width: 0;
}

.dx-denai-footer-logo-link {
  display: inline-block;
  text-decoration: none;
}

.dx-denai-footer-logo {
  display: block;
  width: 92px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.dx-denai-footer-description {
  margin: 16px 0 0;

  color: #4d5158;

  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;

  font-size: 11px;
  font-weight: 500;
  line-height: 1.9;
}

.dx-denai-footer-copyright {
  margin: 24px 0 0;

  color: #595d63;

  font-family:
    "Noto Sans JP",
    Arial,
    sans-serif;

  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
}

/* =========================================================
   LINK COLUMNS
   ========================================================= */

.dx-denai-footer-column {
  min-width: 0;
}

.dx-denai-footer-column-title {
  margin: 0 0 13px;

  color: #222222;

  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;

  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.dx-denai-footer-list {
  margin: 0;
  padding: 0;

  list-style: none;
}

.dx-denai-footer-list li + li {
  margin-top: 12px;
}

.dx-denai-footer-list a {
  color: #555a61;

  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;

  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;

  text-decoration: none;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.dx-denai-footer-list a:hover {
  color: #0754e6;
}

/* =========================================================
   SOCIAL ICONS
   ========================================================= */

.dx-denai-footer-socials {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;

  min-width: 0;
  padding-top: 4px;
}

.dx-denai-footer-social-link {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  border-radius: 50%;

  background: #f2f2f2;
  color: #777777;

  font-size: 16px;
  line-height: 1;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.dx-denai-footer-social-link:hover {
  transform: translateY(-2px);

  background: #0754e6;
  color: #ffffff;
}

/* =========================================================
   LEGAL LINKS
   ========================================================= */

.dx-denai-footer-legal {
  grid-column: 2 / 5;
  grid-row: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;

  min-width: 0;
  padding-right: 8px;
}

.dx-denai-footer-legal a {
  color: #555a61;

  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;

  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;

  text-decoration: none;
  white-space: nowrap;

  transition: color 0.2s ease;
}

.dx-denai-footer-legal a:hover {
  color: #0754e6;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .dx-denai-footer-container {
    grid-template-columns:
      minmax(200px, 1fr)
      minmax(120px, 0.7fr)
      minmax(120px, 0.7fr);

    column-gap: 30px;

    padding: 22px 28px 20px;
  }

  .dx-denai-footer-socials {
    grid-column: 1 / 4;
    grid-row: 3;

    justify-content: center;
    padding-top: 5px;
  }

  .dx-denai-footer-legal {
    grid-column: 2 / 4;
    gap: 20px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {
  .dx-denai-footer-section {
    padding: 0 10px 14px;
  }

  .dx-denai-footer-container {
    display: block;

    padding: 26px 20px 22px;

    text-align: center;
  }

  .dx-denai-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .dx-denai-footer-logo {
    width: 105px;
  }

  .dx-denai-footer-description {
    margin-top: 14px;
    font-size: 12px;
  }

  .dx-denai-footer-copyright {
    margin-top: 18px;
  }

  .dx-denai-footer-column {
    margin-top: 26px;
  }

  .dx-denai-footer-column-title {
    margin-bottom: 11px;
    font-size: 13px;
  }

  .dx-denai-footer-list li + li {
    margin-top: 10px;
  }

  .dx-denai-footer-list a {
    font-size: 12px;
  }

  .dx-denai-footer-socials {
    justify-content: center;
    margin-top: 26px;
  }

  .dx-denai-footer-social-link {
    width: 44px;
    height: 44px;
  }

  .dx-denai-footer-legal {
    flex-direction: column;
    justify-content: center;
    gap: 12px;

    margin-top: 26px;
    padding: 20px 0 0;

    border-top: 1px solid #e5e9ef;
  }

  .dx-denai-footer-legal a {
    font-size: 11px;
    white-space: normal;
  }
}

/* =========================================================
   END - DEN.AI FOOTER
   ========================================================= */

/*-- END - 9th CARD --*/
/* =========================================================
   FINAL RESPONSIVE POLISH LAYER
   Keeps the approved design while normalizing typography,
   spacing, icon placement and behavior across resolutions.
   ========================================================= */

:root {
  --dx-page-max: 1160px;
  --dx-side-gap: clamp(12px, 2.4vw, 32px);
  --dx-section-gap: clamp(24px, 4vw, 52px);
  --dx-radius-lg: clamp(14px, 1.6vw, 22px);
  --dx-title-lg: clamp(25px, 2.45vw, 38px);
  --dx-title-md: clamp(21px, 1.8vw, 30px);
  --dx-body: clamp(12px, 1vw, 15px);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  background: #f6f9fd;
  font-family: "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

.dx-denai-hero-stage {
  display: flex;
  width: 100%;
  min-height: min(100vh, 820px);
  align-items: center;
  background-image: url("../img/headerimgbg_ucase.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Shared section width and vertical rhythm */
.dx-denai-problems,
.dx-denai-results,
.dx-denai-reasons-inner,
.dx-ivr-compare-box,
.dx-auto-demo-container,
.dx-feature-suite-container,
.dx-industry-scene-container,
.dx-download-card-panel,
.dx-denai-footer-container {
  width: min(calc(100% - (var(--dx-side-gap) * 2)), var(--dx-page-max));
  max-width: var(--dx-page-max);
  margin-left: auto;
  margin-right: auto;
}

.dx-denai-problems,
.dx-denai-results,
.dx-denai-reasons,
.dx-ivr-compare-section,
.dx-auto-demo-section,
.dx-feature-suite-section,
.dx-industry-scene-section,
.dx-download-card-section {
  margin-top: var(--dx-section-gap);
}

/* Typography normalization */
.dx-denai-problems-heading h2,
.dx-denai-results-title,
.dx-denai-reasons-title,
.dx-ivr-compare-title,
.dx-auto-demo-heading,
.dx-feature-suite-heading,
.dx-industry-scene-heading,
.dx-download-card-title {
  font-size: var(--dx-title-md);
  line-height: 1.35;
  text-wrap: balance;
}

.dx-denai-problems-heading p,
.dx-industry-scene-subheading,
.dx-auto-demo-subheading,
.dx-download-card-description {
  font-size: var(--dx-body);
  line-height: 1.7;
}

/* Hero scaling */
.dx-denai-hero {
  width: min(100%, var(--dx-page-max));
  min-height: clamp(540px, 72vh, 760px);
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.dx-denai-hero-content {
  width: min(430px, 40vw);
  margin-left: clamp(24px, 4vw, 58px);
  padding-top: 0;
}

.dx-denai-hero-title {
  font-size: clamp(44px, 4.2vw, 62px);
  line-height: 1.14;
  letter-spacing: clamp(1px, 0.3vw, 4px);
}

.dx-denai-hero-description {
  font-size: clamp(15px, 1.35vw, 19px);
}

.dx-denai-hero-button {
  min-width: 0;
  width: clamp(155px, 15vw, 185px);
  height: clamp(42px, 4vw, 48px);
  font-size: clamp(12px, 1vw, 14px);
}

.dx-denai-patent-card {
  width: min(100%, 410px);
  grid-template-columns: clamp(100px, 10vw, 135px) minmax(0, 1fr);
}

.dx-denai-patent-copy h2,
.dx-denai-patent-copy p {
  white-space: normal;
}

/* First problems card */
.dx-denai-problems {
  padding-left: clamp(18px, 4vw, 48px);
  padding-right: clamp(18px, 4vw, 48px);
}

.dx-denai-problems-grid {
  gap: 0;
}

.dx-denai-problem-item {
  min-width: 0;
}

.dx-denai-problem-text h3,
.dx-denai-problem-text p {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Results section */
.dx-denai-results {
  position: relative;
  overflow: hidden;
}

.dx-denai-results-content,
.dx-denai-results-diagram {
  min-width: 0;
}

/* Reasons */
.dx-denai-reasons-grid {
  align-items: stretch;
}

.dx-denai-reason-card {
  height: 100%;
}

/* Comparison table */
.dx-ivr-compare-table {
  border-radius: 11px;
}

.dx-ivr-compare-header,
.dx-ivr-compare-row {
  align-items: stretch;
}

.dx-ivr-compare-label,
.dx-ivr-compare-denai-value,
.dx-ivr-compare-ivr-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Demo panel and waves */
.dx-auto-demo-panel {
  min-width: 0;
}

.dx-auto-demo-wave span {
  will-change: transform, opacity;
}

/* Feature suite */
.dx-feature-suite-item {
  min-width: 0;
}

.dx-feature-suite-title {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Industry cards */
.dx-industry-scene-card,
.dx-industry-scene-content {
  min-width: 0;
}

.dx-industry-scene-description {
  overflow-wrap: anywhere;
}

/* Download booklet */
.dx-download-card-panel {
  isolation: isolate;
}

.dx-download-card-content {
  min-width: 0;
}

.dx-download-card-book-image {
  object-fit: contain;
}

/* Footer */
.dx-denai-footer-container {
  box-sizing: border-box;
}

/* =========================================================
   DESKTOP / SMALL LAPTOP
   ========================================================= */
@media (max-width: 1180px) {
  .dx-denai-results {
    min-height: 380px;
  }

  .dx-denai-results-content {
    width: 52%;
  }

  .dx-denai-results-diagram {
    left: 53%;
    transform: scale(0.9);
    transform-origin: center center;
  }

  .dx-denai-reasons-grid,
  .dx-feature-suite-grid {
    gap: 12px;
  }

  .dx-download-card-content {
    padding-left: clamp(30px, 6vw, 90px);
  }
}

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 900px) {
  .dx-denai-hero-stage {
    min-height: auto;
    padding: 42px 0;
    background-position: 58% center;
  }

  .dx-denai-hero {
    min-height: 570px;
  }

  .dx-denai-hero-content {
    width: min(440px, 58vw);
    margin-left: var(--dx-side-gap);
    transform: none;
  }

  .dx-denai-hero-title {
    font-size: clamp(40px, 6vw, 54px);
  }

  .dx-denai-problems-grid {
    grid-template-columns: 1fr;
  }

  .dx-denai-problem-item,
  .dx-denai-problem-item:first-child,
  .dx-denai-problem-item:nth-child(2),
  .dx-denai-problem-item:last-child {
    padding: 18px 8px;
  }

  .dx-denai-problem-item:not(:last-child)::after {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
  }

  .dx-denai-results {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 28px 24px;
  }

  .dx-denai-results-content {
    position: relative;
    inset: auto;
    width: 100%;
  }

  .dx-denai-results-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dx-denai-results-stat-card,
  .dx-denai-results-button {
    width: 100%;
  }

  .dx-denai-results-diagram {
    position: relative;
    top: auto;
    left: 50%;
    margin-top: 22px;
    transform: translateX(-50%) scale(0.82);
    transform-origin: top center;
  }

  .dx-denai-reasons-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dx-denai-reason-card:last-child {
    grid-column: 1 / -1;
  }

  .dx-auto-demo-panel {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .dx-auto-demo-divider {
    width: 100%;
    height: 1px;
  }

  .dx-auto-demo-conversation {
    padding-left: 0;
  }

  .dx-feature-suite-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dx-industry-scene-grid {
    grid-template-columns: 1fr;
  }

  .dx-download-card-panel {
    min-height: 250px;
    padding-right: 250px;
  }

  .dx-download-card-book-area {
    right: 10px;
  }

  .dx-denai-footer-container {
    column-gap: 24px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 650px) {
  :root {
    --dx-side-gap: 12px;
    --dx-section-gap: 24px;
  }

  body {
    background: #f6f9fd;
  }

  .dx-denai-hero-stage {
    display: block;
    padding: 0;
    background-position: 61% center;
    background-size: cover;
  }

  .dx-denai-hero {
    min-height: 680px;
    align-items: flex-start;
    padding: 34px 18px 36px;
    background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.76) 52%, rgba(255,255,255,.1) 100%);
  }

  .dx-denai-hero-content {
    width: 100%;
    margin: 0;
  }

  .dx-denai-hero-eyebrow {
    font-size: 12px;
    white-space: normal;
  }

  .dx-denai-hero-title {
    font-size: clamp(38px, 12vw, 52px);
    letter-spacing: 1px;
  }

  .dx-denai-hero-description {
    font-size: 15px;
  }

  .dx-denai-hero-features {
    flex-wrap: wrap;
    gap: 8px 18px;
  }

  .dx-denai-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .dx-denai-hero-button {
    width: 100%;
  }

  .dx-denai-patent-card {
    grid-template-columns: 92px minmax(0, 1fr);
    width: 100%;
  }

  .dx-denai-patent-image-wrap {
    width: 86px;
  }

  .dx-denai-problems,
  .dx-denai-results,
  .dx-denai-reasons-inner,
  .dx-ivr-compare-box,
  .dx-auto-demo-container,
  .dx-feature-suite-container,
  .dx-industry-scene-container,
  .dx-download-card-panel,
  .dx-denai-footer-container {
    width: calc(100% - 24px);
  }

  .dx-denai-problems,
  .dx-denai-results,
  .dx-denai-reasons-inner,
  .dx-ivr-compare-box,
  .dx-auto-demo-container,
  .dx-feature-suite-container,
  .dx-industry-scene-container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .dx-denai-results-stats,
  .dx-denai-reasons-grid,
  .dx-feature-suite-grid {
    grid-template-columns: 1fr;
  }

  .dx-denai-reason-card:last-child {
    grid-column: auto;
  }

  .dx-denai-results-diagram {
    width: 500px;
    max-width: none;
    transform: translateX(-50%) scale(0.62);
    margin-top: -20px;
    margin-bottom: -40px;
  }

  .dx-ivr-compare-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dx-ivr-compare-header,
  .dx-ivr-compare-row {
    min-width: 520px;
    grid-template-columns: 135px 190px 195px;
  }

  .dx-auto-demo-panel {
    display: block;
    padding: 22px 14px;
  }

  .dx-auto-demo-voice-area {
    grid-template-columns: minmax(28px, 1fr) 100px minmax(28px, 1fr);
    padding: 0;
  }

  .dx-auto-demo-mic-button {
    width: 100px;
    height: 100px;
  }

  .dx-auto-demo-wave {
    gap: 2px;
  }

  .dx-auto-demo-divider {
    margin: 24px 0;
  }

  .dx-feature-suite-item {
    padding: 16px 6px;
  }

  .dx-industry-scene-card {
    grid-template-columns: 70px minmax(0, 1fr);
    padding: 14px 12px;
  }

  .dx-industry-scene-icon-wrap {
    width: 62px;
    height: 62px;
  }

  .dx-industry-scene-icon {
    width: 52px;
    height: 52px;
  }

  .dx-industry-scene-action-button {
    width: 100%;
    min-width: 0;
  }

  .dx-download-card-panel {
    width: calc(100% - 24px);
    padding: 210px 18px 28px;
    overflow: hidden;
    text-align: center;
  }

  .dx-download-card-content {
    padding-left: 0;
  }

  .dx-download-card-actions {
    flex-direction: column;
    width: 100%;
  }

  .dx-download-card-button {
    width: 100%;
    min-width: 0;
  }

  .dx-download-card-book-area {
    top: 14px;
    right: 50%;
    width: 210px;
    height: 180px;
    transform: translateX(50%);
  }

  .dx-download-card-book-image {
    width: 135px;
  }

  .dx-denai-footer-container {
    display: block;
    padding: 26px 20px;
    text-align: center;
  }

  .dx-denai-footer-brand {
    align-items: center;
  }

  .dx-denai-footer-column,
  .dx-denai-footer-socials,
  .dx-denai-footer-legal {
    margin-top: 24px;
  }

  .dx-denai-footer-socials {
    justify-content: center;
  }

  .dx-denai-footer-legal {
    flex-direction: column;
    gap: 12px;
  }
}

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */
@media (max-width: 390px) {
  .dx-denai-hero {
    min-height: 700px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .dx-denai-hero-title {
    font-size: 37px;
  }

  .dx-denai-problem-item {
    align-items: flex-start;
  }

  .dx-denai-problem-icon {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
    margin-right: 12px;
  }

  .dx-auto-demo-heading,
  .dx-industry-scene-heading,
  .dx-download-card-title {
    font-size: 21px;
  }

  .dx-industry-scene-card {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .dx-industry-scene-icon-wrap,
  .dx-industry-scene-icon {
    width: 48px;
    height: 48px;
  }
}

/* =========================================================
   FINAL REQUESTED ADJUSTMENTS
   Equal card width, compact equal vertical spacing,
   button hover motion, and scroll reveal animation.
   ========================================================= */

:root {
  --dx-section-gap: clamp(14px, 1.6vw, 22px);
  --dx-hover-lift: -3px;
}

/* Keep every major card on exactly the same width line. */
.dx-denai-problems,
.dx-denai-results,
.dx-denai-reasons-inner,
.dx-ivr-compare-box,
.dx-auto-demo-container,
.dx-feature-suite-container,
.dx-industry-scene-container,
.dx-download-card-panel,
.dx-denai-footer-container {
  width: min(calc(100% - (var(--dx-side-gap) * 2)), var(--dx-page-max));
  max-width: var(--dx-page-max);
  margin-left: auto;
  margin-right: auto;
}

/* Compact and equal vertical distance between approved sections. */
.dx-denai-problems,
.dx-denai-results,
.dx-denai-reasons,
.dx-ivr-compare-section,
.dx-auto-demo-section,
.dx-feature-suite-section,
.dx-industry-scene-section,
.dx-download-card-section,
.dx-denai-footer-section {
  margin-top: var(--dx-section-gap);
  margin-bottom: 0;
}

/* Remove extra outer padding that created inconsistent gaps. */
.dx-ivr-compare-section,
.dx-auto-demo-section,
.dx-feature-suite-section,
.dx-industry-scene-section,
.dx-download-card-section {
  padding-top: 0;
  padding-bottom: 0;
}

/* Unified polished hover animation for all website buttons and CTAs. */
.dx-denai-hero-button,
.dx-denai-results-button,
.dx-industry-scene-link,
.dx-industry-scene-action-button,
.dx-auto-demo-mic-button,
.dx-auto-demo-action-button,
.dx-download-card-button,
.dx-denai-footer-social-link,
.header-actions .btn,
.dx-ivr-compare-header-denai,
.dx-ivr-compare-header-ivr {
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    background-color 0.24s ease,
    border-color 0.24s ease,
    color 0.24s ease,
    filter 0.24s ease;
}

@media (hover: hover) and (pointer: fine) {
  .dx-denai-hero-button:hover,
  .dx-denai-results-button:hover,
  .dx-industry-scene-action-button:hover,
  .dx-auto-demo-action-button:hover,
  .dx-download-card-button:hover,
  .header-actions .btn:hover {
    transform: translateY(var(--dx-hover-lift));
    filter: brightness(1.04);
    box-shadow: 0 10px 24px rgba(7, 83, 216, 0.22);
  }

  .dx-industry-scene-link:hover {
    transform: translateX(4px);
  }

  .dx-auto-demo-mic-button:hover,
  .dx-denai-footer-social-link:hover {
    transform: translateY(var(--dx-hover-lift)) scale(1.04);
  }
}

.dx-denai-hero-button:active,
.dx-denai-results-button:active,
.dx-industry-scene-action-button:active,
.dx-auto-demo-action-button:active,
.dx-download-card-button:active,
.header-actions .btn:active {
  transform: translateY(0) scale(0.98);
}

/* Scroll reveal animation. JavaScript adds dx-visible on entry. */
.dx-page-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s ease var(--dx-delay, 0ms),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--dx-delay, 0ms);
  will-change: opacity, transform;
}

.dx-page-reveal.dx-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 650px) {
  :root {
    --dx-section-gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dx-page-reveal,
  .dx-page-reveal.dx-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   FINAL FIX - SINGLE PAGE SCROLLBAR AND EQUAL REASONS WIDTH
   ========================================================= */

/* Keep only the browser/document scrollbar. */
html {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body {
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* The outer reasons card now follows the exact same width line as all cards. */
.dx-denai-reasons {
  width: min(calc(100% - (var(--dx-side-gap) * 2)), var(--dx-page-max)) !important;
  max-width: var(--dx-page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.dx-denai-reasons-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Force all five reason cards to use identical column widths. */
.dx-denai-reasons-grid {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
}

.dx-denai-reason-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.dx-denai-reason-header,
.dx-denai-reason-title,
.dx-denai-reason-text {
  min-width: 0 !important;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .dx-denai-reasons-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dx-denai-reason-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .dx-denai-reasons {
    width: calc(100% - 24px) !important;
  }

  .dx-denai-reasons-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dx-denai-reason-card:last-child {
    grid-column: auto;
  }
}

/* =========================================================
   FINAL SINGLE-SCROLLBAR CORRECTION
   The document scrolls through the root element only.
   ========================================================= */
html {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body {
  overflow-x: clip !important;
  overflow-y: clip !important;
}

/* Prevent the closed mobile navigation from creating its own scrollbar. */
@media (max-width: 900px) {
  .nav-menu {
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  .nav-menu::-webkit-scrollbar {
    display: none !important;
  }

  #menu-toggle:checked ~ .nav-menu {
    overflow-y: auto !important;
    scrollbar-width: thin !important;
  }
}


/*-- START --*/

/* =========================================================
   RESET
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* =========================================================
   DEN.AI HERO — LEFT CONTENT ONLY
   Existing background image remains untouched
========================================================= */

.dx-denai-hero {
  position: relative;
  width: 100%;
  min-height: 527px;
  overflow: hidden;
}

/* Left-side content placement */
.dx-denai-hero-content {
  position: relative;
  z-index: 2;
  width: 430px;
  margin-left: 52px;
  padding-top: 20px;
  box-sizing: border-box;
  color: #07192f;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    "Inter"
    sans-serif;
}

/* Top blue caption */
.dx-denai-hero-eyebrow {
  margin: 0 0 10px;
  color: #0759de;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Main Japanese title */
.dx-denai-hero-title {
  margin: 0;
  color: #07192f;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 55px;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: 4.5px;
  text-shadow: 0 1px 1px rgba(7, 25, 47, 0.08);
}

/* Description */
.dx-denai-hero-description {
  margin: 9px 0 10px;
  color: #1f2937;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.4px;
}

/* Feature checkmarks */
.dx-denai-hero-features {
  display: flex;
  align-items: center;
  gap: 45px;
  width: 100%;
  margin-top: 5px;
}

.dx-denai-hero-feature {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #30343b;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.dx-denai-hero-feature i {
  color: #054ee5;
  font-size: 17px;
  font-weight: 900;
}

/* CTA button row */
.dx-denai-hero-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 14px;
}

.dx-denai-hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 177px;
  height: 42px;
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.dx-denai-hero-button i {
  font-size: 14px;
}

/* Solid button */
.dx-denai-hero-button-primary {
  border: 2px solid #064cdc;
  background: #064cdc;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(6, 76, 220, 0.16);
}

/* Outline button */
.dx-denai-hero-button-outline {
  border: 2px solid #1763ef;
  background: rgba(255, 255, 255, 0.82);
  color: #0759de;
}

/* Button hover */
.dx-denai-hero-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 13px rgba(6, 76, 220, 0.19);
}

.dx-denai-hero-button-outline:hover {
  background: #f2f6ff;
}

/* =========================================================
   Patent section
========================================================= */

.dx-denai-patent-card {
  display: grid;
  grid-template-columns: 135px 1fr;
  align-items: center;
  width: 400px;
  min-height: 94px;
  margin-top: 15px;
  padding: 7px 14px 7px 9px;
  border: 2px solid #396ff2;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
}

/* Real patent image */
.dx-denai-patent-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 125px;
  height: 78px;
  overflow: hidden;
}

.dx-denai-patent-image {
  display: block;
  width: 108px;
  height: 74px;
  max-width: none;
  object-fit: contain;
}

/* Patent text */
.dx-denai-patent-copy {
  align-self: center;
  padding-left: 4px;
}

.dx-denai-patent-copy h2 {
  margin: 0 0 5px;
  color: #0759de;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
}

.dx-denai-patent-copy p {
  margin: 0;
  color: #252c34;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0;
  white-space: nowrap;
}

/* =========================================================
   Tablet
========================================================= */

@media (max-width: 900px) {
  .dx-denai-hero {
    min-height: 500px;
  }

  .dx-denai-hero-content {
    margin-left: 24px;
    transform: scale(0.9);
    transform-origin: top left;
  }
}

/* =========================================================
   Mobile
========================================================= */

@media (max-width: 600px) {
  .dx-denai-hero {
    min-height: auto;
    padding: 24px 18px 30px;
    box-sizing: border-box;
  }

  .dx-denai-hero-content {
    width: 100%;
    margin-left: 0;
    padding-top: 0;
    transform: none;
  }

  .dx-denai-hero-eyebrow {
    font-size: 12px;
    white-space: normal;
  }

  .dx-denai-hero-title {
    font-size: clamp(42px, 13vw, 55px);
  }

  .dx-denai-hero-description {
    font-size: 15px;
  }

  .dx-denai-hero-features {
    flex-wrap: wrap;
    gap: 10px 25px;
  }

  .dx-denai-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .dx-denai-hero-button {
    width: 100%;
  }

  .dx-denai-patent-card {
    grid-template-columns: 112px 1fr;
    width: 100%;
    padding-right: 10px;
  }

  .dx-denai-patent-image-wrap {
    width: 105px;
    height: 72px;
  }

  .dx-denai-patent-image {
    width: 98px;
    height: auto;
  }

  .dx-denai-patent-copy h2,
  .dx-denai-patent-copy p {
    white-space: normal;
  }

  .dx-denai-patent-copy h2 {
    font-size: 12px;
  }

  .dx-denai-patent-copy p {
    font-size: 9.5px;
  }
}

/*-- START - 1st CARD --*/


/* =========================================================
   MAIN CARD
========================================================= */

.dx-denai-problems {

  width: 100%;
  max-width: 1160px;
  min-height: 203px;
  margin: 50px auto;

  padding: 15px 48px 18px;

  background: #ffffff;
  border: 1px solid #edf3fc;
  border-radius: 14px;

  box-shadow:
    0 1px 5px rgba(36, 92, 180, 0.04),
    0 5px 18px rgba(36, 92, 180, 0.055);
}

/* =========================================================
   TOP HEADING
========================================================= */

.dx-denai-problems-heading {
  text-align: center;
}

.dx-denai-problems-heading h2 {
  margin: 0 0 4px;

  color: #151515;

  font-size: 21px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.055em;
}

.dx-denai-problems-heading p {
  margin: 0;

  color: #515762;

  font-size: 12px;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.025em;
}

/* =========================================================
   THREE-COLUMN AREA
========================================================= */

.dx-denai-problems-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  width: 100%;
  margin-top: 11px;
}

/* =========================================================
   EACH ITEM
========================================================= */

.dx-denai-problem-item {
  position: relative;

  display: flex;
  align-items: center;

  min-width: 0;
  min-height: 68px;

  padding: 0 30px;
}

/* First column alignment */
.dx-denai-problem-item:first-child {
  padding-left: 4px;
  padding-right: 31px;
}

/* Middle column alignment */
.dx-denai-problem-item:nth-child(2) {
  padding-left: 31px;
  padding-right: 31px;
}

/* Last column alignment */
.dx-denai-problem-item:last-child {
  padding-left: 31px;
  padding-right: 0;
}

/* Vertical separators */
.dx-denai-problem-item:not(:last-child)::after {
  content: "";

  position: absolute;
  top: 1px;
  right: 0;

  width: 1px;
  height: 67px;

  background: #bdd0ff;
}

/* =========================================================
   ICON CIRCLE
========================================================= */

.dx-denai-problem-icon {
  flex: 0 0 62px;

  width: 62px;
  height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-right: 18px;

  background: #ffffff;
  border: 2px solid #dfe9ff;
  border-radius: 50%;
}

.dx-denai-problem-icon i {
  color: #1758ff;
  font-size: 27px;
  line-height: 1;
}

/* Slight adjustment for each Font Awesome icon */
.dx-denai-problem-item:first-child
.dx-denai-problem-icon i {
  font-size: 25px;
}

.dx-denai-problem-item:nth-child(2)
.dx-denai-problem-icon i {
  font-size: 27px;
}

.dx-denai-problem-item:nth-child(3)
.dx-denai-problem-icon i {
  font-size: 26px;
}

/* =========================================================
   ITEM TEXT
========================================================= */

.dx-denai-problem-text {
  min-width: 0;
}

.dx-denai-problem-text h3 {
  margin: 0 0 5px;

  color: #171717;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.025em;

  white-space: nowrap;
}

.dx-denai-problem-text p {
  margin: 0;

  color: #5d626c;

  font-size: 10px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.015em;

  white-space: nowrap;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

  body {
    padding: 20px;
  }

  .dx-denai-problems {
    padding: 20px 25px 24px;
  }

  .dx-denai-problem-item,
  .dx-denai-problem-item:first-child,
  .dx-denai-problem-item:nth-child(2),
  .dx-denai-problem-item:last-child {
    padding-left: 18px;
    padding-right: 18px;
  }

  .dx-denai-problem-icon {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
    margin-right: 13px;
  }

  .dx-denai-problem-icon i {
    font-size: 23px;
  }

  .dx-denai-problem-text h3 {
    font-size: 12px;
    white-space: normal;
  }

  .dx-denai-problem-text p {
    font-size: 9px;
    white-space: normal;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  body {
    padding: 16px;
  }

  .dx-denai-problems {
    min-height: auto;
    padding: 23px 20px;
  }

  .dx-denai-problems-heading h2 {
    font-size: 17px;
    line-height: 1.7;
    letter-spacing: 0.03em;
  }

  .dx-denai-problems-heading p {
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.8;
  }

  .dx-denai-problems-grid {
    grid-template-columns: 1fr;
    margin-top: 17px;
  }

  .dx-denai-problem-item,
  .dx-denai-problem-item:first-child,
  .dx-denai-problem-item:nth-child(2),
  .dx-denai-problem-item:last-child {
    min-height: 0;
    padding: 18px 0;
  }

  .dx-denai-problem-item:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 1px;
  }

  .dx-denai-problem-icon {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    margin-right: 16px;
  }

  .dx-denai-problem-text h3 {
    font-size: 14px;
    white-space: normal;
  }

  .dx-denai-problem-text p {
    font-size: 10px;
    white-space: normal;
  }
}

/*-- END - 1st CARD --*/

/*-- START - 2nd CARD --*/


/* ======================================================
   MAIN CARD
====================================================== */

.dx-denai-results {
  width: 100%;
  max-width: 1160px;
  min-height: 203px;
  margin: 50px auto;

  padding: 15px 48px 18px;

  background: #ffffff;
  border: 1px solid #edf3fc;
  border-radius: 14px;

  box-shadow:
    0 1px 5px rgba(36, 92, 180, 0.04),
    0 5px 18px rgba(36, 92, 180, 0.055);
}

/* ======================================================
   LEFT AREA
====================================================== */

.dx-denai-results-content {
  position: absolute;
  top: 24px;
  left: 43px;
  width: 528px;
}

.dx-denai-results-title {
  margin: 0 0 13px 2px;

  color: #111111;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.105em;
  white-space: nowrap;
}

.dx-denai-results-stats {
  display: grid;
  grid-template-columns: repeat(4, 119px);
  gap: 16px;
}

.dx-denai-results-stat-card {
  width: 119px;
  height: 69px;
  padding-top: 9px;

  text-align: center;

  border: 1px solid #e2ebf7;
  border-radius: 7px;

  background: rgba(255, 255, 255, 0.96);

  box-shadow:
    0 0 8px rgba(30, 92, 190, 0.018),
    inset 0 0 8px rgba(39, 99, 195, 0.018);
}

.dx-denai-results-stat-label {
  margin-bottom: 5px;

  color: #262626;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.dx-denai-results-stat-result {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;

  color: #0751df;
  white-space: nowrap;
}

.dx-denai-results-stat-result strong {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}

.dx-denai-results-stat-result span {
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.dx-denai-results-button {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 176px;
  height: 29px;
  margin-top: 7px;
  padding: 0 21px 0 31px;

  border: 1.5px solid #0759f6;
  border-radius: 5px;

  background: #ffffff;
  color: #0759f6;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.dx-denai-results-button i {
  font-size: 12px;
}

/* ======================================================
   RIGHT DIAGRAM
====================================================== */

.dx-denai-results-diagram {
  position: absolute;
  top: 4px;
  left: 623px;
  width: 500px;
  height: 174px;
}

.dx-denai-results-orbit {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.dx-denai-results-orbit-large {
  top: 9px;
  left: 158px;
  width: 178px;
  height: 158px;

  border: 1px dashed #d9e6fa;
}

.dx-denai-results-orbit-small {
  top: 20px;
  left: 170px;
  width: 154px;
  height: 136px;

  border: 1px solid rgba(219, 231, 249, 0.72);
}

.dx-denai-results-center-glow {
  position: absolute;
  top: 30px;
  left: 181px;
  width: 132px;
  height: 122px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(19, 98, 241, 0.23) 0%,
    rgba(27, 103, 242, 0.12) 40%,
    rgba(27, 103, 242, 0) 72%
  );
}

.dx-denai-results-center {
  position: absolute;
  z-index: 5;
  top: 43px;
  left: 196px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 101px;
  height: 101px;

  border: 7px solid rgba(157, 196, 255, 0.74);
  border-radius: 50%;

  background: radial-gradient(
    circle at 50% 28%,
    #4898ff 0%,
    #2375f3 37%,
    #0751df 75%,
    #0346d2 100%
  );

  box-shadow:
    0 0 0 4px rgba(222, 235, 255, 0.93),
    0 5px 14px rgba(19, 87, 214, 0.22),
    inset 0 3px 7px rgba(255, 255, 255, 0.25);

  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ======================================================
   ICON CIRCLES
====================================================== */

.dx-denai-results-diagram-icon {
  position: absolute;
  z-index: 8;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border: 1px solid #dce8fa;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.98);

  box-shadow:
    0 2px 5px rgba(22, 78, 172, 0.07),
    inset 0 0 7px rgba(31, 97, 203, 0.035);

  color: #0759f6;
  font-size: 16px;
}

.dx-denai-results-diagram-icon small {
  position: absolute;
  right: 7px;
  bottom: 5px;

  font-size: 6px;
  font-weight: 800;
}

/* Icon positions */

.dx-denai-results-icon-top-left {
  top: 6px;
  left: 177px;
}

.dx-denai-results-icon-top-right {
  top: 7px;
  left: 269px;
}

.dx-denai-results-icon-middle-left {
  top: 67px;
  left: 135px;
}

.dx-denai-results-icon-middle-right {
  top: 68px;
  left: 321px;
}

.dx-denai-results-icon-bottom-left {
  top: 129px;
  left: 177px;
}

.dx-denai-results-icon-bottom-right {
  top: 130px;
  left: 269px;
}

/* ======================================================
   DIAGRAM TEXT
====================================================== */

.dx-denai-results-label {
  position: absolute;
  z-index: 9;

  color: #282828;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.dx-denai-results-label-top-left {
  top: 17px;
  left: 28px;
}

.dx-denai-results-label-top-right {
  top: 18px;
  left: 340px;
}

.dx-denai-results-label-middle-left {
  top: 78px;
  left: 1px;
}

.dx-denai-results-label-middle-right {
  top: 79px;
  left: 373px;
}

.dx-denai-results-label-bottom-left {
  top: 141px;
  left: 23px;
}

/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width: 1220px) {
  body {
    padding: 12px;
  }

  .dx-denai-results {
    transform-origin: top left;
  }
}

@media (max-width: 900px) {
  body {
    overflow-x: hidden;
  }

  .dx-denai-results {
    width: 100%;
    height: auto;
    min-height: 510px;
    padding: 26px 20px;
  }

  .dx-denai-results-content {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
  }

  .dx-denai-results-title {
    white-space: normal;
  }

  .dx-denai-results-stats {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 12px;
  }

  .dx-denai-results-stat-card {
    width: 100%;
  }

  .dx-denai-results-button {
    width: 100%;
    justify-content: center;
    gap: 25px;
  }

  .dx-denai-results-diagram {
    top: 312px;
    left: 50%;
    transform: translateX(-50%) scale(0.86);
    transform-origin: top center;
  }
}

/*-- END - 2nd CARD --*/

/*-- START - 3rd CARD --*/

/* =========================================================
   WHY DEN.AI SECTION
   ========================================================= */

.dx-denai-reasons {
  width: 100%;
  padding: 22px 28px 28px;
  background: #ffffff;
  border: 1px solid #e7edf6;
  border-radius: 18px;
  box-shadow: 0 3px 10px rgba(31, 65, 123, 0.05);
  color: #111111;
}

.dx-denai-reasons-inner {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}

.dx-denai-reasons-title {
  margin: 0 0 18px;
  text-align: center;
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #111111;
}

.dx-denai-reasons-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

/* =========================================================
   REASON CARD
   ========================================================= */

.dx-denai-reason-card {
  min-height: 215px;
  padding: 22px 18px 20px;
  background: #ffffff;
  border: 1px solid #dfe8f5;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(33, 72, 132, 0.06);
}

.dx-denai-reason-header {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 66px;
}

.dx-denai-reason-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  color: #124cff;
}

.dx-denai-reason-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dx-denai-reason-title {
  margin: 0;
  font-size: clamp(16px, 1.25vw, 21px);
  line-height: 1.55;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #151515;
}

.dx-denai-reason-text {
  margin: 18px 0 0;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.9;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #555555;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {
  .dx-denai-reasons-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dx-denai-reason-card:last-child {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {
  .dx-denai-reasons {
    padding: 20px 14px;
    border-radius: 14px;
  }

  .dx-denai-reasons-title {
    margin-bottom: 16px;
    font-size: 24px;
  }

  .dx-denai-reasons-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .dx-denai-reason-card,
  .dx-denai-reason-card:last-child {
    grid-column: auto;
  }

  .dx-denai-reason-card {
    min-height: 0;
    padding: 18px 16px;
  }

  .dx-denai-reason-header {
    min-height: auto;
  }

  .dx-denai-reason-icon {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }

  .dx-denai-reason-title {
    font-size: 17px;
  }

  .dx-denai-reason-text {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.8;
  }
}

/*-- END - 3rd CARD --*/


/*-- START - 4th CARD --*/

/* =========================================================
   START - DEN.AI VS IVR COMPARISON SECTION
   Unique selector prefix: dx-ivr-compare-
   ========================================================= */

.dx-ivr-compare-section {
  width: 100%;
  padding: 24px 18px;
  background: #f6f9fd;
  box-sizing: border-box;
}

.dx-ivr-compare-box {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 22px 38px 26px;
  background: #ffffff;
  border: 1px solid #e5edf7;
  border-radius: 16px;
  box-shadow:
    0 2px 8px rgba(34, 73, 140, 0.04),
    0 8px 24px rgba(34, 73, 140, 0.06);
  box-sizing: border-box;
}

/* =========================================================
   SECTION TITLE
   ========================================================= */

.dx-ivr-compare-title {
  margin: 0 0 18px;
  text-align: center;
  color: #111111;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.025em;
}

.dx-ivr-compare-title-blue {
  color: #0754e6;
}

/* =========================================================
   TABLE WRAPPER
   ========================================================= */

.dx-ivr-compare-table {
  width: 100%;
  overflow: hidden;
  border-radius: 11px;
}

/* =========================================================
   TABLE HEADER
   ========================================================= */

.dx-ivr-compare-header {
  display: grid;
  grid-template-columns: 25% 37.5% 37.5%;
  width: 100%;
  min-height: 52px;
}

.dx-ivr-compare-header-empty {
  background: transparent;
}

.dx-ivr-compare-header-denai,
.dx-ivr-compare-header-ivr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 10px 14px;
  box-sizing: border-box;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.dx-ivr-compare-header-denai {
  color: #ffffff;
  background: linear-gradient(
    110deg,
    #0d5ff0 0%,
    #0b4edc 50%,
    #0b3ec7 100%
  );
  border-top: 2px solid #a8c2ff;
  border-left: 2px solid #a8c2ff;
  border-right: 2px solid #a8c2ff;
  border-radius: 11px 11px 0 0;
}

.dx-ivr-compare-header-ivr {
  color: #171717;
  background: linear-gradient(
    180deg,
    #f2f2f2 0%,
    #e8e8e8 100%
  );
  border-top: 1px solid #e1e1e1;
  border-right: 1px solid #e1e1e1;
  border-radius: 11px 11px 0 0;
}

.dx-ivr-compare-symbol-circle,
.dx-ivr-compare-symbol-triangle {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

/* =========================================================
   TABLE ROWS
   ========================================================= */

.dx-ivr-compare-row {
  display: grid;
  grid-template-columns: 25% 37.5% 37.5%;
  width: 100%;
  min-height: 58px;
}

.dx-ivr-compare-label,
.dx-ivr-compare-denai-value,
.dx-ivr-compare-ivr-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 12px 15px;
  text-align: center;
  background: #ffffff;
  box-sizing: border-box;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  line-height: 1.45;
}

/* =========================================================
   LEFT LABEL COLUMN
   ========================================================= */

.dx-ivr-compare-label {
  color: #181818;
  font-size: 15px;
  font-weight: 700;
  border-left: 2px solid #a8c2ff;
  border-right: 1px solid #bfd0ff;
  border-bottom: 1px solid #e3e8ef;
}

/* Missing top-left horizontal line */
.dx-ivr-compare-row-first .dx-ivr-compare-label {
  border-top: 2px solid #a8c2ff;
  border-top-left-radius: 11px;
}

/* =========================================================
   DEN.AI COLUMN
   ========================================================= */

.dx-ivr-compare-denai-value {
  color: #0754e6;
  font-size: 17px;
  font-weight: 800;
  border-right: 2px solid #a8c2ff;
  border-bottom: 1px solid #e3e8ef;
}

/* =========================================================
   IVR COLUMN
   ========================================================= */

.dx-ivr-compare-ivr-value {
  color: #272727;
  font-size: 14px;
  font-weight: 600;
  border-right: 1px solid #e1e1e1;
  border-bottom: 1px solid #e3e8ef;
}

/* =========================================================
   LAST ROW BORDERS
   ========================================================= */

.dx-ivr-compare-row-last .dx-ivr-compare-label {
  border-bottom: 2px solid #a8c2ff;
  border-bottom-left-radius: 11px;
}

.dx-ivr-compare-row-last .dx-ivr-compare-denai-value {
  border-bottom: 2px solid #a8c2ff;
  border-bottom-right-radius: 11px;
}

.dx-ivr-compare-row-last .dx-ivr-compare-ivr-value {
  border-bottom: 1px solid #e1e1e1;
  border-bottom-right-radius: 11px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .dx-ivr-compare-section {
    padding: 22px 14px;
  }

  .dx-ivr-compare-box {
    padding: 20px 20px 22px;
  }

  .dx-ivr-compare-title {
    font-size: 24px;
  }

  .dx-ivr-compare-header-denai,
  .dx-ivr-compare-header-ivr {
    font-size: 14px;
  }

  .dx-ivr-compare-label {
    font-size: 13px;
  }

  .dx-ivr-compare-denai-value {
    font-size: 15px;
  }

  .dx-ivr-compare-ivr-value {
    font-size: 13px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .dx-ivr-compare-section {
    padding: 18px 10px;
  }

  .dx-ivr-compare-box {
    padding: 18px 9px 20px;
    border-radius: 13px;
  }

  .dx-ivr-compare-title {
    margin-bottom: 14px;
    font-size: 20px;
    line-height: 1.4;
  }

  .dx-ivr-compare-table {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .dx-ivr-compare-header,
  .dx-ivr-compare-row {
    grid-template-columns: 130px 185px 185px;
    min-width: 500px;
  }

  .dx-ivr-compare-header {
    min-height: 47px;
  }

  .dx-ivr-compare-row {
    min-height: 55px;
  }

  .dx-ivr-compare-header-denai,
  .dx-ivr-compare-header-ivr {
    padding: 8px 7px;
    font-size: 12px;
  }

  .dx-ivr-compare-symbol-circle,
  .dx-ivr-compare-symbol-triangle {
    font-size: 15px;
  }

  .dx-ivr-compare-label,
  .dx-ivr-compare-denai-value,
  .dx-ivr-compare-ivr-value {
    padding: 9px 7px;
  }

  .dx-ivr-compare-label {
    font-size: 12px;
  }

  .dx-ivr-compare-denai-value {
    font-size: 13px;
  }

  .dx-ivr-compare-ivr-value {
    font-size: 12px;
  }
}

/* =========================================================
   END - DEN.AI VS IVR COMPARISON SECTION
   ========================================================= */
/*-- END - 4th CARD --*/

/*-- START - 5th CARD --*/

/* =========================================================
   START - DEN.AI AUTOMATIC VOICE DEMO SECTION
   Unique selector prefix: dx-auto-demo-
   ========================================================= */

.dx-auto-demo-section {
  width: 100%;
  padding: 28px 24px;
  background: #f5f9fe;
  box-sizing: border-box;
}

.dx-auto-demo-container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 28px 58px 20px;
  background:
    radial-gradient(
      circle at 50% 43%,
      rgba(220, 234, 255, 0.34),
      rgba(255, 255, 255, 0) 58%
    ),
    #ffffff;
  border: 1px solid #dfe9f7;
  border-radius: 18px;
  box-shadow:
    0 2px 8px rgba(28, 75, 145, 0.035),
    0 10px 30px rgba(28, 75, 145, 0.05);
  box-sizing: border-box;
}

/* =========================================================
   SECTION HEADING
   ========================================================= */

.dx-auto-demo-heading-wrap {
  margin-bottom: 20px;
  text-align: center;
}

.dx-auto-demo-heading {
  margin: 0;
  color: #111111;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 31px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.055em;
}

.dx-auto-demo-subheading {
  margin: 5px 0 0;
  color: #4c5058;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

/* =========================================================
   MAIN DEMO PANEL
   ========================================================= */

.dx-auto-demo-panel {
  display: grid;
  grid-template-columns: 43% 1px minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 272px;
  padding: 26px 36px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #dfebf9;
  border-radius: 15px;
  box-shadow:
    0 4px 14px rgba(27, 74, 146, 0.055),
    0 12px 28px rgba(27, 74, 146, 0.045);
  box-sizing: border-box;
}

/* =========================================================
   VOICE AREA
   ========================================================= */

.dx-auto-demo-voice-area {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) 132px minmax(70px, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  min-width: 0;
  padding-right: 18px;
}

/* =========================================================
   AUTOMATIC SOUND WAVES
   ========================================================= */

.dx-auto-demo-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100px;
  overflow: hidden;
}

.dx-auto-demo-wave-left {
  grid-column: 1;
  grid-row: 1;
}

.dx-auto-demo-wave-right {
  grid-column: 3;
  grid-row: 1;
}

.dx-auto-demo-wave span {
  display: block;
  flex: 0 0 3px;
  width: 3px;
  height: var(--dx-height);
  min-height: 7px;
  max-height:none;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    #8eb4ff 0%,
    #4f86f4 48%,
    #87aeff 100%
  );
  opacity: 0.82;
  transform-origin: center;
  animation:
    dxAutoDemoWaveMotion 0.9s ease-in-out infinite;
  animation-delay: var(--dx-delay);
}

/* Wave animation starts automatically */
@keyframes dxAutoDemoWaveMotion {
  0%,
  100% {
    transform: scaleY(0.3);
    opacity: 0.45;
  }

  25% {
    transform: scaleY(0.65);
    opacity: 0.72;
  }

  50% {
    transform: scaleY(1.18);
    opacity: 1;
  }

  75% {
    transform: scaleY(0.55);
    opacity: 0.68;
  }
}

/* =========================================================
   MICROPHONE BUTTON
   ========================================================= */

.dx-auto-demo-mic-button {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 24%,
    #4f8dff 0%,
    #286bee 38%,
    #1352df 68%,
    #063cc3 100%
  );
  color: #ffffff;
  cursor: pointer;
  box-shadow:
    0 0 0 9px rgba(92, 143, 255, 0.12),
    0 0 0 17px rgba(92, 143, 255, 0.07),
    0 8px 22px rgba(24, 84, 210, 0.23),
    inset 0 5px 10px rgba(255, 255, 255, 0.22);
  animation:
    dxAutoDemoMicPulse 1.7s ease-in-out infinite;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.dx-auto-demo-mic-button:hover {
  transform: translateY(-2px);
}

.dx-auto-demo-mic-button:active {
  transform: scale(0.97);
}

/* Automatic microphone glow */
@keyframes dxAutoDemoMicPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 9px rgba(92, 143, 255, 0.11),
      0 0 0 17px rgba(92, 143, 255, 0.06),
      0 8px 22px rgba(24, 84, 210, 0.22),
      inset 0 5px 10px rgba(255, 255, 255, 0.22);
  }

  50% {
    box-shadow:
      0 0 0 13px rgba(92, 143, 255, 0.16),
      0 0 0 23px rgba(92, 143, 255, 0.08),
      0 12px 30px rgba(24, 84, 210, 0.31),
      inset 0 5px 10px rgba(255, 255, 255, 0.22);
  }
}

.dx-auto-demo-mic-icon {
  width: 52px;
  height: 52px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dx-auto-demo-mic-label {
  grid-column: 1 / 4;
  grid-row: 2;
  margin: 18px 0 0;
  color: #202020;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

/* =========================================================
   CENTER DIVIDER
   ========================================================= */

.dx-auto-demo-divider {
  width: 1px;
  height: 214px;
  background: #bdd2f4;
}

/* =========================================================
   CONVERSATION AREA
   ========================================================= */

.dx-auto-demo-conversation {
  min-width: 0;
  padding-left: 40px;
}

.dx-auto-demo-message-group + .dx-auto-demo-message-group {
  margin-top: 20px;
}

.dx-auto-demo-speaker {
  margin: 0 0 8px;
  color: #171717;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

/* =========================================================
   CUSTOMER MESSAGE
   ========================================================= */

.dx-auto-demo-customer-message {
  position: relative;
  max-width: 92%;
  min-height: 55px;
  padding: 15px 22px;
  background: linear-gradient(
    110deg,
    #edf3ff 0%,
    #e0e9fd 100%
  );
  border-radius: 0 13px 13px 13px;
  color: #222222;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  box-sizing: border-box;
}

.dx-auto-demo-customer-message::before {
  content: "";
  position: absolute;
  top: 0;
  left: -17px;
  width: 18px;
  height: 18px;
  background: #edf3ff;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}

/* =========================================================
   OPERATOR MESSAGE
   ========================================================= */

.dx-auto-demo-operator-message {
  max-width: 96%;
  min-height: 87px;
  padding: 15px 22px;
  background: #ffffff;
  border: 1px solid #c7daf8;
  border-radius: 13px;
  color: #252525;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
  box-sizing: border-box;
}

/* =========================================================
   ACTION BUTTON
   ========================================================= */

.dx-auto-demo-action-wrap {
  display: flex;
  justify-content: center;
  margin-top: 19px;
}

.dx-auto-demo-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-width: 300px;
  min-height: 50px;
  padding: 10px 28px;
  background: linear-gradient(
    110deg,
    #0759e9 0%,
    #0847d3 100%
  );
  border: 1px solid #074ad8;
  border-radius: 8px;
  color: #ffffff;
  box-shadow:
    0 5px 13px rgba(9, 73, 205, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.dx-auto-demo-action-button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 18px rgba(9, 73, 205, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.dx-auto-demo-action-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .dx-auto-demo-section {
    padding: 24px 16px;
  }

  .dx-auto-demo-container {
    padding: 22px 24px 20px;
  }

  .dx-auto-demo-heading {
    font-size: 26px;
  }

  .dx-auto-demo-panel {
    grid-template-columns: 40% 1px minmax(0, 1fr);
    padding: 24px 22px;
  }

  .dx-auto-demo-voice-area {
    grid-template-columns: minmax(45px, 1fr) 110px minmax(45px, 1fr);
    padding-right: 18px;
  }

  .dx-auto-demo-mic-button {
    width: 110px;
    height: 110px;
  }

  .dx-auto-demo-mic-icon {
    width: 44px;
    height: 44px;
  }

  .dx-auto-demo-conversation {
    padding-left: 25px;
  }

  .dx-auto-demo-customer-message,
  .dx-auto-demo-operator-message {
    font-size: 14px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {
  .dx-auto-demo-section {
    padding: 18px 10px;
  }

  .dx-auto-demo-container {
    padding: 20px 12px 18px;
    border-radius: 14px;
  }

  .dx-auto-demo-heading-wrap {
    margin-bottom: 16px;
  }

  .dx-auto-demo-heading {
    font-size: 23px;
    line-height: 1.45;
  }

  .dx-auto-demo-subheading {
    font-size: 13px;
  }

  .dx-auto-demo-panel {
    display: block;
    min-height: 0;
    padding: 25px 15px 20px;
  }

  .dx-auto-demo-voice-area {
    grid-template-columns: minmax(32px, 1fr) 110px minmax(32px, 1fr);
    padding: 0;
  }

  .dx-auto-demo-wave {
    height: 80px;
    gap: 3px;
  }

  .dx-auto-demo-wave span {
    flex-basis: 2px;
    width: 2px;
    max-height:none;
  }

  .dx-auto-demo-mic-button {
    width: 110px;
    height: 110px;
  }

  .dx-auto-demo-mic-label {
    margin-top: 17px;
  }

  .dx-auto-demo-divider {
    width: 100%;
    height: 1px;
    margin: 25px 0;
  }

  .dx-auto-demo-conversation {
    padding-left: 0;
  }

  .dx-auto-demo-customer-message,
  .dx-auto-demo-operator-message {
    max-width: 100%;
    padding: 14px 16px;
    font-size: 14px;
  }

  .dx-auto-demo-action-wrap {
    margin-top: 17px;
  }

  .dx-auto-demo-action-button {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 10px 18px;
    font-size: 14px;
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {
  .dx-auto-demo-heading {
    font-size: 21px;
  }

  .dx-auto-demo-voice-area {
    grid-template-columns: minmax(22px, 1fr) 96px minmax(22px, 1fr);
  }

  .dx-auto-demo-mic-button {
    width: 96px;
    height: 96px;
  }

  .dx-auto-demo-mic-icon {
    width: 39px;
    height: 39px;
  }

  .dx-auto-demo-wave {
    gap: 2px;
  }

  .dx-auto-demo-wave span {
    width: 2px;
    flex-basis: 2px;
  }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .dx-auto-demo-wave span,
  .dx-auto-demo-mic-button {
    animation: none;
  }
}

/* =========================================================
   END - DEN.AI AUTOMATIC VOICE DEMO SECTION
   ========================================================= */

/*-- END - 5th CARD --*/


/*-- START - 6th CARD --*/

/* =========================================================
   START - DEN.AI FEATURE SUITE SECTION
   Unique selector prefix: dx-feature-suite-
   ========================================================= */

.dx-feature-suite-section {
  width: 100%;
  padding: 24px 20px;
  background: #f7faff;
  box-sizing: border-box;
}

.dx-feature-suite-container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 14px 28px 24px;
  background: #ffffff;
  border: 1px solid #e1eaf7;
  border-radius: 16px;
  box-shadow:
    0 2px 8px rgba(31, 73, 145, 0.035),
    0 8px 22px rgba(31, 73, 145, 0.05);
  box-sizing: border-box;
}

/* =========================================================
   SECTION HEADING
   ========================================================= */

.dx-feature-suite-heading {
  margin: 0 0 18px;
  text-align: center;
  color: #0753e6;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.04em;
}

/* =========================================================
   FEATURE GRID
   ========================================================= */

.dx-feature-suite-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: 100%;
}

/* =========================================================
   FEATURE ITEM
   ========================================================= */

.dx-feature-suite-item {
  position: relative;
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
  padding: 4px 18px 6px;
}

/* Vertical separators */
.dx-feature-suite-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 0;
  width: 1px;
  height: calc(100% - 10px);
  background: #d8e4f4;
}

/* =========================================================
   ICON
   ========================================================= */

.dx-feature-suite-icon-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 45px;
  min-width: 45px;
  padding-top: 2px;
  color: #0754e6;
}

.dx-feature-suite-icon {
  display: block;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   FEATURE COPY
   ========================================================= */

.dx-feature-suite-copy {
  min-width: 0;
}

.dx-feature-suite-title {
  margin: 0;
  color: #0754e6;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
  white-space: nowrap;
}

.dx-feature-suite-text {
  margin: 12px 0 0;
  color: #555b65;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.01em;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {
  .dx-feature-suite-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 24px;
  }

  .dx-feature-suite-item:nth-child(3)::after,
  .dx-feature-suite-item:nth-child(6)::after {
    display: none;
  }

  .dx-feature-suite-item:nth-child(n + 4) {
    padding-top: 20px;
    border-top: 1px solid #e1eaf6;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {
  .dx-feature-suite-section {
    padding: 18px 10px;
  }

  .dx-feature-suite-container {
    padding: 18px 14px 20px;
    border-radius: 14px;
  }

  .dx-feature-suite-heading {
    margin-bottom: 16px;
    font-size: 23px;
  }

  .dx-feature-suite-grid {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .dx-feature-suite-item {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 14px;
    padding: 17px 6px;
  }

  .dx-feature-suite-item:not(:last-child)::after {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    display: block;
  }

  .dx-feature-suite-item:nth-child(n + 4) {
    padding-top: 17px;
    border-top: 0;
  }

  .dx-feature-suite-icon-wrap {
    width: 50px;
    min-width: 50px;
  }

  .dx-feature-suite-icon {
    width: 38px;
    height: 38px;
  }

  .dx-feature-suite-title {
    font-size: 16px;
    white-space: normal;
  }

  .dx-feature-suite-text {
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.65;
  }
}

/* =========================================================
   END - DEN.AI FEATURE SUITE SECTION
   ========================================================= */

/*-- END - 6th CARD --*/

/*-- START - 7th CARD --*/


/* =========================================================
   START - INDUSTRY USE CASE SECTION
   Unique selector prefix: dx-industry-scene-
   ========================================================= */

.dx-industry-scene-section {
  width: 100%;
  padding: 24px 20px;
  background: #f6f9fd;
  box-sizing: border-box;
}

.dx-industry-scene-container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px 56px 20px;
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(224, 236, 255, 0.22),
      rgba(255, 255, 255, 0) 62%
    ),
    #ffffff;
  border: 1px solid #dfe8f6;
  border-radius: 17px;
  box-shadow:
    0 2px 8px rgba(29, 73, 142, 0.035),
    0 9px 26px rgba(29, 73, 142, 0.05);
  box-sizing: border-box;
}

/* =========================================================
   SECTION HEADING
   ========================================================= */

.dx-industry-scene-heading-wrap {
  margin-bottom: 12px;
  text-align: center;
}

.dx-industry-scene-heading {
  margin: 0;
  color: #111111;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 29px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.06em;
}

.dx-industry-scene-subheading {
  margin: 5px 0 0;
  color: #535860;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
}

/* =========================================================
   INDUSTRY CARD GRID
   ========================================================= */

.dx-industry-scene-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

/* =========================================================
   INDUSTRY CARD
   ========================================================= */

.dx-industry-scene-card {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 132px;
  padding: 13px 25px 12px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #e1eaf7;
  border-radius: 14px;
  box-shadow:
    0 3px 10px rgba(34, 78, 148, 0.045),
    0 8px 20px rgba(34, 78, 148, 0.035);
  box-sizing: border-box;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.dx-industry-scene-card:hover {
  transform: translateY(-2px);
  border-color: #c8d9f5;
  box-shadow:
    0 6px 15px rgba(34, 78, 148, 0.075),
    0 12px 25px rgba(34, 78, 148, 0.055);
}

/* =========================================================
   CARD ICON
   ========================================================= */

.dx-industry-scene-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  color: #0754e6;
}

.dx-industry-scene-icon {
  display: block;
  width: 72px;
  height: 72px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   CARD CONTENT
   ========================================================= */

.dx-industry-scene-content {
  min-width: 0;
  padding-left: 4px;
}

.dx-industry-scene-title {
  margin: 0;
  color: #161616;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}

.dx-industry-scene-description {
  margin: 3px 0 7px;
  color: #555a62;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.55;
}

/* =========================================================
   TAGS
   ========================================================= */

.dx-industry-scene-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.dx-industry-scene-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 21px;
  padding: 2px 13px;
  background: linear-gradient(
    180deg,
    #edf3ff 0%,
    #dfe9ff 100%
  );
  border-radius: 999px;
  color: #0754e6;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* =========================================================
   DETAIL LINK
   ========================================================= */

.dx-industry-scene-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: #0754e6;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
  transition:
    gap 0.2s ease,
    color 0.2s ease;
}

.dx-industry-scene-link:hover {
  gap: 12px;
  color: #0343c6;
}

.dx-industry-scene-arrow {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   BOTTOM ACTION BUTTON
   ========================================================= */

.dx-industry-scene-action-wrap {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.dx-industry-scene-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-width: 390px;
  min-height: 44px;
  padding: 9px 28px;
  background: linear-gradient(
    110deg,
    #0758e8 0%,
    #0845cf 100%
  );
  border: 1px solid #0645cf;
  border-radius: 7px;
  color: #ffffff;
  box-shadow:
    0 4px 12px rgba(9, 73, 205, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.dx-industry-scene-action-button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 7px 18px rgba(9, 73, 205, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.dx-industry-scene-action-arrow {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .dx-industry-scene-section {
    padding: 22px 14px;
  }

  .dx-industry-scene-container {
    padding: 19px 24px 20px;
  }

  .dx-industry-scene-heading {
    font-size: 26px;
  }

  .dx-industry-scene-card {
    grid-template-columns: 84px minmax(0, 1fr);
    padding: 14px 16px;
  }

  .dx-industry-scene-icon-wrap {
    width: 72px;
    height: 72px;
  }

  .dx-industry-scene-icon {
    width: 60px;
    height: 60px;
  }

  .dx-industry-scene-title {
    font-size: 16px;
  }

  .dx-industry-scene-description {
    font-size: 10px;
  }

  .dx-industry-scene-tag {
    padding: 2px 10px;
    font-size: 9px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {
  .dx-industry-scene-section {
    padding: 18px 10px;
  }

  .dx-industry-scene-container {
    padding: 19px 12px 18px;
    border-radius: 14px;
  }

  .dx-industry-scene-heading-wrap {
    margin-bottom: 15px;
  }

  .dx-industry-scene-heading {
    font-size: 23px;
  }

  .dx-industry-scene-subheading {
    font-size: 12px;
    line-height: 1.7;
  }

  .dx-industry-scene-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dx-industry-scene-card {
    grid-template-columns: 82px minmax(0, 1fr);
    min-height: 124px;
    padding: 14px 14px;
  }

  .dx-industry-scene-icon-wrap {
    width: 70px;
    height: 70px;
  }

  .dx-industry-scene-icon {
    width: 58px;
    height: 58px;
  }

  .dx-industry-scene-title {
    font-size: 17px;
  }

  .dx-industry-scene-description {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.6;
  }

  .dx-industry-scene-tags {
    gap: 6px;
  }

  .dx-industry-scene-tag {
    padding: 3px 10px;
    font-size: 9px;
  }

  .dx-industry-scene-link {
    margin-top: 8px;
    font-size: 13px;
  }

  .dx-industry-scene-action-wrap {
    margin-top: 13px;
  }

  .dx-industry-scene-action-button {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {
  .dx-industry-scene-card {
    grid-template-columns: 68px minmax(0, 1fr);
    padding: 13px 10px;
  }

  .dx-industry-scene-icon-wrap {
    width: 60px;
    height: 60px;
  }

  .dx-industry-scene-icon {
    width: 50px;
    height: 50px;
  }

  .dx-industry-scene-title {
    font-size: 15px;
  }

  .dx-industry-scene-description {
    font-size: 10px;
  }
}

/* =========================================================
   END - INDUSTRY USE CASE SECTION
   ========================================================= */


/*-- END - 7th CARD --*/


/*-- START - 8th CARD --*/

/* =========================================================
   START - DEN.AI DOWNLOAD SECTION
   Unique prefix: dx-download-card-
   ========================================================= */

/* =========================================================
   SECTION WRAPPER
   ========================================================= */

.dx-download-card-section {
  width: 100%;
  padding: 42px 20px;
  background: #f5f8fc;
  box-sizing: border-box;
}

/* =========================================================
   MAIN DOWNLOAD CARD
   ========================================================= */

.dx-download-card-panel {
  position: relative;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: center;

  width: 100%;
  max-width: 1160px;
  min-height: 260px;

  margin: 0 auto;
  padding: 44px 70px;

  overflow: visible;

  background:
    linear-gradient(
      105deg,
      #ffffff 0%,
      #f8fbff 46%,
      #edf5ff 100%
    );

  border: 1px solid #d5e3f5;
  border-radius: 22px;

  box-shadow:
    0 3px 10px rgba(31, 71, 132, 0.045),
    0 12px 30px rgba(31, 71, 132, 0.07);

  box-sizing: border-box;
}

/* =========================================================
   DECORATIVE BACKGROUND
   ========================================================= */

.dx-download-card-decoration {
  position: absolute;
  left: 40px;
  bottom: 0;

  width: 640px;
  height: 170px;

  overflow: hidden;
  opacity: 0.42;
  pointer-events: none;
}

.dx-download-card-decoration::before {
  content: "";

  position: absolute;
  left: 10px;
  bottom: 0;

  width: 10px;
  height: 82px;

  background: rgba(92, 151, 235, 0.12);

  box-shadow:
    34px -30px 0 rgba(92, 151, 235, 0.09),
    70px -4px 0 rgba(92, 151, 235, 0.1),
    108px -52px 0 rgba(92, 151, 235, 0.08),
    148px -16px 0 rgba(92, 151, 235, 0.09),
    192px -66px 0 rgba(92, 151, 235, 0.07),
    240px -24px 0 rgba(92, 151, 235, 0.08),
    290px -42px 0 rgba(92, 151, 235, 0.07);
}

.dx-download-card-decoration::after {
  content: "";

  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 110px;

  background:
    linear-gradient(
      to top,
      rgba(138, 183, 244, 0.13),
      rgba(138, 183, 244, 0)
    );
}

/* =========================================================
   LEFT CONTENT
   ========================================================= */

.dx-download-card-content {
  position: relative;
  z-index: 2;

  min-width: 0;
  padding-left: 120px;
}

/* =========================================================
   TITLE
   ========================================================= */

.dx-download-card-title {
  margin: 0;

  color: #171717;

  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;

  font-size: 32px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.025em;
}

/* =========================================================
   DESCRIPTION
   ========================================================= */

.dx-download-card-description {
  margin: 12px 0 0;

  color: #555b64;

  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;

  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

/* =========================================================
   BUTTON AREA
   ========================================================= */

.dx-download-card-actions {
  display: flex;
  align-items: center;
  gap: 26px;

  margin-top: 24px;
}

/* =========================================================
   COMMON BUTTON
   ========================================================= */

.dx-download-card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  min-width: 220px;
  min-height: 58px;

  padding: 12px 26px;

  border-radius: 9px;

  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;

  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;

  text-decoration: none;
  box-sizing: border-box;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.dx-download-card-button-primary {
  color: #ffffff;

  background:
    linear-gradient(
      110deg,
      #0759eb 0%,
      #0846d2 100%
    );

  border: 2px solid #0754df;

  box-shadow:
    0 6px 16px rgba(7, 83, 216, 0.21),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* =========================================================
   OUTLINE BUTTON
   ========================================================= */

.dx-download-card-button-outline {
  color: #0755df;

  background: #ffffff;
  border: 2px solid #1762ea;
}

/* =========================================================
   BUTTON HOVER
   ========================================================= */

.dx-download-card-button:hover {
  transform: translateY(-2px);
}

.dx-download-card-button-primary:hover {
  box-shadow:
    0 10px 22px rgba(7, 83, 216, 0.27),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.dx-download-card-button-outline:hover {
  background: #f2f6ff;
}

/* =========================================================
   BUTTON ICON
   ========================================================= */

.dx-download-card-button-icon {
  width: 21px;
  height: 21px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   BOOKLET AREA
   Allows the book to overlap the card
   ========================================================= */

.dx-download-card-book-area {
  position: absolute;
  z-index: 5;

  top: -36px;
  right: 95px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 270px;
  height: 310px;

  overflow: visible;
  pointer-events: none;
}

/* =========================================================
   BOOKLET GLOW
   ========================================================= */

.dx-download-card-book-glow {
  position: absolute;

  width: 300px;
  height: 190px;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(69, 140, 255, 0.26) 0%,
      rgba(91, 159, 255, 0.13) 44%,
      rgba(91, 159, 255, 0) 74%
    );

  transform: rotate(-7deg);
}

/* =========================================================
   BOOKLET IMAGE
   ========================================================= */

.dx-download-card-book-image {
  position: relative;
  z-index: 6;

  display: block;

  width: 305px;
  max-width: none;
  height: auto;

  object-fit: contain;
  object-position: center;

  transform:
    translateY(4px)
    rotate(7deg);

  filter:
    drop-shadow(
      0 18px 16px rgba(34, 61, 103, 0.32)
    );
}

/* =========================================================
   LARGE TABLET
   ========================================================= */

@media (max-width: 1000px) {
  .dx-download-card-panel {
    grid-template-columns: minmax(0, 1fr) 250px;
    min-height: 240px;
    padding: 38px 40px;
  }

  .dx-download-card-content {
    padding-left: 40px;
  }

  .dx-download-card-title {
    font-size: 28px;
  }

  .dx-download-card-description {
    font-size: 13px;
  }

  .dx-download-card-button {
    min-width: 185px;
    min-height: 52px;
    font-size: 14px;
  }

  .dx-download-card-book-area {
    top: -22px;
    right: 20px;
    width: 230px;
    height: 275px;
  }

  .dx-download-card-book-image {
    width: 170px;
  }

  .dx-download-card-book-glow {
    width: 250px;
    height: 165px;
  }
}

/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .dx-download-card-section {
    padding: 28px 12px;
  }

  .dx-download-card-panel {
    display: flex;
    flex-direction: column;

    min-height: 0;

    padding:
      225px
      22px
      28px;

    overflow: hidden;

    text-align: center;
  }

  .dx-download-card-decoration {
    left: 0;
    width: 100%;
    opacity: 0.24;
  }

  .dx-download-card-content {
    width: 100%;
    padding-left: 0;
  }

  .dx-download-card-title {
    font-size: 25px;
  }

  .dx-download-card-description {
    font-size: 13px;
  }

  .dx-download-card-actions {
    flex-direction: column;
    gap: 13px;

    width: 100%;
  }

  .dx-download-card-button {
    width: 100%;
    min-width: 0;
  }

  .dx-download-card-book-area {
    top: 18px;
    right: 50%;

    width: 220px;
    height: 190px;

    transform: translateX(50%);
  }

  .dx-download-card-book-image {
    width: 145px;

    transform:
      translateY(0)
      rotate(5deg);
  }

  .dx-download-card-book-glow {
    width: 240px;
    height: 145px;
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {
  .dx-download-card-panel {
    padding:
      205px
      16px
      24px;

    border-radius: 17px;
  }

  .dx-download-card-title {
    font-size: 22px;
  }

  .dx-download-card-description {
    font-size: 12px;
  }

  .dx-download-card-book-area {
    top: 16px;
    width: 195px;
    height: 170px;
  }

  .dx-download-card-book-image {
    width: 128px;
  }

  .dx-download-card-book-glow {
    width: 210px;
    height: 130px;
  }

  .dx-download-card-button {
    min-height: 50px;
    font-size: 14px;
  }
}

/* =========================================================
   END - DEN.AI DOWNLOAD SECTION
   ========================================================= */

/*-- END - 8th CARD --*/

/*-- START - 9th CARD --*/

/* =========================================================
   START - DEN.AI FOOTER
   Unique selector prefix: dx-denai-footer-
   ========================================================= */

.dx-denai-footer-section {
  width: 100%;
  padding: 0 20px 22px;
  background: #f7f9fc;
  box-sizing: border-box;
}

.dx-denai-footer-container {
  display: grid;
  grid-template-columns:
    minmax(220px, 1.2fr)
    minmax(130px, 0.7fr)
    minmax(130px, 0.7fr)
    minmax(180px, 0.8fr);
  grid-template-rows: auto auto;
  column-gap: 55px;
  row-gap: 18px;
  align-items: start;

  width: 100%;
  max-width: 1160px;
  min-height: 160px;

  margin: 0 auto;
  padding: 22px 48px 18px;

  background: #ffffff;
  border: 1px solid #e5e9ef;
  border-radius: 0;

  box-shadow:
    0 2px 7px rgba(30, 62, 112, 0.025),
    0 7px 18px rgba(30, 62, 112, 0.035);

  box-sizing: border-box;
}

/* =========================================================
   BRAND COLUMN
   ========================================================= */

.dx-denai-footer-brand {
  grid-column: 1;
  grid-row: 1 / 3;

  min-width: 0;
}

.dx-denai-footer-logo-link {
  display: inline-block;
  text-decoration: none;
}

.dx-denai-footer-logo {
  display: block;
  width: 92px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.dx-denai-footer-description {
  margin: 16px 0 0;

  color: #4d5158;

  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;

  font-size: 11px;
  font-weight: 500;
  line-height: 1.9;
}

.dx-denai-footer-copyright {
  margin: 24px 0 0;

  color: #595d63;

  font-family:
    "Noto Sans JP",
    Arial,
    sans-serif;

  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
}

/* =========================================================
   LINK COLUMNS
   ========================================================= */

.dx-denai-footer-column {
  min-width: 0;
}

.dx-denai-footer-column-title {
  margin: 0 0 13px;

  color: #222222;

  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;

  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.dx-denai-footer-list {
  margin: 0;
  padding: 0;

  list-style: none;
}

.dx-denai-footer-list li + li {
  margin-top: 12px;
}

.dx-denai-footer-list a {
  color: #555a61;

  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;

  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;

  text-decoration: none;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.dx-denai-footer-list a:hover {
  color: #0754e6;
}

/* =========================================================
   SOCIAL ICONS
   ========================================================= */

.dx-denai-footer-socials {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;

  min-width: 0;
  padding-top: 4px;
}

.dx-denai-footer-social-link {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  border-radius: 50%;

  background: #f2f2f2;
  color: #777777;

  font-size: 16px;
  line-height: 1;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.dx-denai-footer-social-link:hover {
  transform: translateY(-2px);

  background: #0754e6;
  color: #ffffff;
}

/* =========================================================
   LEGAL LINKS
   ========================================================= */

.dx-denai-footer-legal {
  grid-column: 2 / 5;
  grid-row: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;

  min-width: 0;
  padding-right: 8px;
}

.dx-denai-footer-legal a {
  color: #555a61;

  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;

  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;

  text-decoration: none;
  white-space: nowrap;

  transition: color 0.2s ease;
}

.dx-denai-footer-legal a:hover {
  color: #0754e6;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .dx-denai-footer-container {
    grid-template-columns:
      minmax(200px, 1fr)
      minmax(120px, 0.7fr)
      minmax(120px, 0.7fr);

    column-gap: 30px;

    padding: 22px 28px 20px;
  }

  .dx-denai-footer-socials {
    grid-column: 1 / 4;
    grid-row: 3;

    justify-content: center;
    padding-top: 5px;
  }

  .dx-denai-footer-legal {
    grid-column: 2 / 4;
    gap: 20px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {
  .dx-denai-footer-section {
    padding: 0 10px 14px;
  }

  .dx-denai-footer-container {
    display: block;

    padding: 26px 20px 22px;

    text-align: center;
  }

  .dx-denai-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .dx-denai-footer-logo {
    width: 105px;
  }

  .dx-denai-footer-description {
    margin-top: 14px;
    font-size: 12px;
  }

  .dx-denai-footer-copyright {
    margin-top: 18px;
  }

  .dx-denai-footer-column {
    margin-top: 26px;
  }

  .dx-denai-footer-column-title {
    margin-bottom: 11px;
    font-size: 13px;
  }

  .dx-denai-footer-list li + li {
    margin-top: 10px;
  }

  .dx-denai-footer-list a {
    font-size: 12px;
  }

  .dx-denai-footer-socials {
    justify-content: center;
    margin-top: 26px;
  }

  .dx-denai-footer-social-link {
    width: 44px;
    height: 44px;
  }

  .dx-denai-footer-legal {
    flex-direction: column;
    justify-content: center;
    gap: 12px;

    margin-top: 26px;
    padding: 20px 0 0;

    border-top: 1px solid #e5e9ef;
  }

  .dx-denai-footer-legal a {
    font-size: 11px;
    white-space: normal;
  }
}

/* =========================================================
   END - DEN.AI FOOTER
   ========================================================= */

/*-- END - 9th CARD --*/
/* =========================================================
   FINAL RESPONSIVE POLISH LAYER
   Keeps the approved design while normalizing typography,
   spacing, icon placement and behavior across resolutions.
   ========================================================= */

:root {
  --dx-page-max: 1160px;
  --dx-side-gap: clamp(12px, 2.4vw, 32px);
  --dx-section-gap: clamp(24px, 4vw, 52px);
  --dx-radius-lg: clamp(14px, 1.6vw, 22px);
  --dx-title-lg: clamp(25px, 2.45vw, 38px);
  --dx-title-md: clamp(21px, 1.8vw, 30px);
  --dx-body: clamp(12px, 1vw, 15px);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  background: #f6f9fd;
  font-family: "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

.dx-denai-hero-stage {
  display: flex;
  width: 100%;
  min-height: min(100vh, 820px);
  align-items: center;
  background-image: url("../img/headerimgbg_ucase.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Shared section width and vertical rhythm */
.dx-denai-problems,
.dx-denai-results,
.dx-denai-reasons-inner,
.dx-ivr-compare-box,
.dx-auto-demo-container,
.dx-feature-suite-container,
.dx-industry-scene-container,
.dx-download-card-panel,
.dx-denai-footer-container {
  width: min(calc(100% - (var(--dx-side-gap) * 2)), var(--dx-page-max));
  max-width: var(--dx-page-max);
  margin-left: auto;
  margin-right: auto;
}

.dx-denai-problems,
.dx-denai-results,
.dx-denai-reasons,
.dx-ivr-compare-section,
.dx-auto-demo-section,
.dx-feature-suite-section,
.dx-industry-scene-section,
.dx-download-card-section {
  margin-top: var(--dx-section-gap);
}

/* Typography normalization */
.dx-denai-problems-heading h2,
.dx-denai-results-title,
.dx-denai-reasons-title,
.dx-ivr-compare-title,
.dx-auto-demo-heading,
.dx-feature-suite-heading,
.dx-industry-scene-heading,
.dx-download-card-title {
  font-size: var(--dx-title-md);
  line-height: 1.35;
  text-wrap: balance;
}

.dx-denai-problems-heading p,
.dx-industry-scene-subheading,
.dx-auto-demo-subheading,
.dx-download-card-description {
  font-size: var(--dx-body);
  line-height: 1.7;
}

/* Hero scaling */
.dx-denai-hero {
  width: min(100%, var(--dx-page-max));
  min-height: clamp(540px, 72vh, 760px);
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.dx-denai-hero-content {
  width: min(430px, 40vw);
  margin-left: clamp(24px, 4vw, 58px);
  padding-top: 0;
}

.dx-denai-hero-title {
  font-size: clamp(44px, 4.2vw, 62px);
  line-height: 1.14;
  letter-spacing: clamp(1px, 0.3vw, 4px);
}

.dx-denai-hero-description {
  font-size: clamp(15px, 1.35vw, 19px);
}

.dx-denai-hero-button {
  min-width: 0;
  width: clamp(155px, 15vw, 185px);
  height: clamp(42px, 4vw, 48px);
  font-size: clamp(12px, 1vw, 14px);
}

.dx-denai-patent-card {
  width: min(100%, 410px);
  grid-template-columns: clamp(100px, 10vw, 135px) minmax(0, 1fr);
}

.dx-denai-patent-copy h2,
.dx-denai-patent-copy p {
  white-space: normal;
}

/* First problems card */
.dx-denai-problems {
  padding-left: clamp(18px, 4vw, 48px);
  padding-right: clamp(18px, 4vw, 48px);
}

.dx-denai-problems-grid {
  gap: 0;
}

.dx-denai-problem-item {
  min-width: 0;
}

.dx-denai-problem-text h3,
.dx-denai-problem-text p {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Results section */
.dx-denai-results {
  position: relative;
  overflow: hidden;
}

.dx-denai-results-content,
.dx-denai-results-diagram {
  min-width: 0;
}

/* Reasons */
.dx-denai-reasons-grid {
  align-items: stretch;
}

.dx-denai-reason-card {
  height: 100%;
}

/* Comparison table */
.dx-ivr-compare-table {
  border-radius: 11px;
}

.dx-ivr-compare-header,
.dx-ivr-compare-row {
  align-items: stretch;
}

.dx-ivr-compare-label,
.dx-ivr-compare-denai-value,
.dx-ivr-compare-ivr-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Demo panel and waves */
.dx-auto-demo-panel {
  min-width: 0;
}

.dx-auto-demo-wave span {
  will-change: transform, opacity;
}

/* Feature suite */
.dx-feature-suite-item {
  min-width: 0;
}

.dx-feature-suite-title {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Industry cards */
.dx-industry-scene-card,
.dx-industry-scene-content {
  min-width: 0;
}

.dx-industry-scene-description {
  overflow-wrap: anywhere;
}

/* Download booklet */
.dx-download-card-panel {
  isolation: isolate;
}

.dx-download-card-content {
  min-width: 0;
}

.dx-download-card-book-image {
  object-fit: contain;
}

/* Footer */
.dx-denai-footer-container {
  box-sizing: border-box;
}

/* =========================================================
   DESKTOP / SMALL LAPTOP
   ========================================================= */
@media (max-width: 1180px) {
  .dx-denai-results {
    min-height: 380px;
  }

  .dx-denai-results-content {
    width: 52%;
  }

  .dx-denai-results-diagram {
    left: 53%;
    transform: scale(0.9);
    transform-origin: center center;
  }

  .dx-denai-reasons-grid,
  .dx-feature-suite-grid {
    gap: 12px;
  }

  .dx-download-card-content {
    padding-left: clamp(30px, 6vw, 90px);
  }
}

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 900px) {
  .dx-denai-hero-stage {
    min-height: auto;
    padding: 42px 0;
    background-position: 58% center;
  }

  .dx-denai-hero {
    min-height: 570px;
  }

  .dx-denai-hero-content {
    width: min(440px, 58vw);
    margin-left: var(--dx-side-gap);
    transform: none;
  }

  .dx-denai-hero-title {
    font-size: clamp(40px, 6vw, 54px);
  }

  .dx-denai-problems-grid {
    grid-template-columns: 1fr;
  }

  .dx-denai-problem-item,
  .dx-denai-problem-item:first-child,
  .dx-denai-problem-item:nth-child(2),
  .dx-denai-problem-item:last-child {
    padding: 18px 8px;
  }

  .dx-denai-problem-item:not(:last-child)::after {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
  }

  .dx-denai-results {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 28px 24px;
  }

  .dx-denai-results-content {
    position: relative;
    inset: auto;
    width: 100%;
  }

  .dx-denai-results-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dx-denai-results-stat-card,
  .dx-denai-results-button {
    width: 100%;
  }

  .dx-denai-results-diagram {
    position: relative;
    top: auto;
    left: 50%;
    margin-top: 22px;
    transform: translateX(-50%) scale(0.82);
    transform-origin: top center;
  }

  .dx-denai-reasons-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dx-denai-reason-card:last-child {
    grid-column: 1 / -1;
  }

  .dx-auto-demo-panel {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .dx-auto-demo-divider {
    width: 100%;
    height: 1px;
  }

  .dx-auto-demo-conversation {
    padding-left: 0;
  }

  .dx-feature-suite-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dx-industry-scene-grid {
    grid-template-columns: 1fr;
  }

  .dx-download-card-panel {
    min-height: 250px;
    padding-right: 250px;
  }

  .dx-download-card-book-area {
    right: 10px;
  }

  .dx-denai-footer-container {
    column-gap: 24px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 650px) {
  :root {
    --dx-side-gap: 12px;
    --dx-section-gap: 24px;
  }

  body {
    background: #f6f9fd;
  }

  .dx-denai-hero-stage {
    display: block;
    padding: 0;
    background-position: 61% center;
    background-size: cover;
  }

  .dx-denai-hero {
    min-height: 680px;
    align-items: flex-start;
    padding: 34px 18px 36px;
    background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.76) 52%, rgba(255,255,255,.1) 100%);
  }

  .dx-denai-hero-content {
    width: 100%;
    margin: 0;
  }

  .dx-denai-hero-eyebrow {
    font-size: 12px;
    white-space: normal;
  }

  .dx-denai-hero-title {
    font-size: clamp(38px, 12vw, 52px);
    letter-spacing: 1px;
  }

  .dx-denai-hero-description {
    font-size: 15px;
  }

  .dx-denai-hero-features {
    flex-wrap: wrap;
    gap: 8px 18px;
  }

  .dx-denai-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .dx-denai-hero-button {
    width: 100%;
  }

  .dx-denai-patent-card {
    grid-template-columns: 92px minmax(0, 1fr);
    width: 100%;
  }

  .dx-denai-patent-image-wrap {
    width: 86px;
  }

  .dx-denai-problems,
  .dx-denai-results,
  .dx-denai-reasons-inner,
  .dx-ivr-compare-box,
  .dx-auto-demo-container,
  .dx-feature-suite-container,
  .dx-industry-scene-container,
  .dx-download-card-panel,
  .dx-denai-footer-container {
    width: calc(100% - 24px);
  }

  .dx-denai-problems,
  .dx-denai-results,
  .dx-denai-reasons-inner,
  .dx-ivr-compare-box,
  .dx-auto-demo-container,
  .dx-feature-suite-container,
  .dx-industry-scene-container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .dx-denai-results-stats,
  .dx-denai-reasons-grid,
  .dx-feature-suite-grid {
    grid-template-columns: 1fr;
  }

  .dx-denai-reason-card:last-child {
    grid-column: auto;
  }

  .dx-denai-results-diagram {
    width: 500px;
    max-width: none;
    transform: translateX(-50%) scale(0.62);
    margin-top: -20px;
    margin-bottom: -40px;
  }

  .dx-ivr-compare-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dx-ivr-compare-header,
  .dx-ivr-compare-row {
    min-width: 520px;
    grid-template-columns: 135px 190px 195px;
  }

  .dx-auto-demo-panel {
    display: block;
    padding: 22px 14px;
  }

  .dx-auto-demo-voice-area {
    grid-template-columns: minmax(28px, 1fr) 100px minmax(28px, 1fr);
    padding: 0;
  }

  .dx-auto-demo-mic-button {
    width: 100px;
    height: 100px;
  }

  .dx-auto-demo-wave {
    gap: 2px;
  }

  .dx-auto-demo-divider {
    margin: 24px 0;
  }

  .dx-feature-suite-item {
    padding: 16px 6px;
  }

  .dx-industry-scene-card {
    grid-template-columns: 70px minmax(0, 1fr);
    padding: 14px 12px;
  }

  .dx-industry-scene-icon-wrap {
    width: 62px;
    height: 62px;
  }

  .dx-industry-scene-icon {
    width: 52px;
    height: 52px;
  }

  .dx-industry-scene-action-button {
    width: 100%;
    min-width: 0;
  }

  .dx-download-card-panel {
    width: calc(100% - 24px);
    padding: 210px 18px 28px;
    overflow: hidden;
    text-align: center;
  }

  .dx-download-card-content {
    padding-left: 0;
  }

  .dx-download-card-actions {
    flex-direction: column;
    width: 100%;
  }

  .dx-download-card-button {
    width: 100%;
    min-width: 0;
  }

  .dx-download-card-book-area {
    top: 14px;
    right: 50%;
    width: 210px;
    height: 180px;
    transform: translateX(50%);
  }

  .dx-download-card-book-image {
    width: 135px;
  }

  .dx-denai-footer-container {
    display: block;
    padding: 26px 20px;
    text-align: center;
  }

  .dx-denai-footer-brand {
    align-items: center;
  }

  .dx-denai-footer-column,
  .dx-denai-footer-socials,
  .dx-denai-footer-legal {
    margin-top: 24px;
  }

  .dx-denai-footer-socials {
    justify-content: center;
  }

  .dx-denai-footer-legal {
    flex-direction: column;
    gap: 12px;
  }
}

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */
@media (max-width: 390px) {
  .dx-denai-hero {
    min-height: 700px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .dx-denai-hero-title {
    font-size: 37px;
  }

  .dx-denai-problem-item {
    align-items: flex-start;
  }

  .dx-denai-problem-icon {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
    margin-right: 12px;
  }

  .dx-auto-demo-heading,
  .dx-industry-scene-heading,
  .dx-download-card-title {
    font-size: 21px;
  }

  .dx-industry-scene-card {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .dx-industry-scene-icon-wrap,
  .dx-industry-scene-icon {
    width: 48px;
    height: 48px;
  }
}

/* =========================================================
   FINAL REQUESTED ADJUSTMENTS
   Equal card width, compact equal vertical spacing,
   button hover motion, and scroll reveal animation.
   ========================================================= */

:root {
  --dx-section-gap: clamp(14px, 1.6vw, 22px);
  --dx-hover-lift: -3px;
}

/* Keep every major card on exactly the same width line. */
.dx-denai-problems,
.dx-denai-results,
.dx-denai-reasons-inner,
.dx-ivr-compare-box,
.dx-auto-demo-container,
.dx-feature-suite-container,
.dx-industry-scene-container,
.dx-download-card-panel,
.dx-denai-footer-container {
  width: min(calc(100% - (var(--dx-side-gap) * 2)), var(--dx-page-max));
  max-width: var(--dx-page-max);
  margin-left: auto;
  margin-right: auto;
}

/* Compact and equal vertical distance between approved sections. */
.dx-denai-problems,
.dx-denai-results,
.dx-denai-reasons,
.dx-ivr-compare-section,
.dx-auto-demo-section,
.dx-feature-suite-section,
.dx-industry-scene-section,
.dx-download-card-section,
.dx-denai-footer-section {
  margin-top: var(--dx-section-gap);
  margin-bottom: 0;
}

/* Remove extra outer padding that created inconsistent gaps. */
.dx-ivr-compare-section,
.dx-auto-demo-section,
.dx-feature-suite-section,
.dx-industry-scene-section,
.dx-download-card-section {
  padding-top: 0;
  padding-bottom: 0;
}

/* Unified polished hover animation for all website buttons and CTAs. */
.dx-denai-hero-button,
.dx-denai-results-button,
.dx-industry-scene-link,
.dx-industry-scene-action-button,
.dx-auto-demo-mic-button,
.dx-auto-demo-action-button,
.dx-download-card-button,
.dx-denai-footer-social-link,
.header-actions .btn,
.dx-ivr-compare-header-denai,
.dx-ivr-compare-header-ivr {
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    background-color 0.24s ease,
    border-color 0.24s ease,
    color 0.24s ease,
    filter 0.24s ease;
}

@media (hover: hover) and (pointer: fine) {
  .dx-denai-hero-button:hover,
  .dx-denai-results-button:hover,
  .dx-industry-scene-action-button:hover,
  .dx-auto-demo-action-button:hover,
  .dx-download-card-button:hover,
  .header-actions .btn:hover {
    transform: translateY(var(--dx-hover-lift));
    filter: brightness(1.04);
    box-shadow: 0 10px 24px rgba(7, 83, 216, 0.22);
  }

  .dx-industry-scene-link:hover {
    transform: translateX(4px);
  }

  .dx-auto-demo-mic-button:hover,
  .dx-denai-footer-social-link:hover {
    transform: translateY(var(--dx-hover-lift)) scale(1.04);
  }
}

.dx-denai-hero-button:active,
.dx-denai-results-button:active,
.dx-industry-scene-action-button:active,
.dx-auto-demo-action-button:active,
.dx-download-card-button:active,
.header-actions .btn:active {
  transform: translateY(0) scale(0.98);
}

/* Scroll reveal animation. JavaScript adds dx-visible on entry. */
.dx-page-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s ease var(--dx-delay, 0ms),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--dx-delay, 0ms);
  will-change: opacity, transform;
}

.dx-page-reveal.dx-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 650px) {
  :root {
    --dx-section-gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dx-page-reveal,
  .dx-page-reveal.dx-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   FINAL FIX - SINGLE PAGE SCROLLBAR AND EQUAL REASONS WIDTH
   ========================================================= */

/* Keep only the browser/document scrollbar. */
html {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body {
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* The outer reasons card now follows the exact same width line as all cards. */
.dx-denai-reasons {
  width: min(calc(100% - (var(--dx-side-gap) * 2)), var(--dx-page-max)) !important;
  max-width: var(--dx-page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.dx-denai-reasons-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Force all five reason cards to use identical column widths. */
.dx-denai-reasons-grid {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
}

.dx-denai-reason-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.dx-denai-reason-header,
.dx-denai-reason-title,
.dx-denai-reason-text {
  min-width: 0 !important;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .dx-denai-reasons-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dx-denai-reason-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .dx-denai-reasons {
    width: calc(100% - 24px) !important;
  }

  .dx-denai-reasons-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dx-denai-reason-card:last-child {
    grid-column: auto;
  }
}

/* =========================================================
   FINAL SINGLE-SCROLLBAR CORRECTION
   The document scrolls through the root element only.
   ========================================================= */
html {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body {
  overflow-x: clip !important;
  overflow-y: clip !important;
}

/* Prevent the closed mobile navigation from creating its own scrollbar. */
@media (max-width: 900px) {
  .nav-menu {
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  .nav-menu::-webkit-scrollbar {
    display: none !important;
  }

  #menu-toggle:checked ~ .nav-menu {
    overflow-y: auto !important;
    scrollbar-width: thin !important;
  }
}


/*-- START --*/

/* =========================================================
   INDUSTRY SHOWCASE
   Perfect left/right alignment with sticky left navigation.
   ========================================================= */

.industry-showcase {
  --showcase-primary: #2f55df;
  --showcase-primary-dark: #1738b7;
  --showcase-primary-soft: #f3f6ff;
  --showcase-background: #f5f7fd;
  --showcase-heading: #07152f;
  --showcase-text: #687386;
  --showcase-border: #dce4f0;
  --showcase-white: #ffffff;
  --showcase-shadow: 0 18px 48px rgba(22, 50, 112, 0.09);

  width: 100%;
  margin-bottom: 50px;
  padding: 70px 24px;
  overflow: visible;
  background: var(--showcase-background);
  font-family:
    "Noto Sans JP",
    "Yu Gothic UI",
    "Yu Gothic",
    Meiryo,
    sans-serif;
}

.industry-showcase *,
.industry-showcase *::before,
.industry-showcase *::after {
  box-sizing: border-box;
}

.industry-showcase button {
  font: inherit;
}

/* =========================================================
   MAIN TWO-COLUMN LAYOUT
   ========================================================= */

.industry-showcase__container {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
  gap: 48px;
  width: min(100%, 1460px);
  margin: 0 auto;
}

/* =========================================================
   LEFT COLUMN
   ========================================================= */

.industry-showcase__sidebar {
  position: sticky;
  top: 90px;
  align-self: start;
  min-width: 0;
  z-index: 5;
}

.industry-showcase__navigation {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--showcase-border);
  border-radius: 22px;
  background: var(--showcase-white);
  box-shadow: var(--showcase-shadow);
}

.industry-showcase__navigation-title {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 82px;
  margin: 0;
  padding: 20px 28px;
  border-bottom: 1px solid var(--showcase-border);
  color: var(--showcase-heading);
  background: var(--showcase-white);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
}

.industry-showcase__navigation-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: visible;
}

.industry-showcase__nav-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 68px;
  padding: 15px 30px;
  border: 0;
  border-bottom: 1px solid var(--showcase-border);
  color: #17243c;
  background: var(--showcase-white);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition:
    color 0.24s ease,
    background-color 0.24s ease,
    padding-left 0.24s ease;
}

.industry-showcase__nav-button:last-child {
  border-bottom: 0;
}

.industry-showcase__nav-button:hover {
  padding-left: 36px;
  color: var(--showcase-primary);
  background: var(--showcase-primary-soft);
}

.industry-showcase__nav-button.active {
  padding-left: 50px;
  color: #ffffff;
  background: var(--showcase-primary);
}

.industry-showcase__nav-button.active::before {
  position: absolute;
  top: 50%;
  left: 29px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  content: "";
  background: #ffffff;
  transform: translateY(-50%);
}

/* =========================================================
   RIGHT COLUMN
   ========================================================= */

.industry-showcase__main {
  min-width: 0;
}

.industry-showcase__header {
  width: 100%;
  margin: 0 0 32px;
  text-align: center;
}

.industry-showcase__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  gap: 12px;
  margin: 0 0 16px;
  color: var(--showcase-primary);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.18em;
}

.industry-showcase__eyebrow::before {
    width: 0;
    height: 0;
    content: "";
    background: transparent;
}

.industry-showcase__header h2 {
  max-width: 950px;
  margin: 0 auto;
  color: var(--showcase-heading);
  font-size: clamp(34px, 3.2vw, 50px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-align: center;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.industry-showcase__header p {
  width: 100%;
  max-width: 900px;
  margin: 22px auto 0;
  color: var(--showcase-text);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.01em;
  text-align: center;
  overflow-wrap: anywhere;
}

/* =========================================================
   INBOUND / OUTBOUND BUTTONS
   ========================================================= */

.industry-showcase__mode-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 320px));
  justify-content: center;
  gap: 20px;
  width: 100%;
  margin-top: 30px;
}

.industry-showcase__mode-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
  padding: 11px 22px;
  border: 2px solid var(--showcase-primary);
  border-radius: 999px;
  color: var(--showcase-primary);
  background: var(--showcase-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition:
    color 0.24s ease,
    background-color 0.24s ease,
    border-color 0.24s ease,
    transform 0.24s ease,
    box-shadow 0.24s ease;
}

.industry-showcase__mode-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(41, 79, 219, 0.18);
}

.industry-showcase__mode-button.active {
  color: #ffffff;
  background: var(--showcase-primary);
}

.industry-showcase__mode-button.active:hover {
  border-color: var(--showcase-primary-dark);
  background: var(--showcase-primary-dark);
}

/* =========================================================
   IMAGE CARD
   ========================================================= */

.industry-showcase__card {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--showcase-border);
  border-radius: 26px;
  background: var(--showcase-white);
  box-shadow: 0 22px 58px rgba(22, 50, 112, 0.1);
}

.industry-showcase__card-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 104px;
  padding: 22px 44px;
  border-bottom: 1px solid var(--showcase-border);
  background: var(--showcase-white);
}

.industry-showcase__card-header span {
  color: var(--showcase-primary);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.18em;
  white-space: nowrap;
}

.industry-showcase__card-header h3 {
  min-width: 0;
  margin: 0;
  color: var(--showcase-heading);
  font-size: clamp(26px, 2.4vw, 40px);
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
  overflow-wrap: anywhere;
}

.industry-showcase__image-container {
  position: relative;
  width: 100%;
  min-height: 260px;
  overflow: hidden;
  background: var(--showcase-white);
}

.industry-showcase__image-container img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center top;
  background: var(--showcase-white);
}

.industry-showcase__image-error {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 260px;
  padding: 30px;
  color: #697386;
  background: #f8faff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.industry-showcase__card.is-changing {
  animation: showcaseCardChange 0.35s ease;
}

@keyframes showcaseCardChange {
  from {
    opacity: 0.35;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   SMALL LAPTOP / TABLET
   ========================================================= */

@media (max-width: 1150px) {
  .industry-showcase {
    padding: 58px 20px;
  }

  .industry-showcase__container {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 32px;
  }

  .industry-showcase__sidebar {
    top: 78px;
  }


  .industry-showcase__navigation-title {
    min-height: 78px;
    padding: 18px 20px;
    font-size: 15px;
  }

  .industry-showcase__nav-button {
    min-height: 56px;
    padding: 13px 18px;
    font-size: 13px;
  }

  .industry-showcase__nav-button:hover {
    padding-left: 24px;
  }

  .industry-showcase__nav-button.active {
    padding-left: 36px;
  }

  .industry-showcase__nav-button.active::before {
    left: 18px;
  }

  .industry-showcase__header h2 {
    font-size: clamp(38px, 5vw, 54px);
  }

  .industry-showcase__header p {
    margin-top: 22px;
    font-size: 16px;
  }

  .industry-showcase__mode-buttons {
    gap: 14px;
  }

  .industry-showcase__mode-button {
    min-height: 60px;
    font-size: 15px;
  }

  .industry-showcase__card-header {
    min-height: 92px;
    padding: 20px 28px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .industry-showcase {
    padding: 42px 15px;
  }

  .industry-showcase__container {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .industry-showcase__sidebar {
    position: static;
  }

  .industry-showcase__navigation {
    max-height:none;
    border-radius: 16px;
  }

  .industry-showcase__navigation-title {
    min-height: 0;
    padding: 16px 18px;
  }

  .industry-showcase__navigation-list {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .industry-showcase__navigation-list::-webkit-scrollbar {
    width: auto;
    height: 6px;
  }

  .industry-showcase__nav-button {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    min-height: 50px;
    padding: 11px 17px;
    border-right: 1px solid var(--showcase-border);
    border-bottom: 0;
    white-space: nowrap;
  }

  .industry-showcase__nav-button:hover,
  .industry-showcase__nav-button.active {
    padding-left: 17px;
  }

  .industry-showcase__nav-button.active::before {
    display: none;
  }

  .industry-showcase__eyebrow {
    margin-bottom: 13px;
    font-size: 11px;
  }

  .industry-showcase__eyebrow::before {
    width: 0;
    height: 0;
    content: "";
    background: transparent;
  }

  .industry-showcase__header h2 {
    font-size: clamp(30px, 9vw, 40px);
    line-height: 1.25;
  }

  .industry-showcase__header p {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.75;
  }

  .industry-showcase__mode-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin-top: 24px;
  }

  .industry-showcase__mode-button {
    min-height: 52px;
    padding: 10px;
    border-width: 2px;
    font-size: 13px;
  }

  .industry-showcase__card {
    border-radius: 18px;
  }

  .industry-showcase__card-header {
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 0;
    padding: 18px;
  }

  .industry-showcase__card-header h3 {
    font-size: 23px;
    text-align: left;
  }

  .industry-showcase__image-container,
  .industry-showcase__image-error {
    min-height: 0;
  }
}

@media (max-width: 430px) {
  .industry-showcase__mode-buttons {
    grid-template-columns: 1fr;
  }
}

/*-- END --*/


/* =========================================================
   FINAL UCASES RESPONSIVE / STICKY / SPACING OVERRIDES
   ========================================================= */

html {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* Responsive hero: stable height, readable text and clean image crop. */
.dx-denai-hero-stage {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: clamp(520px, 43vw, 760px) !important;
  padding: 0 !important;
  background-position: center center !important;
  background-size: cover !important;
  overflow: hidden !important;
}

.dx-denai-hero {
  display: flex !important;
  align-items: center !important;
  width: min(100%, 1460px) !important;
  min-height: clamp(520px, 43vw, 760px) !important;
  margin: 0 auto !important;
  padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 64px) !important;
}

.dx-denai-hero-content {
  width: min(440px, 38vw) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dx-denai-hero-title {
  font-size: clamp(42px, 4.1vw, 62px) !important;
  line-height: 1.14 !important;
  letter-spacing: clamp(1px, 0.22vw, 3px) !important;
}

.dx-denai-hero-description {
  margin-top: 18px !important;
  font-size: clamp(14px, 1.15vw, 18px) !important;
  line-height: 1.75 !important;
}

/* Sticky full-height navigation without its own scrollbar. */
.industry-showcase {
  padding-bottom: 0 !important;
  overflow: visible !important;
}

.industry-showcase__container,
.industry-showcase__sidebar {
  overflow: visible !important;
}

.industry-showcase__sidebar {
  position: sticky !important;
  top: 92px !important;
  align-self: start !important;
  z-index: 20 !important;
}

.industry-showcase__navigation {
  display: block !important;
  width: 100% !important;
  max-height:none;
  overflow: hidden !important;
}

.industry-showcase__navigation-title {
  min-height: 68px !important;
  padding: 16px 22px !important;
  font-size: 16px !important;
}

.industry-showcase__navigation-list {
  display: flex !important;
  flex-direction: column !important;
  max-height:none;
  overflow: visible !important;
  scrollbar-width: none !important;
}

.industry-showcase__navigation-list::-webkit-scrollbar {
  display: none !important;
}

.industry-showcase__nav-button {
  min-height: 50px !important;
  padding: 11px 20px !important;
  font-size: 14px !important;
}

.industry-showcase__nav-button:hover {
  padding-left: 26px !important;
}

.industry-showcase__nav-button.active {
  padding-left: 38px !important;
}

.industry-showcase__nav-button.active::before {
  left: 19px !important;
}

/* Exact visual separation before footer. */
.site-footer {
  margin-top: 50px !important;
}

/* Scroll-reveal polish for this page. */
.dx-page-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.72s ease var(--dx-delay, 0ms),
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) var(--dx-delay, 0ms);
  will-change: opacity, transform;
}

.dx-page-reveal.dx-visible {
  opacity: 1;
  transform: translateY(0);
}

.industry-showcase__navigation.dx-page-reveal {
  transform: translateX(-24px);
}

.industry-showcase__navigation.dx-page-reveal.dx-visible {
  transform: translateX(0);
}

.industry-showcase__card.dx-page-reveal {
  transform: translateY(34px) scale(0.985);
}

.industry-showcase__card.dx-page-reveal.dx-visible {
  transform: translateY(0) scale(1);
}

@media (max-width: 1150px) {
  .dx-denai-hero-stage,
  .dx-denai-hero {
    min-height: clamp(500px, 56vw, 650px) !important;
  }

  .dx-denai-hero-content {
    width: min(410px, 48vw) !important;
  }

  .industry-showcase__sidebar {
    top: 78px !important;
  }

  .industry-showcase__navigation-title {
    min-height: 60px !important;
    font-size: 14px !important;
  }

  .industry-showcase__nav-button {
    min-height: 46px !important;
    padding: 10px 16px !important;
    font-size: 12.5px !important;
  }

  .industry-showcase__nav-button.active {
    padding-left: 31px !important;
  }

  .industry-showcase__nav-button.active::before {
    left: 15px !important;
  }
}

@media (max-width: 767px) {
  .dx-denai-hero-stage {
    min-height: 610px !important;
    background-position: 66% center !important;
  }

  .dx-denai-hero {
    min-height: 610px !important;
    align-items: flex-start !important;
    padding: 38px 18px 34px !important;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.82) 48%,
      rgba(255, 255, 255, 0.08) 100%
    ) !important;
  }

  .dx-denai-hero-content {
    width: min(100%, 420px) !important;
  }

  .dx-denai-hero-title {
    font-size: clamp(38px, 12vw, 52px) !important;
  }

  .dx-denai-hero-description {
    font-size: 14px !important;
  }

  .industry-showcase {
    padding-bottom: 0 !important;
  }

  .industry-showcase__sidebar {
    position: static !important;
  }

  .industry-showcase__navigation-list {
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
  }

  .industry-showcase__navigation-list::-webkit-scrollbar {
    display: block !important;
    height: 5px !important;
  }

  .industry-showcase__nav-button,
  .industry-showcase__nav-button:hover,
  .industry-showcase__nav-button.active {
    min-height: 48px !important;
    padding: 10px 15px !important;
    font-size: 13px !important;
  }

  .site-footer {
    margin-top: 50px !important;
  }
}

@media (max-width: 430px) {
  .dx-denai-hero-stage,
  .dx-denai-hero {
    min-height: 570px !important;
  }

  .dx-denai-hero {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dx-page-reveal,
  .dx-page-reveal.dx-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   FINAL OVERRIDE - DISABLE STICKY LEFT NAVIGATION
   The navigation remains in the normal document flow on all devices.
   ========================================================= */
.industry-showcase__sidebar {
  position: static !important;
  top: auto !important;
  align-self: start !important;
  z-index: auto !important;
}


/* =========================================================
   HORIZONTAL INDUSTRY USE CASES - FINAL LAYOUT
   ========================================================= */
.horizontal-use-cases {
  --uc-primary:#3157df;
  --uc-primary-dark:#1738b7;
  --uc-primary-soft:#f2f5ff;
  --uc-heading:#07152f;
  --uc-text:#687386;
  --uc-border:#dce4f0;
  --uc-white:#fff;
  width:100%;
  padding:clamp(44px,6vw,72px) clamp(14px,3vw,28px) 50px;
  overflow:hidden;
  background:#f5f7fd;
  font-family:"Noto Sans JP","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
}
.horizontal-use-cases *, .horizontal-use-cases *::before, .horizontal-use-cases *::after {box-sizing:border-box;}
.horizontal-use-cases button {font:inherit;}
.horizontal-use-cases__container {width:min(100%,1460px); margin:0 auto;}
.horizontal-use-cases__navigation-wrap {width:100%; margin-bottom:clamp(34px,4vw,48px);}
.horizontal-use-cases__navigation-heading {margin-bottom:20px; text-align:center;}
.horizontal-use-cases__navigation-heading span {display:block; margin-bottom:6px; color:var(--uc-primary); font-size:12px; font-weight:800; letter-spacing:.18em;}
.horizontal-use-cases__navigation-heading h2 {margin:0; color:var(--uc-heading); font-size:clamp(25px,2.3vw,36px); font-weight:800; line-height:1.3;}
.horizontal-use-cases__navigation {display:flex; flex-wrap:wrap; justify-content:center; gap:11px; width:100%;}
.horizontal-use-cases__industry-button {display:inline-flex; align-items:center; justify-content:center; min-width:140px; min-height:46px; padding:9px 18px; border:1px solid var(--uc-border); border-radius:999px; color:#17243c; background:var(--uc-white); font-size:14px; font-weight:700; white-space:nowrap; cursor:pointer; box-shadow:0 5px 15px rgba(26,54,115,.05); transition:.22s ease;}
.horizontal-use-cases__industry-button:hover {color:var(--uc-primary); border-color:#b9c8f7; background:var(--uc-primary-soft); transform:translateY(-2px);}
.horizontal-use-cases__industry-button.active {color:#fff; border-color:var(--uc-primary); background:var(--uc-primary); box-shadow:0 9px 22px rgba(41,79,219,.2);}
.horizontal-use-cases__header {width:100%; margin-bottom:30px; text-align:center;}
.horizontal-use-cases__eyebrow {display:inline-block; margin-bottom:12px; color:var(--uc-primary); font-size:13px; font-weight:800; letter-spacing:.18em;}
.horizontal-use-cases__header h2 {max-width:980px; margin:0 auto; color:var(--uc-heading); font-size:clamp(32px,3.1vw,50px); font-weight:800; line-height:1.24; letter-spacing:-.025em; text-wrap:balance;}
.horizontal-use-cases__header p {max-width:900px; margin:20px auto 0; color:var(--uc-text); font-size:clamp(15px,1.2vw,18px); font-weight:500; line-height:1.8;}
.horizontal-use-cases__mode-buttons {display:grid; grid-template-columns:repeat(2,minmax(220px,320px)); justify-content:center; gap:18px; width:100%; margin-top:28px;}
.horizontal-use-cases__mode-button {display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:56px; padding:10px 20px; border:2px solid var(--uc-primary); border-radius:999px; color:var(--uc-primary); background:var(--uc-white); font-size:16px; font-weight:700; cursor:pointer; transition:.22s ease;}
.horizontal-use-cases__mode-button:hover {transform:translateY(-2px); box-shadow:0 10px 24px rgba(41,79,219,.16);}
.horizontal-use-cases__mode-button.active {color:#fff; background:var(--uc-primary);}
.horizontal-use-cases__mode-button.active:hover {border-color:var(--uc-primary-dark); background:var(--uc-primary-dark);}
.horizontal-use-cases__card {width:100%; overflow:hidden; border:1px solid var(--uc-border); border-radius:24px; background:#fff; box-shadow:0 18px 48px rgba(22,50,112,.09);}
.horizontal-use-cases__card-header {display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:22px; min-height:84px; padding:19px 30px; border-bottom:1px solid var(--uc-border);}
.horizontal-use-cases__card-header span {color:var(--uc-primary); font-size:13px; font-weight:800; letter-spacing:.17em; white-space:nowrap;}
.horizontal-use-cases__card-header h3 {min-width:0; margin:0; color:var(--uc-heading); font-size:clamp(21px,2.1vw,32px); font-weight:800; line-height:1.35; text-align:right;}
.horizontal-use-cases__image-wrap {
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px;position:relative; width:100%; min-height:240px; overflow:hidden; background:#fff;}
.horizontal-use-cases__image-wrap img {display:block; width:100%; height:auto; object-fit:contain; object-position:center top; background:#fff;}
.horizontal-use-cases__image-error {display:none; align-items:center; justify-content:center; width:100%; min-height:240px; padding:30px; color:#697386; background:#f8faff; font-size:14px; font-weight:600; text-align:center;}
.horizontal-use-cases__card.is-changing {animation:horizontalUseCaseChange .35s ease;}
@keyframes horizontalUseCaseChange {from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.site-footer {margin-top:50px !important;}
@media (max-width:1000px) {
 .horizontal-use-cases {padding:54px 18px 50px;}
 .horizontal-use-cases__industry-button {min-width:125px; min-height:44px; padding:8px 15px; font-size:13px;}
 .horizontal-use-cases__mode-buttons {grid-template-columns:repeat(2,minmax(180px,280px)); gap:14px;}
 .horizontal-use-cases__mode-button {min-height:52px; font-size:14px;}
}
@media (max-width:767px) {
 .horizontal-use-cases {padding:40px 14px 50px;}
 .horizontal-use-cases__navigation-wrap {margin-bottom:32px;}
 .horizontal-use-cases__navigation {flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; padding:2px 2px 9px; scrollbar-width:thin; -webkit-overflow-scrolling:touch;}
 .horizontal-use-cases__navigation::-webkit-scrollbar {height:6px;}
 .horizontal-use-cases__navigation::-webkit-scrollbar-track {border-radius:999px; background:#edf2ff;}
 .horizontal-use-cases__navigation::-webkit-scrollbar-thumb {border-radius:999px; background:#9db3ef;}
 .horizontal-use-cases__industry-button {flex:0 0 auto; min-width:max-content; min-height:42px; padding:8px 14px; font-size:12px;}
 .horizontal-use-cases__header {margin-bottom:22px;}
 .horizontal-use-cases__eyebrow {margin-bottom:9px; font-size:11px;}
 .horizontal-use-cases__header h2 {font-size:clamp(27px,8vw,37px); line-height:1.28;}
 .horizontal-use-cases__header p {margin-top:13px; font-size:14px; line-height:1.75;}
 .horizontal-use-cases__mode-buttons {grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:20px;}
 .horizontal-use-cases__mode-button {min-height:48px; padding:8px; font-size:12px;}
 .horizontal-use-cases__card {border-radius:17px;}
 .horizontal-use-cases__card-header {grid-template-columns:1fr; gap:6px; min-height:0; padding:16px;}
 .horizontal-use-cases__card-header span {font-size:11px;}
 .horizontal-use-cases__card-header h3 {font-size:20px; text-align:left;}
 .horizontal-use-cases__image-wrap,.horizontal-use-cases__image-error {min-height:0;}
}
@media (max-width:430px) {.horizontal-use-cases__mode-buttons {grid-template-columns:1fr;}}

/* =========================================================
   FINAL FIX: SINGLE PAGE SCROLLBAR + STICKY HORIZONTAL NAV
   ========================================================= */

/* Keep only the browser/root scrollbar. */
html {
  width: 100% !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body {
  width: 100% !important;
  min-height: 100% !important;
  height: auto !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Prevent page-level wrappers from creating a second vertical scrollbar. */
.dx-denai-hero-stage,
.dx-denai-hero,
.horizontal-use-cases,
.horizontal-use-cases__container,
.horizontal-use-cases__content,
.site-footer {
  height: auto !important;
  max-height:none;
  overflow-y: visible !important;
}

/* Sticky requires every ancestor to allow vertical overflow. */
.horizontal-use-cases {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Sticky industry navigation block. */
.horizontal-use-cases__navigation-wrap {
  position: sticky;
  top: 78px;
  z-index: 40;
  width: 100%;
  margin-bottom: clamp(34px, 4vw, 48px);
  padding: 14px 14px 16px;
  border: 1px solid rgba(220, 228, 240, 0.92);
  border-radius: 18px;
  background: rgba(245, 247, 253, 0.96);
  box-shadow: 0 10px 28px rgba(22, 50, 112, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.horizontal-use-cases__navigation-heading {
  margin-bottom: 14px;
}

.horizontal-use-cases__navigation {
  position: relative;
  z-index: 1;
}

/* Do not allow the desktop navigation itself to create a vertical scroll area. */
.horizontal-use-cases__navigation {
  overflow-y: visible !important;
}

@media (max-width: 1000px) {
  .horizontal-use-cases__navigation-wrap {
    top: 70px;
    padding: 12px 12px 14px;
  }
}

@media (max-width: 767px) {
  .horizontal-use-cases__navigation-wrap {
    top: 62px;
    margin-left: -4px;
    margin-right: -4px;
    padding: 10px 8px 11px;
    border-radius: 14px;
  }

  .horizontal-use-cases__navigation-heading {
    margin-bottom: 10px;
  }

  .horizontal-use-cases__navigation {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
}

/* =========================================================
   FINAL SIZE ADJUSTMENTS
   Larger use-case image and 800px premium sticky navigation.
   ========================================================= */

.horizontal-use-cases__navigation-wrap {
  width: min(100%, 800px) !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.horizontal-use-cases__navigation {
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

.horizontal-use-cases__content {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.horizontal-use-cases__card {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.horizontal-use-cases__image-wrap {
  width: 100%;
  min-height: 300px;
  padding: clamp(12px, 1.6vw, 24px);
  background: #ffffff;
}

.horizontal-use-cases__image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  max-height:none;
  margin: 0 auto;
  object-fit: contain;
  object-position: center top;
}

@media (max-width: 1000px) {
  .horizontal-use-cases__content,
  .horizontal-use-cases__card {
    max-width: 100%;
  }

  .horizontal-use-cases__image-wrap {
    min-height: 240px;
    padding: 16px;
  }
}

@media (max-width: 767px) {
  .horizontal-use-cases__navigation-wrap {
    width: 100% !important;
    max-width: 800px !important;
  }

  .horizontal-use-cases__image-wrap {
    min-height: 0;
    padding: 10px;
  }

  .horizontal-use-cases__image-wrap img {
    max-height:none;
  }
}

/* =========================================================
   FINAL USER ADJUSTMENTS - 2026-07-15
   Non-sticky white horizontal navigation and no footer gap.
   ========================================================= */

/* Remove sticky behavior completely. */
.horizontal-use-cases__navigation-wrap {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  width: min(100%, 800px) !important;
  max-width: 800px !important;
  margin: 0 auto clamp(28px, 3vw, 38px) !important;
  padding: 16px !important;
  border: 1px solid #e0e6f1 !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 30px rgba(22, 50, 112, 0.09) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.horizontal-use-cases__navigation-heading {
  margin-bottom: 14px !important;
}

.horizontal-use-cases__navigation {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* Cleaner, consistent industry buttons on the white bar. */
.horizontal-use-cases__industry-button {
  min-width: 132px !important;
  min-height: 44px !important;
  padding: 9px 16px !important;
  border: 1px solid #d8e0ee !important;
  border-radius: 999px !important;
  color: #17243c !important;
  background: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  box-shadow: 0 4px 12px rgba(22, 50, 112, 0.05) !important;
}

.horizontal-use-cases__industry-button:hover {
  color: var(--uc-primary) !important;
  border-color: #b8c8f6 !important;
  background: #f3f6ff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 18px rgba(49, 87, 223, 0.12) !important;
}

.horizontal-use-cases__industry-button.active {
  color: #ffffff !important;
  border-color: var(--uc-primary) !important;
  background: var(--uc-primary) !important;
  box-shadow: 0 8px 20px rgba(49, 87, 223, 0.22) !important;
}

/* Remove the extra space after the Inbound/Outbound card. */
.horizontal-use-cases {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.horizontal-use-cases__container,
.horizontal-use-cases__content,
.horizontal-use-cases__card {
  margin-bottom: 0 !important;
}

.site-footer {
  margin-top: 0 !important;
}

@media (max-width: 767px) {
  .horizontal-use-cases__navigation-wrap {
    position: static !important;
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto 28px !important;
    padding: 12px 10px !important;
    border-radius: 14px !important;
  }

  .horizontal-use-cases__navigation {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 1px 8px !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .horizontal-use-cases__industry-button {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    min-height: 42px !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  .horizontal-use-cases {
    padding-bottom: 0 !important;
  }
}



/* Premium header buttons */
.header-menu{display:flex;align-items:center;gap:12px}
.header-menu a,.language-btn,.nav-dropdown>a{
display:flex;align-items:center;justify-content:center;
height:48px;padding:0 26px;border:2px solid #3157DF;
border-radius:12px;background:#fff;color:#3157DF;
font-size:15px;font-weight:700;text-decoration:none;
transition:.3s ease;
}
.header-menu a:hover,.header-menu a.active,
.language-btn:hover,.nav-dropdown:hover>a{
background:#3157DF;color:#fff;
box-shadow:0 10px 22px rgba(49,87,223,.2);
transform:translateY(-2px);
}


/* =========================================================
   FINAL LAYOUT — INDUSTRY MENU ON THE LEFT
   Added 2026-07-15
   ========================================================= */

.horizontal-use-cases {
  padding: clamp(46px, 5vw, 72px) clamp(18px, 3vw, 34px) 36px !important;
  overflow: visible !important;
}

.horizontal-use-cases__container {
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: clamp(34px, 4vw, 58px) !important;
  width: min(100%, 1320px) !important;
  margin: 0 auto !important;
}

.horizontal-use-cases__navigation-wrap {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 24px 18px 20px !important;
  border: 1px solid #dce4f0 !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 46px rgba(22, 50, 112, 0.09) !important;
}

.horizontal-use-cases__navigation-heading {
  margin: 0 0 18px !important;
  padding: 0 6px 17px !important;
  border-bottom: 1px solid #e4eaf3 !important;
  text-align: left !important;
}

.horizontal-use-cases__navigation-heading span {
  margin-bottom: 5px !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
}

.horizontal-use-cases__navigation-heading h2 {
  font-size: 25px !important;
  line-height: 1.3 !important;
}

.horizontal-use-cases__navigation {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.horizontal-use-cases__industry-button {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 11px 17px !important;
  border: 1px solid #dce4f0 !important;
  border-radius: 12px !important;
  color: #17243c !important;
  background: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  box-shadow: none !important;
  transform: none !important;
}

.horizontal-use-cases__industry-button:hover {
  padding-left: 21px !important;
  color: var(--uc-primary) !important;
  border-color: #b9c8f7 !important;
  background: #f3f6ff !important;
  box-shadow: 0 7px 18px rgba(49, 87, 223, 0.10) !important;
  transform: none !important;
}

.horizontal-use-cases__industry-button.active {
  position: relative !important;
  padding-left: 34px !important;
  color: #ffffff !important;
  border-color: var(--uc-primary) !important;
  background: var(--uc-primary) !important;
  box-shadow: 0 9px 22px rgba(49, 87, 223, 0.20) !important;
}

.horizontal-use-cases__industry-button.active::before {
  position: absolute;
  top: 50%;
  left: 17px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  content: "";
  background: #ffffff;
  transform: translateY(-50%);
}

.horizontal-use-cases__content {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.horizontal-use-cases__header {
  margin: 0 0 30px !important;
  padding: 4px 0 0 !important;
  text-align: center !important;
  scroll-margin-top: 118px;
}

.horizontal-use-cases__header h2 {
  max-width: 900px !important;
  font-size: clamp(34px, 3.3vw, 52px) !important;
}

.horizontal-use-cases__header p {
  max-width: 860px !important;
  margin-top: 18px !important;
}

.horizontal-use-cases__mode-buttons {
  grid-template-columns: repeat(2, minmax(220px, 310px)) !important;
  gap: 16px !important;
  margin-top: 26px !important;
}

.horizontal-use-cases__mode-button {
  min-height: 54px !important;
  font-size: 15px !important;
}

.horizontal-use-cases__card {
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
}

.horizontal-use-cases__image-wrap {
  padding: clamp(10px, 1.4vw, 18px) !important;
}

.horizontal-use-cases__image-wrap img {
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

/* Keep a balanced but compact space before the footer. */
.horizontal-use-cases {
  margin-bottom: 0 !important;
  padding-bottom: 34px !important;
}

.site-footer {
  margin-top: 0 !important;
}

/* Tablet */
@media (max-width: 1000px) {
  .horizontal-use-cases__container {
    grid-template-columns: 220px minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  .horizontal-use-cases__navigation-wrap {
    padding: 20px 14px 16px !important;
  }

  .horizontal-use-cases__navigation-heading h2 {
    font-size: 22px !important;
  }

  .horizontal-use-cases__industry-button {
    min-height: 45px !important;
    padding: 10px 13px !important;
    font-size: 12px !important;
  }

  .horizontal-use-cases__industry-button.active {
    padding-left: 30px !important;
  }

  .horizontal-use-cases__industry-button.active::before {
    left: 14px;
  }

  .horizontal-use-cases__header h2 {
    font-size: clamp(31px, 4.5vw, 44px) !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .horizontal-use-cases {
    padding: 38px 14px 28px !important;
  }

  .horizontal-use-cases__container {
    display: block !important;
    width: 100% !important;
  }

  .horizontal-use-cases__navigation-wrap {
    width: 100% !important;
    margin: 0 0 30px !important;
    padding: 17px 12px 14px !important;
    border-radius: 16px !important;
  }

  .horizontal-use-cases__navigation-heading {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    text-align: center !important;
  }

  .horizontal-use-cases__navigation {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 1px 1px 8px !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .horizontal-use-cases__industry-button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    min-height: 42px !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    text-align: center !important;
  }

  .horizontal-use-cases__industry-button:hover,
  .horizontal-use-cases__industry-button.active {
    padding-left: 14px !important;
  }

  .horizontal-use-cases__industry-button.active::before {
    display: none !important;
  }

  .horizontal-use-cases__header {
    margin-bottom: 23px !important;
    scroll-margin-top: 92px;
  }

  .horizontal-use-cases__mode-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin-top: 20px !important;
  }

  .horizontal-use-cases__mode-button {
    min-height: 48px !important;
    padding: 8px !important;
    font-size: 12px !important;
  }

  .horizontal-use-cases__card {
    max-width: 100% !important;
  }
}

@media (max-width: 430px) {
  .horizontal-use-cases__mode-buttons {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   FINAL UPDATE — STICKY, FULLY VISIBLE INDUSTRY MENU
   ========================================================= */

@media (min-width: 768px) {
  .horizontal-use-cases__navigation-wrap {
    position: sticky !important;
    top: 118px !important;
    align-self: start !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: 20 !important;
  }

  .horizontal-use-cases__navigation {
    max-height: none !important;
    overflow: visible !important;
  }

  .horizontal-use-cases__industry-button {
    flex-shrink: 0 !important;
  }
}

.horizontal-use-cases,
.horizontal-use-cases__container {
  overflow: visible !important;
}

@media (max-width: 767px) {
  .horizontal-use-cases__navigation-wrap {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }
}


/* Real clickable CTA over every use-case poster */
.horizontal-use-cases__image-wrap {
  position: relative;
}

.usecase-poster-contact-button {
  z-index: 8;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 0.65em 1em;
  border: 0;
  border-radius: 5px; /*clamp(20px, 5vw, 20px);*/
  background: #FF9933;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(11px, 1.55vw, 21px);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(255, 107, 0, 0);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.usecase-poster-contact-button:hover,
.usecase-poster-contact-button:focus-visible {
  background: #005CE6;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(33, 33, 0, 0.15);
}

.usecase-poster-contact-button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.95);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .usecase-poster-contact-button {
    font-size: clamp(10px, 3vw, 15px);
    padding: 0.55em 0.75em;
  }
}

/* =========================================================
   UCASES HERO TEXT ALIGNMENT ONLY - 2026-09-11
   No other page design rules are changed below.
   ========================================================= */
.dx-denai-hero-content {
  width: min(500px, 42vw) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
}

.dx-denai-hero-title {
  max-width: 500px !important;
  margin: 0 !important;
  font-size: clamp(44px, 3.75vw, 58px) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

.dx-denai-hero-description {
  max-width: 430px !important;
  margin: 18px 0 0 !important;
  line-height: 1.7 !important;
  text-align: left !important;
}

@media (max-width: 1150px) {
  .dx-denai-hero-content {
    width: min(440px, 48vw) !important;
  }

  .dx-denai-hero-title {
    max-width: 440px !important;
    font-size: clamp(40px, 4.6vw, 52px) !important;
  }
}

@media (max-width: 767px) {
  .dx-denai-hero-content {
    width: min(100%, 420px) !important;
  }

  .dx-denai-hero-title {
    max-width: 100% !important;
    font-size: clamp(36px, 11vw, 48px) !important;
    line-height: 1.12 !important;
  }

  .dx-denai-hero-description {
    max-width: 360px !important;
    margin-top: 14px !important;
  }
}