@charset "UTF-8";

/*
==============================================
  アニメーション共通テンプレ

  【使い方】
  スクロールで出現させたい要素に、クラスを組み合わせるだけ。
  JSが自動で .in を付与してアニメーションが発火します。

  ■ 出現方向（1つだけ選ぶ）
    .fade   → フェードのみ（動きなし）
    .up     → 下から上へ
    .dn     → 上から下へ
    .lt     → 左からスライド
    .rt     → 右からスライド
    .zm     → ズームイン
    .bl     → ぼかしながらフェード

  ■ ディレイ（任意で追加）
    .d1〜.d8 → 0.1s〜0.8s 遅らせる

  ■ スピード（任意で追加）
    .fast   → 速く（0.4s）
    .slow   → ゆっくり（1s）

  【例】
  <div class="up d2 slow">テキスト</div>
  → 少し遅れて、ゆっくり下から上へ出現

==============================================
*/


/* =============================================
  ▼ 出現アニメーション（共通）
  ※ .fade .up .dn .lt .rt .bl に共通で適用
============================================= */

.fade, .up, .dn, .lt, .rt, .bl {
  opacity: 0;
  transition:
    opacity    0.6s ease,
    transform  0.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter     0.6s ease;
}

/* ▼ 初期位置（出現前の状態） */
.fade { transform: none; }
.up   { transform: translateY(30px); }
.dn   { transform: translateY(-30px); }
.lt   { transform: translateX(-60px); }
.rt   { transform: translateX(60px); }
.bl   { transform: translateY(15px); filter: blur(8px); }

/* ▼ 出現後（JSが .in を付与したとき） */
.fade.in, .up.in, .dn.in, .lt.in, .rt.in, .bl.in {
  opacity: 1;
  transform: none;
  filter: none;
}




/* =============================================
  ▼ ディレイ
============================================= */
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; }
.d4 { transition-delay: 0.4s; }
.d5 { transition-delay: 0.5s; }
.d6 { transition-delay: 0.6s; }
.d7 { transition-delay: 0.7s; }
.d8 { transition-delay: 0.8s; }


/* =============================================
  ▼ スピード
============================================= */
.fast { transition-duration: 0.4s; }
.slow { transition-duration: 1s; }


/* =============================================
  ▼ 画像マスク（白い幕が横にスライドして画像が現れる）

  【使い方】
  <div class="img-mask">
    <img src="...">
  </div>
============================================= */
.img-mask {
  overflow: hidden;
  position: relative;
}

.img-mask::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 1;
  transform: translateX(0);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.img-mask.in::before {
  transform: translateX(100%);
}


/* =============================================
  ▼ マーカー（テキストにハイライト）

  【使い方・種類】
  .marker    → 左から右に伸びる（オレンジ）
  .marker2   → 中央から両端に伸びる（ピンク）

  <span class="marker">テキスト</span>
============================================= */

/* マーカー共通 */
.marker,
.marker2 {
  display: inline;
  position: relative;
  z-index: 0;
}

/* ▼ marker：左から右に伸びる・斜めカット・オレンジグラデーション */
.marker::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 0.5em;
  background: linear-gradient(to right, #ffc204, #ffab04 20%, #fe6804);
  clip-path: polygon(4% 0%, 100% 0%, 97% 100%, 0% 100%);
  z-index: -1;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.marker.is-active::after {
  opacity: 0.6;
  transform: scaleX(1);
}

/* ▼ marker2：中央から両端に伸びる */
.marker2::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  right: 50%;
  height: 0.4em;
  background: #e1a0ac;
  z-index: -1;
  opacity: 0.6;
  transition: left 0.5s ease, right 0.5s ease;
}

.marker2.is-active::after {
  left: 0;
  right: 0;
}

@media (max-width: 900px) {
  .marker::after,
  .marker2::after {
    height: 0.35em;
  }
}


/* =============================================
  ▼ 文字アニメ（1文字ずつ流れるように出現）

  【使い方】
  <h2 class="text-anime">
    <span style="animation-delay:0s">テ</span>
    <span style="animation-delay:0.1s">キ</span>
    <span style="animation-delay:0.2s">ス</span>
    <span style="animation-delay:0.3s">ト</span>
  </h2>
============================================= */
.text-anime span {
  display: inline-block; /* transform を効かせるために必要 */
  opacity: 0;
  transform: translateY(10px);
}

.text-anime.in span {
  animation: textAnime 0.6s forwards ease-out;
}

@keyframes textAnime {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =============================================
  ▼ 左へ無限スクロール（画像が流れ続ける）

  【使い方】
  <div class="scroll-wrap">
    <ul class="scroll-list">
      <li class="scroll-item"><img src="..."></li>
      ...（JSが自動で複製してループさせます）
    </ul>
  </div>
============================================= */
.scroll-wrap {
  display: flex;
  overflow: hidden;
}

.scroll-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  animation: scrollLoop 25s linear infinite;
}

.scroll-item {
  width: calc(100vw / 6);
  flex-shrink: 0;
}

.scroll-item > img {
  width: 100%;
  display: block;
}

/* .scroll-wrap:hover .scroll-list {
  animation-play-state: paused;
} */

@keyframes scrollLoop {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* 複製分を含めた50%移動 */
}


/* =============================================
  ▼ 順番アニメ（子要素が時間差で出現）

  【使い方】
  <div class="group">
    <div class="child">①</div>
    <div class="child">②</div>
    <div class="child">③</div>
  </div>

  ※ ディレイはJSが自動で付与します
============================================= */
.group .child {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.group .child.in {
  opacity: 1;
  transform: none;
}