/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 31 2026 | 12:13:19 */
/* =========================================
   First View Animation
========================================= */
#body_wrap.home {
  overflow-x: hidden;
}

/* 初期状態 */
#body_wrap.home #main_visual .p-mainVisual__slide,
#body_wrap.home #header .l-header__logo,
#body_wrap.home #header .menu-item,
#body_wrap.home #main_visual .fv-content .logo-wrap,
#body_wrap.home #main_visual .fv-content .text-wrap {
  will-change: transform, opacity, filter;
}

/* ① メインビジュアル */
#body_wrap.home #main_visual .p-mainVisual__inner {
  opacity: 0;
  transform: scale(1.5);
  filter: blur(10px) brightness(0.82);
}

/* ② ヘッダーロゴ */
#body_wrap.home #header .l-header__logo {
  opacity: 0;
  transform: translateY(-28px);
  filter: blur(4px);
}

/* ③ メニュー */
#body_wrap.home #header .menu-item {
  opacity: 0;
  transform: translateX(22px);
  filter: blur(4px);
}

/* ④ FVロゴ */
#body_wrap.home #main_visual .fv-content .logo-wrap {
  opacity: 0;
  transform: translateY(36px);
  filter: blur(6px);
}

/* ⑤ FVテキスト */
#body_wrap.home #main_visual .fv-content .text-wrap {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
}

/* 発火後 */
#body_wrap.home.is-fv-animated #main_visual .p-mainVisual__inner { 
	animation: fvMainVisualReveal 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards; 
}

#body_wrap.home.is-fv-animated #header .l-header__logo {
  animation: fvDropIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

#body_wrap.home.is-fv-animated #header .menu-item:nth-child(1) {
  animation: fvSlideInRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}
#body_wrap.home.is-fv-animated #header .menu-item:nth-child(2) {
  animation: fvSlideInRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.63s forwards;
}
#body_wrap.home.is-fv-animated #header .menu-item:nth-child(3) {
  animation: fvSlideInRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.71s forwards;
}
#body_wrap.home.is-fv-animated #header .menu-item:nth-child(4) {
  animation: fvSlideInRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.79s forwards;
}
#body_wrap.home.is-fv-animated #header .menu-item:nth-child(5) {
  animation: fvSlideInRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.87s forwards;
}

#body_wrap.home.is-fv-animated #main_visual .fv-content .logo-wrap {
  animation: fvRiseStrong 1s cubic-bezier(0.22, 1, 0.36, 1) 0.95s forwards;
}

#body_wrap.home.is-fv-animated #main_visual .fv-content .text-wrap {
  animation: fvRiseSoft 1s cubic-bezier(0.22, 1, 0.36, 1) 1.15s forwards;
}

/* =========================================
   Keyframes
========================================= */

/* メインビジュアル：ズーム＋ピントが合う */
@keyframes fvMainVisualReveal {
  0% {
    opacity: 0;
    transform: scale(1.5);
    filter: blur(10px) brightness(0.82);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* ロゴ：少し落ちて止まる */
@keyframes fvDropIn {
  0% {
    opacity: 0;
    transform: translateY(-28px);
    filter: blur(4px);
  }
  70% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* メニュー：右から順番に */
@keyframes fvSlideInRight {
  0% {
    opacity: 0;
    transform: translateX(22px);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

/* FVロゴ：少し強めにせり上がる */
@keyframes fvRiseStrong {
  0% {
    opacity: 0;
    transform: translateY(36px);
    filter: blur(6px);
  }
  65% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* FVテキスト：上品に収まる */
@keyframes fvRiseSoft {
  0% {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}




@media (max-width: 959px) {

  /* =========================================
     SP First View Animation
  ========================================= */

  /* PC版で使っていた menu-item の動きはSPでは無効化しておく */
  #body_wrap.home #header .menu-item {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none !important;
  }

  /* SPで動かす要素 */
  #body_wrap.home #main_visual .p-mainVisual__slide,
  #body_wrap.home #header .c-iconBtn,
  #body_wrap.home #main_visual .fv-content .logo-wrap,
  #body_wrap.home #main_visual .fv-content .text-wrap {
    will-change: transform, opacity, filter;
  }

  /* ① メインビジュアル */
  #body_wrap.home #main_visual .p-mainVisual__inner {
    opacity: 0;
    transform: scale(1.5);
    filter: blur(8px) brightness(0.85);
  }

  /* ② ハンバーガーボタン */
  #body_wrap.home #header .c-iconBtn {
    opacity: 0;
    transform: translateY(-14px);
    filter: blur(4px);
  }

  /* ③ FVロゴ */
  #body_wrap.home #main_visual .fv-content .logo-wrap {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(6px);
  }

  /* ④ FVテキスト */
  #body_wrap.home #main_visual .fv-content .text-wrap {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(6px);
  }

  /* 発火後 */
  #body_wrap.home.is-fv-animated #main_visual .p-mainVisual__inner {
    animation: spFvMainReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  #body_wrap.home.is-fv-animated #header .c-iconBtn {
    animation: spFvIconPop 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
  }

  #body_wrap.home.is-fv-animated #main_visual .fv-content .logo-wrap {
    animation: spFvLogoRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
  }

  #body_wrap.home.is-fv-animated #main_visual .fv-content .text-wrap {
    animation: spFvTextRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.75s forwards;
  }

  /* =========================================
     Keyframes
  ========================================= */

  /* 背景：ややダイナミックにズーム解除 */
  @keyframes spFvMainReveal {
    0% {
      opacity: 0;
      transform: scale(1.5);
      filter: blur(8px) brightness(0.85);
    }
    100% {
      opacity: 1;
      transform: scale(1);
      filter: blur(0) brightness(1);
    }
  }

  /* ハンバーガー：軽く跳ねるように */
  @keyframes spFvIconPop {
    0% {
      opacity: 0;
      transform: translateY(-14px);
      filter: blur(4px);
    }
    70% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }

  /* ロゴ：下から少し強めに */
  @keyframes spFvLogoRise {
    0% {
      opacity: 0;
      transform: translateY(26px);
      filter: blur(6px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }

  /* テキスト：上品に */
  @keyframes spFvTextRise {
    0% {
      opacity: 0;
      transform: translateY(22px);
      filter: blur(6px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }
}