@charset "UTF-8";

@charset "UTF-8";

/* === ベース === */
[data-anim-group],
[data-anim-target] {
  opacity: 0;
  transform: none;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.9, 0.3, 1), filter 0.8s ease;
  will-change: opacity, transform, filter;
}

/* === 疑似要素の初期状態 === */
[data-anim-group]::before,
[data-anim-group]::after,
[data-anim-target]::before,
[data-anim-target]::after {
  opacity: 0;
  transform: none;
  filter: none;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.9, 0.3, 1), filter 0.8s ease;
  transition-delay: 0s;
  will-change: opacity, transform, filter;
}

/* 個別に遅延を付与できるよう分離 */
[data-anim-group]::before,
[data-anim-target]::before {
  transition-delay: var(--anim-before-delay, 0s);
}
[data-anim-group]::after,
[data-anim-target]::after {
  transition-delay: var(--anim-after-delay, 0s);
}

/* === 発火共通 === */
.is-anim-active[data-anim-group],
.is-anim-active[data-anim-target] {
  opacity: 1;
}

/* === 疑似要素発火 === */
.is-anim-active.has-anim-before::before,
.is-anim-active.has-anim-after::after {
  opacity: 1;
}

/* 動かしたくない要素に付与 */
[data-anim-target].no-anim {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* === パターン群 === */

/* Fade in on the spot（その場でフェード登場） */
[data-anim-type="fade-in-spot"] {
  opacity: 0;
  transform: none; /* 移動なし */
  transition: opacity 0.7s ease;
}

.is-anim-fade-in-spot {
  opacity: 1 !important;
}

/* fade-up */
[data-anim-type="fade-up"] {
  transform: translateY(20px);
}
.is-fade-up {
  transform: translateY(0) !important;
}

/* fade-left */
[data-anim-type="fade-left"] {
  transform: translateX(80px);
  opacity: 0;
}
.is-fade-left {
  transform: translateX(0) !important;
  opacity: 1 !important;
}

/* fade-right */
[data-anim-type="fade-right"] {
  transform: translateX(-80px);
  opacity: 0;
}
.is-fade-right {
  transform: translateX(0) !important;
  opacity: 1 !important;
}

/* zoom-in */
[data-anim-type="zoom-in"] {
  transform: scale(0.8);
}
.is-zoom-in {
  transform: scale(1) !important;
}

/* blur-in */
[data-anim-type="blur-in"] {
  filter: blur(6px);
}
.is-blur-in {
  filter: blur(0) !important;
}

/* slide-up（フェードなしで動きのみ） */
[data-anim-type="slide-up"] {
  transform: translateY(30px);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.22, 0.9, 0.3, 1), opacity 0.8s ease;
}
.is-slide-up {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

/* slide-down（フェードなしで動きのみ） */
[data-anim-type="slide-down"] {
  transform: translateY(-30px);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.22, 0.9, 0.3, 1), opacity 0.8s ease;
}

.is-slide-down {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

/* --- 下線ラインアニメーション --- */
[data-anim-type^="straight-line-"] {
  position: relative;
  display: inline-block;
  opacity: 1; /* テキスト自体は非アニメ対象 */
}

/* --- 共通の下線 --- */
[data-anim-type^="straight-line-"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: var(--underline-height, 3px);
  width: 0%;
  background-color: #ffe664;
  transition: width 0.8s ease-out 0.1s;
}

/* --- アニメーション開始時（左→右へライン展開） --- */
.is-anim-straight-line-yellow::after {
  width: 100%;
  opacity: 1 !important;
}

/* PC時下線なし */
@media screen and (min-width: 769px) {
  .cv-bnr-title-child:first-child.is-anim-straight-line-yellow::after {
    width: 0;
  }
}

/* --- 背景ラインマーカーアニメーション --- */
[data-anim-type="bg-line-marker"] {
  position: relative;
  display: inline-block;
  opacity: 0;
}

/* --- 共通の下線 --- */
[data-anim-type="bg-line-marker"]::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: var(--underline-height, 3px);
  width: 0%;
  background-color: #ffe664;
  transition: width 0.8s ease-out 0.1s;
}

/* --- アニメーション開始時（左→右へライン展開） --- */
.is-anim-bg-line-marker::after {
  width: 100%;
  opacity: 1 !important;
}

/* === 疑似要素パターン群 === */

/* fade-up */
[data-anim-type="fade-up"]::before,
[data-anim-type="fade-up"]::after {
  transform: translateY(20px);
}
.is-fade-up.has-anim-before::before,
.is-fade-up.has-anim-after::after {
  transform: translateY(0) !important;
}

/* fade-left */
[data-anim-type="fade-left"]::before,
[data-anim-type="fade-left"]::after {
  transform: translateX(20px);
}
.is-fade-left.has-anim-before::before,
.is-fade-left.has-anim-after::after {
  transform: translateX(0) !important;
}

/* fade-right */
[data-anim-type="fade-right"]::before,
[data-anim-type="fade-right"]::after {
  transform: translateX(-20px);
}
.is-fade-right.has-anim-before::before,
.is-fade-right.has-anim-after::after {
  transform: translateX(0) !important;
}

/* zoom-in */
[data-anim-type="zoom-in"]::before,
[data-anim-type="zoom-in"]::after {
  transform: scale(0.8);
}
.is-zoom-in.has-anim-before::before,
.is-zoom-in.has-anim-after::after {
  transform: scale(1) !important;
}

/* blur-in */
[data-anim-type="blur-in"]::before,
[data-anim-type="blur-in"]::after {
  filter: blur(6px);
}
.is-blur-in.has-anim-before::before,
.is-blur-in.has-anim-after::after {
  filter: blur(0) !important;
}

/* slide-up */
[data-anim-type="slide-up"]::before,
[data-anim-type="slide-up"]::after {
  transform: translateY(30px);
}
.is-slide-up.has-anim-before::before,
.is-slide-up.has-anim-after::after {
  transform: translateY(0) !important;
}

/* サイト固有の特殊な演出は以下に追記 */
/* shape-expand 初期状態 */
[data-anim-type="shape-expand"]::before {
  transform: translateY(50%) scaleY(0.8);
  transition: transform 0.8s cubic-bezier(0.22, 0.9, 0.3, 1);
}

/* 発火時（共通クラス付与済） */
.is-shape-expand::before {
  transform: translateY(0) scaleY(1) !important;
}