/*
|---------------------------------------------------------------
| qinc2026-btob-hero.css - BtoB EC・DX支援 ヒーローセクション
|---------------------------------------------------------------
*/

/* ==========================================================================
   Section: BtoB Hero
   ========================================================================== */
.btob-hero {
  position: relative;
  margin: 0 30px;
  overflow: hidden;
  /* 720px @1920 → 480px @1024 */
  min-height: clamp(480px, calc(186.7px + 27.78vw), 720px);
  display: flex;
  align-items: center;
}

/* Background
   ========================================================================== */
.btob-hero__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    146.26deg,
    #1e2c63 2.09%,
    #020441 43.77%,
    #020441 63.66%,
    #1e2c63 100.61%
  );
  border-radius: 20px;
  overflow: hidden;
}

.btob-hero__bg-texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: lighten;
  pointer-events: none;
}

/* Inner
   ========================================================================== */
.btob-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Content (Left)
   ========================================================================== */
.btob-hero__content {
  position: relative;
  z-index: 2;
  width: fit-content;
  text-align: center;
}

/* Label */
.btob-hero__label {
  display: block;
  padding: 10px 32px;
  border: 1px solid var(--color-gold, #c5a059);
  font-family: var(--font-family-en, "Montserrat", sans-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-gold, #c5a059);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1;
  box-sizing: border-box;
}

/* Title */
.btob-hero__title {
  margin: 24px 0 0;
  font-size: 91px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: 1.2px;
  font-feature-settings: "palt" 1;
}

/* Subtitle */
.btob-hero__subtitle {
  margin: 16px 0 0;
  font-size: 28px;
  font-weight: 500;
  color: var(--color-gold, #c5a059);
  letter-spacing: 1.4px;
  font-feature-settings: "palt" 1;
}

/* Visual (Illustration)
   Figma: x=896, w=761 in 1860px hero → left 48.2%, width 40.9%, right 10.9%
   ========================================================================== */
/* Animation */
@keyframes btob-hero-fade-in {
  from {
    opacity: 0;
    transform: translateY(calc(-50% + 20px));
  }
  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}

@keyframes btob-hero-fade-in-sp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.btob-hero__visual {
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  width: 42%;
  z-index: 1;
  pointer-events: none;
  animation: btob-hero-fade-in 0.8s ease-out forwards;
}

.btob-hero__illust {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .btob-hero__title {
    font-size: 72px;
  }

  .btob-hero__subtitle {
    font-size: 22px;
  }

  .btob-hero__visual {
    right: 5%;
    width: 45%;
  }
}

@media (max-width: 1024px) {
  .btob-hero {
    margin: 0 16px;
    min-height: auto;
    display: block;
  }

  .btob-hero__bg {
    border-radius: 16px;
  }

  .btob-hero__inner {
    position: relative;
    padding: 60px 32px;
    text-align: center;
  }

  .btob-hero__content {
    margin: 0 auto;
  }

  .btob-hero__title {
    font-size: 56px;
  }

  .btob-hero__subtitle {
    font-size: 20px;
  }

  .btob-hero__label {
    font-size: 16px;
    padding: 8px 24px;
  }

  .btob-hero__visual {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 80%;
    max-width: 500px;
    margin: 0 auto;
    padding: 0 32px 48px;
    animation-name: btob-hero-fade-in-sp;
  }
}

@media (max-width: 768px) {
  .btob-hero {
    margin: 0 12px;
  }

  .btob-hero__bg {
    border-radius: 12px;
  }

  .btob-hero__inner {
    padding: 48px 24px;
  }

  .btob-hero__label {
    font-size: 14px;
    padding: 6px 20px;
  }

  .btob-hero__title {
    font-size: 40px;
    margin-top: 20px;
  }

  .btob-hero__subtitle {
    font-size: 16px;
  }

  .btob-hero__visual {
    width: 100%;
    max-width: 400px;
    padding: 0 24px 40px;
  }
}