/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  background-color: #ffffff;
  color: #2E2E30;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   TYPOGRAPHY — Hiragino Kaku Gothic Pro fallback stack
   ============================================================ */
.hero-heading,
.title-para21 {
  font-family: "Hiragino Kaku Gothic Pro", 
               "Noto Sans JP", "Meiryo", sans-serif;
  color: #2E2E30;
  letter-spacing: 0;
  font-size: 20px;
}

/* ============================================================
   SECTION WRAPPER
   ============================================================ */
.hero-section {
  width: 100%;
  padding: 12px 0px;
}

/* ============================================================
   HERO CONTAINER  (mirrors Figma parent: gap 30px, two cols)
   ============================================================ */
.hero-container {
  display: flex;
  flex-direction: row;
  gap: 30px;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-left,
.hero-right {
  flex: 1 1 0;
  min-width: 0;
}

/* ============================================================
   HERO CONTENT (left column inner wrapper)
   ============================================================ */
.hero-content {
  display: flex;
  flex-direction: column;
}

/* ============================================================
   CUSTOMER COUNT IMAGE
   Figma: width 336.31px, height 38px, gap 8px
   ============================================================ */
.customer-count-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;           /* space before heading */
}

.customer-count-img {
  width: 336.31px;
  height: 38px;
  max-width: 100%;               /* never overflow on small screens */
  object-fit: contain;
  display: block;
}

/* ============================================================
   HEADINGS  — Figma laptop: 40px / W6 / line-height 100%
   ============================================================ */
.hero-heading {
  font-weight: 600;              /* W6 */
  font-size: 40px;
  line-height: 1;                /* 100% */
  color: #2E2E30;
}

.hero-heading + .hero-heading {
  margin-top: 4px;               /* tight pair */
}

/* mt-5 equivalent on the first heading */
.hero-heading.mt-5 {
  margin-top: 30px;              /* ~Bootstrap mt-5 at 16px base */
}

/* ============================================================
   PARAGRAPH  — Figma laptop: 20px / W3 / line-height 100%
   ============================================================ */
.title-para21 {
  font-weight: 300;              /* W3 */
  font-size: 20px;
  line-height: 1.4;              /* slight open for Japanese readability */
  color: #2E2E30;
  margin-top: 24px;
}

/* ============================================================
   RIGHT COLUMN PLACEHOLDER
   ============================================================ */
.hero-right-placeholder {
  width: 100%;
  min-height: 278px;
  background-color: #f4f4f5;
  border-radius: 8px;
}

/* ============================================================
   ─────────────────────────────────────────────────────────────
   RESPONSIVE BREAKPOINTS
   ─────────────────────────────────────────────────────────────

   Laptop (base):        1024px – 1439px   → styles above
   Mobile:               320px  – 480px    → see below
   Tablet:               481px  – 768px    → see below
   Large Monitor:        1440px+           → see below
   ============================================================ */


/* ============================================================
   MOBILE  320px – 480px
   ============================================================ */
@media (max-width: 480px) {

  .hero-section {
    padding: 32px 16px;
  }

  /* Stack columns vertically; left (text) comes first */
  .hero-container {
    flex-direction: column;
    gap: 24px;
  }

  .hero-left,
  .hero-right {
    flex: none;
    width: 100%;
  }

  /* Customer count image: scale down to fit narrow screens */
  .customer-count-img {
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: auto;
  }

  /* Headings: scale down from 40px → 24px */
  .hero-heading {
    font-size: 24px;
    line-height: 1.25;
    margin-top: 10px !important;
  }

  /* Paragraph: scale down from 20px → 15px */
  .title-para21 {
    font-size: 15px;
    line-height: 1.6;
    margin-top: 16px;
  }

  /* Right column placeholder shorter on mobile */
  .hero-right-placeholder {
    min-height: 180px;
  }
}


/* ============================================================
   TABLET  481px – 768px
   ============================================================ */
@media (min-width: 481px) and (max-width: 768px) {

  .hero-section {
    padding: 40px 24px;
  }

  /* Keep side-by-side but narrower, or stack — tablet stacks */
  .hero-container {
    flex-direction: column;
    gap: 28px;
  }

  .hero-left,
  .hero-right {
    flex: none;
    width: 100%;
  }

  /* Customer count image: proportional */
  .customer-count-img {
    width: 300px;
    height: auto;
  }

  /* Headings: 32px for tablet */
  .hero-heading {
    font-size: 32px;
    line-height: 1.15;
  }

  .hero-heading.mt-5 {
    margin-top: 24px;
  }

  /* Paragraph: 17px for tablet */
  .title-para21 {
    font-size: 17px;
    line-height: 1.55;
    margin-top: 20px;
  }

  .hero-right-placeholder {
    min-height: 220px;
  }
}


/* ============================================================
   LAPTOP  769px – 1439px  (base styles already handle this)
   Explicitly declared for clarity / overrides if needed
   ============================================================ */
@media (min-width: 769px) and (max-width: 1439px) {

  .hero-section {
    padding: 12px 0px;
  }
.index-hero-div{
    padding: 2rem;
   }
  .hero-container {
    flex-direction: row;
    gap: 30px;
  }

  /* Figma parent was 617px wide — constrain left col */
  .hero-left {
    max-width: 617px;
  }

  /* Exact Figma values */
  .customer-count-img {
    width: 336.31px;
    height: 38px;
  }

  .hero-heading {
    font-size: 40px;
    line-height: 1;
  }

  .hero-heading.mt-5 {
    margin-top: 30px;
  }

  .title-para21 {
    font-size: 20px;
    line-height: 1.4;
    margin-top: 24px;
  }
}


/* ============================================================
   LARGE MONITOR  1440px+
   ============================================================ */
@media (min-width: 1440px) {

  .hero-section {
    padding: 80px 80px;
  }
   .index-hero-div{
    padding: 2rem;
   }
  .hero-container {
    flex-direction: row;
    gap: 48px;
    max-width: 1600px;
  }

  /* Scale up image slightly for large screens */
  .customer-count-img {
    width: 400px;
    height: auto;
  }

  /* Headings scale up: 40px → 52px */
  .hero-heading {
    font-size: 52px;
    line-height: 1.05;
  }

  .hero-heading.mt-5 {
    margin-top: 40px;
  }

  /* Paragraph scales up: 20px → 24px */
  .title-para21 {
    font-size: 24px;
    line-height: 1.5;
    margin-top: 32px;
  }

  .hero-right-placeholder {
    min-height: 340px;
  }
}