/* Hero Section */
.hero {
  position: relative;
  height: 400px;
  margin-top: 75px;
  /* plans.css has a generic `section { margin-bottom: 120px }` rule for
     content sections that also matches .hero (it's a <section> too) on
     service/voice/QAB100years — override it explicitly here so the
     breadcrumb always sits directly under the hero on every page. */
  margin-bottom: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: url('../images/vvokSzDHWN.webp') repeat;
  /* Scrim: darkens the left side (where hero-text-s always sits) so white
     text stays readable no matter what photo ends up in .hero-backgroundN,
     without covering the whole image. */
  --hero-scrim: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.28) 35%, rgba(0, 0, 0, 0.05) 62%, rgba(0, 0, 0, 0) 80%);
}

/* Background layer: always fills the hero box edge-to-edge, regardless of
   .hero's height, so it can never leave gaps or clip unpredictably. */
.hero-background,
.hero-background1,
.hero-background2,
.hero-background3,
.hero-background4,
.hero-background5,
.hero-background6,
.hero-background7,
.hero-background100 {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--hero-scrim);
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}

.hero-background1 {
  background-image: var(--hero-scrim), url('../images/WPLyFafAcZ.webp');
  background-size: 100% 100%, cover;
  background-position: 0 0, center 70%;
  background-repeat: no-repeat, no-repeat;
}

.hero-background2 {
  background-image: var(--hero-scrim), url('../images/wakon-Consultation.webp');
  background-size: 100% 100%, cover;
  background-position: 0 0, center;
  background-repeat: no-repeat, no-repeat;
}

.hero-background3 {
  background-image: var(--hero-scrim), url('../images/hero3.webp');
  background-size: 100% 100%, cover;
  background-position: 0 0, center;
  background-repeat: no-repeat, no-repeat;
}

.hero-background4 {
  background-image: var(--hero-scrim), url('../images/company2.webp');
  background-size: 100% 100%, cover;
  background-position: 0 0, center 58%;
  background-repeat: no-repeat, no-repeat;
}

.hero-background5 {
  background-image: var(--hero-scrim), url('../images/Rectangle4.webp');
  background-size: 100% 100%, cover;
  background-position: 0 0, center;
  background-repeat: no-repeat, no-repeat;
}

.hero-background6 {
  background-image: var(--hero-scrim), url('../images/hero6.webp');
  background-size: 100% 100%, cover;
  background-position: 0 0, center;
  background-repeat: no-repeat, no-repeat;
}

.hero-background7 {
  background-image: var(--hero-scrim), url('../images/voice3-1.webp');
  background-size: 100% 100%, cover;
  background-position: 0 0, center;
  background-repeat: no-repeat, no-repeat;
}

.hero-background100 {
  background-image: var(--hero-scrim), url('../images/100years.webp');
  background-size: 100% 100%, cover;
  background-position: 0 0, center 50%;
  background-repeat: no-repeat, no-repeat;
}

.hero-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Always empty in current markup. Page-specific stylesheets loaded earlier
   still define this class with width:100%/padding/max-width left over from
   the old layout; every box-model property is overridden explicitly here
   so it can never claim flex space and squeeze .hero-text-s. */
.hero-content {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 352px;
}

/* Text block: a normal flex item, vertically centered by .hero itself.
   No viewport-height-based margins, so it can never be pushed out of the
   hero box or under the fixed header. */
.hero-text-s {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 220px;
}

.hero-subtitle {
  font-family: 'Yu Mincho', serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: var(--white);
  margin: 0;
}

.hero-title {
  font-family: 'Yu Mincho', serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.3;
  color: var(--white);
  margin: 0;
  white-space: normal;
}

.hero-decoration {
  width: 99px;
  height: 7px;
  background: url('../images/okinawa-ryukyuwakon-minsa-.svg') no-repeat;
  background-size: contain;
}

.decoration-line {
  width: 99px;
  height: 7px;
  object-fit: contain;
}

/* Breadcrumb: sits directly under the hero, sharing its left padding
   schedule exactly (same values at every breakpoint below) so the
   breadcrumb and hero title always line up on the same left edge,
   regardless of viewport width. Deliberately not a centered max-width
   container — that was the previous cause of misalignment, since a
   centered box's left edge drifts with viewport width while the hero
   text's fixed padding-left doesn't. */
.breadcrumb {
  padding: 16px 0;
  background: transparent;
}

.breadcrumb-container {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding-left: 220px;
  padding-right: 20px;
}

.breadcrumb-link {
  font-family: 'Yu Mincho Pr6N', serif;
  font-weight: 600;
  font-size: 14px;
  color: #B33D31;
  transition: color 0.3s ease;
}

.breadcrumb-link:hover {
  color: #8B2E24;
}

.breadcrumb-separator {
  display: flex;
  align-items: center;
  color: #B33D31;
}

.breadcrumb-current {
  font-family: 'Yu Mincho Pr6N', serif;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
}

/* Responsive */
@media (max-width: 1024px) {
  .hero-text-s {
    padding-left: 120px;
  }

  .breadcrumb-container {
    padding-left: 120px;
  }
}

@media (max-width: 768px) {

  /* !important: an unidentified legacy rule elsewhere forces a large auto
     min-height at this breakpoint that survives a plain declaration here
     (confirmed via stylesheet-disable testing) — !important guarantees
     this fixed height actually applies. */
  .hero {
    height: 320px !important;
    min-height: 0 !important;
  }

  .hero-text-s {
    padding-left: 60px;
    gap: 10px;
  }

  .hero-title {
    font-size: 26px;
    line-height: 1.3;
  }

  .hero-subtitle {
    font-size: 12px;
  }

  .breadcrumb-container {
    padding-left: 60px;
  }

  .breadcrumb-link,
  .breadcrumb-current {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .hero-text-s {
    padding-left: 20px;
    gap: 8px;
  }

  .hero-title {
    font-size: 22px;
    line-height: 1.3;
  }

  .hero-subtitle {
    font-size: 11px;
  }

  .hero-decoration,
  .decoration-line {
    width: 80px;
    height: 6px;
  }

  .breadcrumb-container {
    padding-left: 20px;
  }

  .breadcrumb-link,
  .breadcrumb-current {
    font-size: 11px;
  }
}

/* ===== 印刷用 ===== */
@media print {

  .hero-background,
  .hero-background1,
  .hero-background2,
  .hero-background3,
  .hero-background4,
  .hero-background5,
  .hero-background6,
  .hero-background7,
  .hero-background100 {
    position: static;
  }

  .hero-text-s {
    color: black;
  }
}