/* 共通 */

/* フォント系 */
.font-bold {
  font-weight: bold !important;
}
.font-normal {
  font-weight: normal !important;
}
.font-x-light {
  font-weight: 100 !important;
}
.font-light {
  font-weight: 300 !important;
}
.text-sm {
  font-size: 0.875rem !important; /* 約14px */
}
.text-md {
  font-size: 1rem !important;     /* 16px */
}
.text-lg {
  font-size: 1.125rem !important; /* 18px */
}
.text-center {
  text-align: center !important;
}
.text-left {
  text-align: left !important;
}
.text-right {
  text-align: right !important;
}
/* 行間 */
.lh-tight {
  line-height: 1.2;
}

.lh-normal {
  line-height: 1.5;
}

.lh-relaxed {
  line-height: 1.75;
}

.lh-loose {
  line-height: 2;
}
.lh-16 {
  line-height: 16px;
}

.lh-20 {
  line-height: 20px;
}

.lh-24 {
  line-height: 24px;
}

.lh-28 {
  line-height: 28px;
}

.lh-32 {
  line-height: 32px;
}



/* 余白系（マージン・パディング） */
.mt-0    { margin-top: 0 !important; }
.mt-1    { margin-top: 0.25rem !important; }
.mt-2    { margin-top: 0.5rem !important; }
.mt-4    { margin-top: 1rem !important; }
.mt-8    { margin-top: 2rem !important; }

.mb-50   {margin-bottom: 50px!important;}

.mb-0    { margin-bottom: 0 !important; }
.mb-2    { margin-bottom: 0.5rem !important; }
.mb-4    { margin-bottom: 1rem !important; }

.pt-0    { padding-top: 0 !important; }
.pt-2    { padding-top: 0.5rem !important; }
.pt-4    { padding-top: 1rem !important; }
.pt-8    { padding-top: 2rem !important; }

.pr-0    { padding-right: 0 !important; }
.pr-2    { padding-right: 0.5rem !important; }
.pr-4    { padding-right: 1rem !important; }

.pb-0    { padding-bottom: 0 !important; }
.pb-2    { padding-bottom: 0.5rem !important; }
.pb-4    { padding-bottom: 1rem !important; }

.mr-auto{margin: 0 auto;}

/* 表示制御・レイアウト */
.d-block     { display: block !important; }
.d-inline    { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex      { display: flex !important; }
.d-none      { display: none !important; }

.flex-col    { flex-direction: column !important; }
.flex-row    { flex-direction: row !important; }
.items-center { align-items: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-center  { justify-content: center !important; }

/* 幅・高さ系 */
.w-full     { width: 100% !important; }
.w-auto     { width: auto !important; }
.max-w-sm   { max-width: 640px !important; }
.h-auto     { height: auto !important; }
.h-full     { height: 100% !important; }


/* fade系アニメーション */
.fade-in {
  opacity: 0;
  transform: translateY(40px); /* ← 距離を大きくしてふわっと感 */
  transition: opacity 1.2s ease, transform 1.2s ease;
}

/* スマホ（初期は下から） */
.fade-in {
  transform: translateY(20px);
}

/* PC用左右スライドも距離を大きめに */
@media screen and (min-width: 769px) {
  .fade-in-left {
    transform: translateX(-60px);
  }
  .fade-in-right {
    transform: translateX(60px);
  }
}

/* 表示されたらリセット */
.fade-in.is-visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}



.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* フェードアップ共通 */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* 遅延させたい要素に使うクラス（例：item本体） */
.fade-delay {
  transition-delay: 0.3s; /* 任意で調整可 */
}

.fade-li {
  opacity: 0;
  transform: translateX(-40px);
  transition: none; /* ← GSAPと競合させない */
}

.parallax-element {
    will-change: transform;
    transform: translateY(var(--parallax-offset, 0px));
    transition: transform 0.1s linear;
}

/* 横スクロールループ */
/* .scrolling-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  display: flex;
  width: max-content;
  animation: scrollLoop 60s linear infinite;
  z-index: -1;
  animation-play-state: paused;
}

.scrolling-bg img {
  height: 100vh;
  width: auto;
  display: block;
}
@keyframes scrollLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
} */