/* ==========================================================================
   Main CSS — Imports all stylesheets in correct order
   STHD MIRAI / GLAMPING INVESTMENT LP（グランピング投資）
   ========================================================================== */

@import url('reset.css');
@import url('variables.css');
@import url('base.css');
@import url('layout.css');

/* Section components */
@import url('components/hero.css');
@import url('components/merit.css');
@import url('components/simulation.css');
@import url('components/benefit.css');
@import url('components/service.css');
@import url('components/flow.css');
@import url('components/faq.css');
@import url('components/company.css');
@import url('components/contact.css');

/* ==========================================================================
   Utility / Animation classes
   ========================================================================== */

.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
              transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.fade-up--delay-1 { transition-delay: 0.1s; }
.fade-up--delay-2 { transition-delay: 0.2s; }
.fade-up--delay-3 { transition-delay: 0.3s; }
.fade-up--delay-4 { transition-delay: 0.4s; }
.fade-up--delay-5 { transition-delay: 0.5s; }

.fade-in {
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in.is-visible {
  opacity: 1;
}

.fade-in--delay-1 { transition-delay: 0.15s; }
.fade-in--delay-2 { transition-delay: 0.3s; }
.fade-in--delay-3 { transition-delay: 0.45s; }

.scale-in {
  opacity: 0;
  transform: scale(0.92);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.scale-in.is-visible {
  opacity: 1;
  transform: scale(1);
}

.scale-in--delay-1 { transition-delay: 0.12s; }
.scale-in--delay-2 { transition-delay: 0.24s; }
.scale-in--delay-3 { transition-delay: 0.36s; }

/* ==========================================================================
   汎用カルーセル（767px以下で横スワイプ / scroll-snap ネイティブスクロール）
   ========================================================================== */

.c-carousel__dots,
.c-carousel__hint {
  display: none;
}

@media (max-width: 767px) {
  .c-carousel {
    position: relative;
  }

  .c-carousel__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: 14px;
    padding: 6px 4px 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .c-carousel__track::-webkit-scrollbar {
    display: none;
  }

  /* カード幅82%で次カードをちら見せ */
  .c-carousel__track > * {
    flex: 0 0 82%;
    max-width: 82%;
    scroll-snap-align: center;
  }

  /* ドットページネーション（activeは金に伸びる） */
  .c-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
  }

  .c-carousel__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(11, 22, 38, 0.18);
    cursor: pointer;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s;
    -webkit-tap-highlight-color: transparent;
  }

  .c-carousel__dot.is-active {
    width: 24px;
    background: var(--grad-gold);
  }

  /* スワイプヒント（一度スワイプしたらフェードアウト） */
  .c-carousel__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--c-text-muted);
    transition: opacity 0.6s ease, visibility 0.6s;
  }

  .c-carousel__hint.is-hidden {
    opacity: 0;
    visibility: hidden;
  }

  .c-carousel__hint-ic {
    width: 22px;
    height: 22px;
    color: var(--c-gold-deep);
    animation: swipeHint 1.6s ease-in-out infinite;
  }
}

@keyframes swipeHint {
  0%, 100% { transform: translateX(-6px) rotate(-4deg); }
  50%      { transform: translateX(8px) rotate(4deg); }
}

/* ==========================================================================
   中間CTA（セクション途中の誘導ブロック）
   ========================================================================== */

.c-midcta {
  text-align: center;
  margin-top: clamp(44px, 6vw, 72px);
}

.c-midcta__lead {
  font-family: var(--ff-serif);
  font-size: clamp(0.92rem, 1.5vw, 1.1rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--c-text-sub);
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
  padding-inline: 34px;
}

.c-midcta__lead::before,
.c-midcta__lead::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 22px;
  height: 1px;
  background: var(--c-gold-line);
}

.c-midcta__lead::before { left: 0; }
.c-midcta__lead::after  { right: 0; }

.c-midcta__lead + .c-btn {
  margin-inline: auto;
}

.c-midcta--dark .c-midcta__lead {
  color: var(--c-text-on-navy);
}

.c-midcta .c-midcta__lead {
  display: block;
  max-width: fit-content;
  margin-inline: auto;
  margin-bottom: 20px;
}

/* For users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .fade-up,
  .fade-in,
  .scale-in {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Print styles
   ========================================================================== */
@media print {
  .l-header,
  .l-sticky-cta,
  .l-page-top,
  .s-hero__media video {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }
}