@charset "utf-8";
/*==========================================
  scroll reveal / rich motion
  (adds animated entrance + hover richness
  without altering the original layout)
==========================================*/

/* accessibility utility */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* keep anchor jumps from hiding under the fixed header */
[id] {
  scroll-margin-top: 110px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .reveal {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal--left {
    transform: translateX(-64px);
  }

  .reveal--left.is-visible {
    transform: translateX(0);
  }

  .reveal--right {
    transform: translateX(64px);
  }

  .reveal--right.is-visible {
    transform: translateX(0);
  }

  .reveal--zoom {
    transform: scale(0.9);
  }

  .reveal--zoom.is-visible {
    transform: scale(1);
  }

  /* stagger children of a .stagger container */
  .stagger > *:nth-child(1) { transition-delay: 0.05s; }
  .stagger > *:nth-child(2) { transition-delay: 0.15s; }
  .stagger > *:nth-child(3) { transition-delay: 0.25s; }
  .stagger > *:nth-child(4) { transition-delay: 0.35s; }
  .stagger > *:nth-child(5) { transition-delay: 0.45s; }
  .stagger > *:nth-child(6) { transition-delay: 0.55s; }
  .stagger > *:nth-child(7) { transition-delay: 0.65s; }
  .stagger > *:nth-child(8) { transition-delay: 0.75s; }
}

/* hover richness on interactive cards (kept in addition to existing hovers) */
.contents__item,
.strength__card,
.flow__item,
.service__img img,
.qa__item {
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.3s ease, color 0.3s ease;
}

.contents__item:hover,
.flow__item:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
}

.strength__cardWrap:hover .strength__card {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
}

.service__item:hover .service__img img {
  transform: scale(1.04);
}

.service__img {
  overflow: hidden;
  display: block;
}

.btn,
.circle-btn,
.nav__btnEntry {
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.btn:hover {
  transform: translateY(-3px);
}

.circle-btn:hover {
  transform: translateY(-4px) scale(1.03);
}

/* gentle float for the mascot speech bubble */
@media (prefers-reduced-motion: no-preference) {
  .message_fukidashi {
    animation: floatY 3.2s ease-in-out infinite;
  }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/*==========================================
  preloader
==========================================*/
#loader {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-black);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#loader.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader__inner {
  text-align: center;
}

.loader__logo {
  width: 64px;
  height: auto;
  filter: brightness(0) invert(1);
}

.loader__bar {
  width: 160px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  margin: 24px auto 0;
  overflow: hidden;
}

.loader__bar span {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--primary-yellow);
  border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .loader__logo {
    animation: loaderPulse 1.4s ease-in-out infinite;
  }

  .loader__bar span {
    animation: loaderBar 1.3s ease-in-out infinite;
  }
}

@keyframes loaderPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.75; }
}

@keyframes loaderBar {
  0% { transform: translateX(-120%); }
  50% { transform: translateX(60%); }
  100% { transform: translateX(280%); }
}

/* keep the page from flashing/scrolling behind the loader */
body.is-loading {
  overflow: hidden;
}

/*==========================================
  hero text overlay (real, crawlable copy
  layered on top of the hero photo)
==========================================*/
.mainImg {
  position: relative;
}

/*==========================================
  burger menu, richer treatment
==========================================*/
.header__btn {
  display: none;
  width: 32px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
}

.header__btnBar {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: var(--primary-black);
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.nav.active .header__btnBar:nth-child(1) {
  transform: translateY(10.5px) rotate(45deg);
}

.nav.active .header__btnBar:nth-child(2) {
  opacity: 0;
}

.nav.active .header__btnBar:nth-child(3) {
  transform: translateY(-10.5px) rotate(-45deg);
}

.nav__btn {
  display: none;
  width: 24px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.nav__btnBar {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: var(--primary-black);
}

.nav__btnBar:nth-child(1) {
  transform: translateY(-50%) rotate(45deg);
}

.nav__btnBar:nth-child(2) {
  transform: translateY(-50%) rotate(-45deg);
}

@media screen and (max-width: 1368px) {
  .header__btn {
    display: flex;
  }

  .nav__btn {
    display: block;
  }

  .nav {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px);
  }

  .nav__list.stagger > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .nav.active .nav__list.stagger > *:nth-child(1) { transition-delay: 0.05s; }
  .nav.active .nav__list.stagger > *:nth-child(2) { transition-delay: 0.12s; }
  .nav.active .nav__list.stagger > *:nth-child(3) { transition-delay: 0.19s; }
  .nav.active .nav__list.stagger > *:nth-child(4) { transition-delay: 0.26s; }
  .nav.active .nav__list.stagger > *:nth-child(5) { transition-delay: 0.33s; }
  .nav.active .nav__list.stagger > *:nth-child(6) { transition-delay: 0.4s; }
  .nav.active .nav__list.stagger > *:nth-child(7) { transition-delay: 0.47s; }

  .nav.active .nav__list.stagger > * {
    opacity: 1;
    transform: translateY(0);
  }
}

/*==========================================
  sticky header: compact + shadow on scroll
==========================================*/
.header {
  transition: padding 0.3s ease, box-shadow 0.3s ease;
}

.header.is-scrolled {
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow: rgba(0, 0, 0, 0.18) 0 10px 24px;
}

/*==========================================
  back-to-top button
==========================================*/
.toTop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--primary-gradation);
  border: 2px solid var(--primary-black);
  box-shadow: 11px 15px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, background 0.3s;
  z-index: 500;
}

.toTop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.toTop:hover {
  background: var(--primary-yellow);
}

.toTop__arrow {
  display: block;
  width: 10px;
  height: 10px;
  border-top: 3px solid var(--primary-white);
  border-right: 3px solid var(--primary-white);
  transform: rotate(-45deg) translateY(2px);
}

.toTop:hover .toTop__arrow {
  border-color: var(--primary-black);
}

@media screen and (max-width: 768px) {
  .toTop {
    width: 44px;
    height: 44px;
    right: 14px;
    bottom: 14px;
  }
}

/*==========================================
  button shimmer + counter emphasis
==========================================*/
.btn,
.nav__btnEntry {
  position: relative;
  overflow: hidden;
}

.btn::after,
.nav__btnEntry::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
}

@media (prefers-reduced-motion: no-preference) {
  .btn::after,
  .nav__btnEntry::after {
    animation: shimmer 3.2s ease-in-out infinite;
  }
}

@keyframes shimmer {
  0% { left: -60%; }
  35%, 100% { left: 130%; }
}

.counter {
  font-variant-numeric: tabular-nums;
}

/* schedule timeline: draw the connecting line in on reveal */
@media (prefers-reduced-motion: no-preference) {
  .schedule__item .schedule__circle::after {
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.6s ease 0.2s;
  }

  .schedule__item.is-visible .schedule__circle::after {
    transform: scaleX(1);
  }

  @media screen and (max-width: 768px) {
    .schedule__item .schedule__circle::after {
      transform-origin: top center;
    }
  }
}