@charset "UTF-8";

/* ================================================================
   Premium Animations — アニメーション専用スタイルシート
   ================================================================
   1. ローディング画面（プリローダー）
   2. ヒーローリビールアニメーション
   3. スプリットテキストアニメーション
   4. スクロールスタガー強化
   5. マイクロインタラクション
   ================================================================ */


/* ==========================================================
   1. ローディング画面（プリローダー）
   ========================================================== */

/* ロード中は body スクロール不可 */
body.is-loading {
  overflow: hidden;
}

/* ローダーオーバーレイ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--g950);
  transition: none;
}

/* ローダー完了 → カーテンアウト */
.preloader.done {
  animation: preloaderOut 1s cubic-bezier(.77, 0, .175, 1) forwards;
  pointer-events: none;
}

@keyframes preloaderOut {
  0% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 0 100% 0);
  }
}

/* ローダー名前テキスト */
.preloader__name {
  font-family: var(--fd);
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 300;
  letter-spacing: .35em;
  color: var(--white);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s ease, transform .8s ease;
  margin-bottom: 3rem;
}

.preloader__name.show {
  opacity: 1;
  transform: translateY(0);
}

/* ローダー下部ラッパー */
.preloader__bottom {
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  width: max(260px, 30vw);
}

/* カウンター */
.preloader__counter {
  font-family: var(--fd);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 300;
  color: var(--white);
  letter-spacing: .06em;
  line-height: 1;
  opacity: 0;
  transition: opacity .5s ease;
}

.preloader__counter.show {
  opacity: 1;
}

/* プログレスバー */
.preloader__bar-track {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, .12);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transition: opacity .5s ease;
}

.preloader__bar-track.show {
  opacity: 1;
}

.preloader__bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--ac);
  transition: width .08s linear;
}

/* ローディングテキスト */
.preloader__text {
  font-size: .6rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--g500);
  opacity: 0;
  transition: opacity .5s ease;
}

.preloader__text.show {
  opacity: 1;
}


/* ==========================================================
   2. ヒーローリビールアニメーション
   ========================================================== */

/* 初期状態：非表示 */
.hero-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.25, .46, .45, .94),
              transform .8s cubic-bezier(.25, .46, .45, .94);
}

/* 表示状態 */
.hero-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 各要素にスタガー遅延を設定（JSからも制御） */
.hero-reveal:nth-child(1) { transition-delay: 0s; }
.hero-reveal:nth-child(2) { transition-delay: .12s; }
.hero-reveal:nth-child(3) { transition-delay: .24s; }
.hero-reveal:nth-child(4) { transition-delay: .36s; }
.hero-reveal:nth-child(5) { transition-delay: .48s; }
.hero-reveal:nth-child(6) { transition-delay: .60s; }
.hero-reveal:nth-child(7) { transition-delay: .72s; }

/* スクロールインジケーターのリビール */
.hero-scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease .9s, transform .8s ease .9s;
}

.hero-scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================
   3. スプリットテキストアニメーション
   ========================================================== */

/* 分割された各文字 */
.split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s cubic-bezier(.25, .46, .45, .94),
              transform 1.2s cubic-bezier(.25, .46, .45, .94);
}

/* アクティブ化された文字 */
.split-char.active {
  opacity: 1;
  transform: translateY(0);
}

/* h2のスプリットテキスト準備中の初期スタイル */
h2.split-ready {
  opacity: 1 !important;
  transform: none !important;
}


/* ==========================================================
   4. スクロールスタガー強化
   ========================================================== */

/* 左からスライドイン */
.fade-in-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .7s ease, transform .7s ease;
}

.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* 右からスライドイン */
.fade-in-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .7s ease, transform .7s ease;
}

.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* スケールアップフェードイン */
.fade-in-scale {
  opacity: 0;
  transform: scale(.92);
  transition: opacity .7s ease, transform .7s ease;
}

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

/* スタガー遅延（CSSカスタムプロパティ経由） */
.stagger-child {
  transition-delay: calc(var(--stagger-index, 0) * .1s) !important;
}


/* ==========================================================
   5. マイクロインタラクション
   ========================================================== */

/* --- サービスカード画像ズーム --- */
.s-img {
  overflow: hidden;
}

.s-img .s-ph {
  transition: transform .6s cubic-bezier(.25, .46, .45, .94);
}

.s-item:hover .s-img .s-ph {
  transform: scale(1.05);
}

/* --- CTAボタン シマー（光沢）エフェクト --- */
.cta-btn {
  position: relative;
  overflow: hidden;
}

.cta-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .18),
    transparent
  );
  transition: none;
  pointer-events: none;
}

.cta-btn:hover::after {
  animation: shimmer .7s ease forwards;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 150%;
  }
}

/* --- Works カードのホバーアニメーション --- */
.w-card {
  transition: transform .4s cubic-bezier(.25, .46, .45, .94),
              box-shadow .4s cubic-bezier(.25, .46, .45, .94);
}

/* --- スキルバーアニメーション改善 --- */
.bar {
  transition: transform 1.2s cubic-bezier(.22, .61, .36, 1) !important;
}

/* --- トラストバーアイテム スタガー --- */
.trust-item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}

.trust-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Flowステップのライン接続アニメーション --- */
.f-step {
  position: relative;
}

.f-step .f-num {
  transition: color .3s ease, transform .3s ease;
}

.f-step:hover .f-num {
  color: var(--ac);
  transform: scale(1.08);
}

/* --- プランカードのホバーリフト強化 --- */
.m-plan {
  transition: transform .4s cubic-bezier(.25, .46, .45, .94),
              box-shadow .4s cubic-bezier(.25, .46, .45, .94);
}

.m-plan:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
}

/* --- FAQ アコーディオンのスムーズ展開 --- */
.faq-a {
  transition: max-height .5s cubic-bezier(.25, .46, .45, .94),
              opacity .4s ease,
              padding .4s ease;
}

/* --- セクションラベルのラインアニメーション --- */
.sec-label::before {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .6s cubic-bezier(.25, .46, .45, .94);
}

.sec-label.visible::before,
.fade-in.visible .sec-label::before,
.sec-label.fade-in.visible::before {
  transform: scaleX(1);
}

/* --- フォームインプットのフォーカスアニメーション --- */
.form-input,
.form-ta {
  transition: border-color .3s ease, box-shadow .3s ease;
}

.form-input:focus,
.form-ta:focus {
  box-shadow: 0 0 0 3px rgba(184, 169, 144, .12);
}

/* --- アピールカードのナンバーアニメーション --- */
.a-card .a-num {
  transition: transform .4s ease, color .4s ease;
}

.a-card:hover .a-num {
  transform: scale(1.12);
  color: var(--ac);
}


/* ==========================================================
   6. レスポンシブ調整
   ========================================================== */

@media (max-width: 600px) {
  .preloader__bottom {
    bottom: 3rem;
    width: 80%;
  }

  .preloader__counter {
    font-size: 2.5rem;
  }

  .preloader__name {
    font-size: 1rem;
  }
}