/* ============================================================
   hero.css — 下層ページ共通キービジュアル
   /corp/css/hero.css
   ============================================================ */

/* ----------------------------------------------------------
   1. Section base
   ---------------------------------------------------------- */
.hero_section,
.contact-hero,
.privacy-hero {
  position: relative;
  background: #F7F7F7;
  overflow: hidden;
  /*padding-top: clamp(64px, 4.9vw, 94px);*/
  margin-top: clamp(64px, 4.9vw, 94px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* ----------------------------------------------------------
   2. Inner container
   ---------------------------------------------------------- */
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  min-height: 0;
  padding: clamp(30px, 4vw, 80px) clamp(20px, 13.5vw, 260px) clamp(50px, 5vw, 100px);
  box-sizing: border-box;
}
[class$="hero__inner"] {
    position: relative;
    z-index: 3;
}
/* ----------------------------------------------------------
   3. Text wrapper
   ---------------------------------------------------------- */
.hero__text {
  max-width: clamp(280px, 48vw, 760px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.83vw, 14px);
}

/* ----------------------------------------------------------
   4. Label (English caps above heading)
   ---------------------------------------------------------- */
.hero__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #009A59;
  text-transform: uppercase;
  margin: 0;
}

/* ----------------------------------------------------------
   5. Page heading (h1)
   ---------------------------------------------------------- */
.hero__heading {
  font-size: clamp(24px, 2.6vw, 50px);
  font-weight: 700;
  color: #333;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(8px, 0.83vw, 16px);
}

/* ----------------------------------------------------------
   6. Subtitle
   ---------------------------------------------------------- */
.hero__subtitle {
  font-size: clamp(13px, 1.04vw, 18px);
  color: #555;
  line-height: 1.7;
  margin: 0;
}

/* ----------------------------------------------------------
   7. Body text
   ---------------------------------------------------------- */
.hero__body {
  font-size: clamp(13px, 1.04vw, 20px);
  color: #333;
  line-height: 1.9;
  margin: 0;
}

/* ----------------------------------------------------------
   8. Right side photo
   ---------------------------------------------------------- */
.hero__photo {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 55%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
  max-width: none;
}

.hero__photo::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  background: linear-gradient(to right, #F7F7F7, transparent);
  z-index: 1;
}

/* ----------------------------------------------------------
   9. Arch transition element
   ---------------------------------------------------------- */
.arch {
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  z-index: 3;
}

.arch img {
  width: 100%;
  display: block;
  max-width: none;
}

/* ----------------------------------------------------------
   10. Breadcrumb inside hero
   ---------------------------------------------------------- */
.hero__breadcrumb {
  margin-top: clamp(4px, 0.52vw, 8px);
}

.hero__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero__breadcrumb li {
  font-size: 11px;
  color: #aaa;
}

.hero__breadcrumb li + li::before {
  content: '/';
  margin-right: 6px;
  opacity: 0.5;
}

.hero__breadcrumb a {
  color: #888;
  text-decoration: none;
  transition: color 0.2s;
}

.hero__breadcrumb a:hover {
  color: #444;
}

.hero__breadcrumb [aria-current="page"] {
  color: #555;
}