/* Mobile hero and navigation corrections */


/* Lightweight carousel used on every viewport. */
.hero_carousel.hero-native-ready {
  position: relative !important;
  overflow: hidden !important;
}

.hero_carousel.hero-native-ready .hero_carousel-item {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility .8s ease;
  z-index: 1;
}

.hero_carousel.hero-native-ready .hero_carousel-item.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
}

.hero_carousel.hero-native-ready .hero_carousel-item img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.hero_carousel-dots {
  position: absolute;
  right: 0;
  bottom: 20px;
  left: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.hero_carousel-dots button {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 2px 8px rgba(48, 70, 60, .18);
  font-size: 0;
  cursor: pointer;
}

.hero_carousel-dots button.is-active {
  background: #7fbea0;
}

@media screen and (max-width: 67.5em) {
  body.menu-open {
    overflow: hidden !important;
    touch-action: none;
  }

  .header:not(.header_change) {
    display: block !important;
    z-index: 20000 !important;
  }

  .gnav_btn,
  .tel_btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .gnav_btn {
    z-index: 20004 !important;
  }

  .gnav_btn--lines,
  .gnav_btn--lines span {
    display: block !important;
    visibility: visible !important;
  }

  .gnav_btn--lines span {
    opacity: 1;
  }

  .gnav_btn.active .gnav_btn--lines span:nth-of-type(2) {
    opacity: 0 !important;
  }

  .gnav {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 88px 24px 32px !important;
    overflow-y: auto !important;
    background: #f7fcf9 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(100%) !important;
    transition: transform .35s ease, opacity .35s ease, visibility .35s ease !important;
    z-index: 20002 !important;
  }

  .gnav.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }

  .gnav_overlay {
    display: none !important;
  }

  .gnav--menu,
  .gnav--cta {
    width: 100% !important;
    padding: 0 !important;
  }

  .gnav.active .gnav--menu > li {
    width: 100% !important;
    max-width: 560px;
  }

  .gnav--link {
    padding: 16px 12px !important;
  }

  .head_sub_nav--wrap.active {
    display: block !important;
  }
}

/* The mobile eyecatch is a real image area, rather than an empty masked box. */
@media screen and (max-width: 47.9375em) {
  .hero {
    height: 700px !important;
  }

  .hero_slides02.hero_slides-main {
    display: block !important;
    top: 64px !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: clamp(250px, 60vw, 320px) !important;
    min-height: 250px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: 0 0 36px 36px;
    background: #dff2e7 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2 !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }

  .hero_slides02.hero_slides-main::before {
    display: none !important;
  }

  .hero_carousel {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #dff2e7 !important;
  }

  .hero_carousel-item {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility .8s ease;
    z-index: 1;
  }

  .hero_carousel:not(.hero-native-ready) .hero_carousel-item:first-child,
  .hero_carousel-item.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
  }

  .hero_carousel-item img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .hero_carousel-dots {
    position: absolute;
    right: 0;
    bottom: 14px;
    left: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .hero_carousel-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 50%;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 2px 8px rgba(48, 70, 60, .18);
    font-size: 0;
  }

  .hero_carousel-dots button.is-active {
    background: #7fbea0;
  }

  .hero--content {
    top: calc(64px + clamp(250px, 60vw, 320px) + 22px) !important;
    right: 20px !important;
    left: 20px !important;
  }

  .hero_deco_bg-02 {
    display: none !important;
  }

  .home_news {
    bottom: 28px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero_carousel-item,
  .gnav {
    transition-duration: .01ms !important;
  }
}

/* White logo after scrolling.
   Desktop uses the dedicated white logo in .header_change.
   Tablet/mobile retain the primary fixed header, so its colored logo is
   converted to solid white when the existing header-sm class is applied. */
.header--logo img {
  transition: filter .3s ease, opacity .3s ease;
}

@media screen and (max-width: 67.5em) {
  .header:not(.header_change).header-sm .header--logo img {
    filter: brightness(0) saturate(100%) invert(1) !important;
  }
}

/* Keep the complete hero message on one continuous green band on phones. */
@media screen and (max-width: 47.9375em) {
  .hero--content .main_ttl > span.marker {
    position: relative !important;
    display: inline-block !important;
    width: max-content !important;
    max-width: calc(100vw - 40px) !important;
    margin-top: .12em;
    white-space: nowrap !important;
    font-size: clamp(1.2rem, 6.4vw, 2rem) !important;
    line-height: 1.28 !important;
    z-index: 1;
  }

  .hero--content .main_ttl > span.marker::before {
    top: 50% !important;
    right: -.38em !important;
    left: -.38em !important;
    width: auto !important;
    height: 118% !important;
    transform: translateY(-50%) !important;
    border-radius: 0 !important;
  }

  .hero--content .main_ttl > span.marker > span {
    position: relative !important;
    display: block !important;
    white-space: nowrap !important;
    z-index: 1;
  }
}

/* 2026-07-17: tablet/mobile scrolled logo and desktop carousel reliability */
@media screen and (max-width: 67.5em) {
  .header:not(.header_change).header-sm .header--logo img {
    filter: brightness(0) saturate(100%) invert(1) !important;
    opacity: 1 !important;
  }
}

@media print, screen and (min-width: 67.5625em) {
  .hero_slides02.hero_slides-main {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1 !important;
  }

  .hero_carousel.hero-native-ready,
  .hero_carousel.hero-native-ready .hero_carousel-item,
  .hero_carousel.hero-native-ready .hero_carousel-item img {
    width: 100% !important;
    height: 100% !important;
  }

  .hero_carousel.hero-native-ready .hero_carousel-item {
    will-change: opacity;
  }
}