@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%);
}

/* =============================================
  ▼ 文字アニメ（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.3s 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;
}

/* =============================================
  ▼ マーカー・アンダーライン系アニメーション
  【共通】スクロールで .is-active が付与される

  ─ background方式（spanで複数行対応） ─────────
  .underline    中央→両端・太め（10px）
  .underline_l  左→右・細め（3px）※濃い背景色上での使用向け

  ─ 疑似要素方式（1行向き・装飾強め） ───────────
  .marker       左→右・斜めカット・0.5em
  .marker2      中央→両端・0.4em

  【使い方】
  <span class="underline">複数行にも対応したマーカー</span>
  <span class="marker">1行の強調マーカー</span>
============================================= */
/* =============================================
  ─ background方式 ─
============================================= */

/* ▼ underline：中央から両端へ・複数行対応 */
.underline {
  position: relative;
  display: inline;
  z-index: 0;
  background-image: linear-gradient(
    to right,
    rgba(225, 160, 172, 0.9) 0%,
    rgba(214, 152, 164, 0.9) 100%
  );
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 0% 10px;
  transition: background-size 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.underline.is-active {
  background-size: 100% 10px;
}

/* ▼ underline_l：左から右へ・白・細め・濃い背景色向け */
.underline_l {
  position: relative;
  display: inline;
  z-index: 0;
  background-image: linear-gradient(
    to right,
    rgba(225, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.9) 100%
  );
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 10px;
  transition: background-size 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.underline_l.is-active {
  background-size: 100% 3px;
}

/* =============================================
  ─ 疑似要素方式 ─
============================================= */
/* マーカー共通 */
.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;
  }
}