/* チャットボット用スタイル */
.chat-message {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInMessage 0.3s forwards;
}

@keyframes fadeInMessage {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.typing-dot {
  animation: typing 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typing {

  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

/* Swiper (main) */
.main-swiper {
  width: 100vw;
  height: 100vh;
  touch-action: pan-y;
  overflow: hidden;
}

.main-swiper>.swiper-wrapper {
  width: 100vw !important;
}

/* main の直下スライドのみ対象（内側Swiperの .swiper-slide を巻き込まない） */
.main-swiper>.swiper-wrapper>.swiper-slide {
  width: 100vw !important;
  max-width: 100vw !important;
  flex: 0 0 100vw !important;
  height: 100%;
}

/* Inner Swipers（カード型：複数枚見せ） */
.reasons-swiper,
.flow-swiper,
.faq-swiper,
.trackrecord-swiper {
  width: 100%;
  position: relative;
  padding-bottom: 28px;
  /* 下インジケーター分 */
}

/* Inner pagination（下・左寄せ：カード型02寄せ） */
.reasons-swiper .swiper-pagination,
.flow-swiper .swiper-pagination,
.faq-swiper .swiper-pagination,
.trackrecord-swiper .swiper-pagination {
  position: absolute;
  left: 16px;
  bottom: 0;
  width: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 5;
}

.reasons-swiper .swiper-pagination-bullet,
.flow-swiper .swiper-pagination-bullet,
.faq-swiper .swiper-pagination-bullet,
.trackrecord-swiper .swiper-pagination-bullet {
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.9);
  /* slate-400 */
  opacity: 1;
  transition: width 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
  margin: 0 !important;
  /* Swiper default margin reset */
}

.reasons-swiper .swiper-pagination-bullet-active,
.flow-swiper .swiper-pagination-bullet-active,
.faq-swiper .swiper-pagination-bullet-active,
.trackrecord-swiper .swiper-pagination-bullet-active {
  width: 44px;
  background: #1e3a8a;
  /* brand.main */
}

/* Fix: reasons/flow were full-width because Swiper default .swiper-slide { width:100% }.
           FAQ had max-w, so it worked. Make reasons/flow slides auto width like card型. */
.reasons-swiper .swiper-slide,
.flow-swiper .swiper-slide,
.trackrecord-swiper .swiper-slide {
  width: auto;
  max-width: 520px;
}


/* Inner Swipers: normalize card heights (align to tallest in the row) */
.reasons-swiper .swiper-wrapper,
.flow-swiper .swiper-wrapper,
.faq-swiper .swiper-wrapper,
.trackrecord-swiper .swiper-wrapper {
  align-items: stretch;
}

.reasons-swiper .swiper-slide,
.flow-swiper .swiper-slide,
.faq-swiper .swiper-slide,
.trackrecord-swiper .swiper-slide {
  height: auto;
  display: flex;
}

/* When the slide itself is the card, ensure it can stretch */
.reason-card,
.flow-step,
.faq-card,
.trackrecord-card {
  height: 100%;
}

/* Header nav active state */
.header-nav a.is-active {
  color: #1e3a8a;
  /* brand.main */
}

.header-nav a.is-active span {
  width: 100%;
}