@charset "utf-8";

/* アニメーション用 */

/* ヒーロー */
/* GSAP制御前のチラ見え防止 */
.site-logo,
.hero-btn--pc,
.hero-btn--sp{
  opacity: 0;
  visibility: hidden;
}


/* ホバー用 */

/* 予約ボタン */
.reserve-btn{
  transition: filter .25s ease;
  will-change: transform;
}
.reserve-btn:hover,
.reserve-btn:focus-visible{
  filter: brightness(1.08);
  outline: none;
}






/* 以下、追従アイコンのアニメーション用 */

/* 共通 */
.features-section,
.video-section,
.service-section,
.creator-section,
.plan-section{
  position: relative;
}

.fi{
  position: absolute;
  top: var(--fi-top, 90px);
  left: var(--fi-x, 0px);
  opacity: 0;
  transform: scale(.98);
  pointer-events: none;
  z-index: 20;
}

/* PC/SP 出し分け */
.fi--pc{ display:block; }
.fi--sp{ display:none; }

@media (max-width: 1400px){
  .fi--pc{ display:none; }
  .fi--sp{ display:block; }
}

/* 画像サイズ（SPは少し小さめ） */
.fi img{
  display:block;
  width: clamp(180px, 30vw, 250px);
}

@media (max-width: 1400px){
  .fi{
    left: auto;   /* ← これで var(--fi-x, 0px) を無効化 */
  }
  .fi img{
    width: clamp(140px, 33vw, 200px);
  }
}
@media (max-width: 900px){
  .fi img{
    width: clamp(110px, 36vw, 160px);
  }
}

/* 横スクロール完全防止（保険） */
html, body{
  overflow-x: hidden;
}


/* SP～1400pxまでの表示位置はこちらで設定 */
/* -- PCはGSAP側で制御 */
@media (max-width: 1400px){
  .fi--l1-sp{
    bottom: 0;
    top: auto;
    right: 80px;
    left: auto;
  }
  .fi--r1-sp{
    top: 800px;
    left: 80px;
    right: auto;
  }
  .fi--l2-sp{
    top: 150px;
    bottom: auto;
    left: auto;
    right: 0;
  }
  .fi--r2-sp{
    top: 500px;
    right: auto;
    left: 0;
  }
}
@media (max-width: 1200px){
  .fi--l1-sp{
    top: auto;
    bottom: 100px;
    right: 0;
    left: auto;
  }
  .fi--r1-sp{
    top: 210px;
    bottom: auto;
    left: 0;
  }
  .fi--l2-sp{
    top: auto;
    bottom: 200px;
    right: 100px;
  }
  .fi--r2-sp{
    top: 550px;
    bottom: auto;
    right: auto;
    left: 0;
  }
}
@media (max-width: 980px){
  .fi--l1-sp{
    top: auto;
    bottom: 0;
    right: 0;
    left: auto;
  }
  .fi--r1-sp{
    top: 220px;
    bottom: auto;
    left: 0;
  }
  .fi--l2-sp{
    top: auto;
    bottom: -60px;
    left: 0;
  }
  .fi--r2-sp{
    top: 180px;
    right: 0;
    left: auto;
  }
}
@media (max-width: 450px){
  .fi--l1-sp{
    top: auto;
    bottom: 220px;
    right: 0;
    left: auto;
  }
  .fi--r1-sp{
    top: auto;
    bottom: -60px;
    left: 0;
  }
  .fi--l2-sp{
    top: -150px;
    bottom: auto;
    left: -20px;
  }
  .fi--r2-sp{
    top: 160px;
    bottom: auto;
    left: auto;
    right: -20px;
  }
}

.fi--pc{
  left: var(--fi-x, 0px);
  transform: translateX(var(--fi-shove, 0px)) scale(.98);
}