@charset "UTF-8";
/* ========================================
  Animations (data-anim unified)
  - CSSのみでアニメーションを追加する方法:
      1) [data-anim="your-type"] と .is-inview の状態用のCSSを追加
      2) HTMLで使用: <div data-anim="your-type">...</div>
  - 要素ごとに値を上書きする方法:
      - data-anim-delay="0.2"      -> --anim-delay: 0.2s
      - data-anim-duration="0.8"   -> --anim-duration: 0.8s
      - data-anim-ease="ease-out"  -> --anim-ease: ease-out
      - data-anim-translate-y-start="60px" -> --anim-translate-y-start: 60px
      (data-anim-xxx は JS によって --anim-xxx にマッピングされます)
======================================== */

/* ========================================
  CSS Variables (デフォルト値)
======================================== */
:root {
  /* timing (共通) */
  --anim-delay: 0s;
  --anim-ease: ease-out;

  /* fade-up (デフォルト) */
  --anim-translate-y-start: 60px;
  --anim-translate-y-end: 0px;

  /* text */
  --anim-text-blur-start: 10px;
  --anim-text-blur-end: 0px;
  --anim-text-translate-y-start: 60px;
  --anim-text-translate-y-end: 0px;
  --anim-text-duration: 0.4s;
  --anim-text-filter-duration: 1s;

  /* illust */
  --anim-illust-rotate-start: -12deg;
  --anim-illust-rotate-end: 0deg;
  --anim-illust-translate-y-start: 60px;
  --anim-illust-translate-y-middle: -8px;
  --anim-illust-translate-y-bounce: 4px;
  --anim-illust-translate-y-end: 0px;

  /* photo */
  --anim-photo-scale-start: 0.7;
  --anim-photo-scale-end: 1;

  /* photo-2 */
  --anim-photo-2-radius: 1.25rem;
  --anim-photo-2-inner-scale-start: 1.25;
  --anim-photo-2-inner-scale-end: 1;

  /* label */
  --anim-label-translate-y-start: 32px;
  --anim-label-translate-y-end: 0px;

  /* card (既存、保持) */
  --anim-card-duration: 0.4s;
  --anim-card-ease: ease-out;
  --anim-card-label-scale-start: 0.8;
  --anim-card-label-scale-end: 1;
  --anim-card-image-inner-scale-start: 1.25;
  --anim-card-image-inner-scale-end: 1;
}

/* ========================================
  アニメーション要素の共通ベース
======================================== */
[data-anim] {
  /* タイプごとのデフォルト値 (type selector や data-anim-duration で上書き可能) */
  --anim-duration: 0.4s;
  --anim-filter-duration: 1.2s;
  --anim-filter-ease: var(--anim-ease);

  will-change: transform, opacity, filter;
}

/* ---------------------------------
  Fade-up (data-anim="fade-up")
  - 空の値もサポート: <div data-anim>
--------------------------------- */
[data-anim="fade-up"],
[data-anim=""],
[data-anim-after=""]::after,
[data-anim-after="fade-up"]::after {
  --anim-duration: 0.4s;

  opacity: 0;
  transform: translate3d(0, var(--anim-translate-y-start), 0);
  transition: opacity var(--anim-duration) var(--anim-ease),
    transform var(--anim-duration) var(--anim-ease);
  transition-delay: var(--anim-delay);
}

[data-anim="fade-up"].is-inview,
[data-anim=""].is-inview,
[data-anim-after="fade-up"].is-inview::after,
[data-anim-after=""].is-inview::after {
  opacity: 1;
  transform: translate3d(0, var(--anim-translate-y-end), 0);
}

/* ---------------------------------
  Text blur-up (data-anim="text")
--------------------------------- */
[data-anim="text"],
[data-anim-after="text"]::after {
  --anim-duration: var(--anim-text-duration);
  --anim-filter-duration: var(--anim-text-filter-duration);

  opacity: 0;
  filter: blur(var(--anim-text-blur-start));
  transform: translate3d(0, var(--anim-text-translate-y-start), 0);

  transition: opacity var(--anim-duration) var(--anim-ease),
    transform var(--anim-duration) var(--anim-ease),
    filter var(--anim-filter-duration) var(--anim-filter-ease);
  transition-delay: var(--anim-delay);
}

[data-anim="text"].is-inview,
[data-anim-after="text"].is-inview::after {
  opacity: 1;
  filter: blur(var(--anim-text-blur-end));
  transform: translate3d(0, var(--anim-text-translate-y-end), 0);
}

/* ---------------------------------
  Illust bounce-in (data-anim="illust")
--------------------------------- */
[data-anim="illust"],
[data-anim-after="illust"]::after {
  --anim-duration: 0.7s;

  opacity: 0;
  transform: translateY(var(--anim-illust-translate-y-start))
    rotate(var(--anim-illust-rotate-start));
}

[data-anim="illust"].is-inview,
[data-anim-after="illust"].is-inview::after {
  opacity: 1;
  animation: illust-in var(--anim-duration) var(--anim-ease) both;
  animation-delay: var(--anim-delay);
}

@keyframes illust-in {
  0% {
    opacity: 0;
    transform: translateY(var(--anim-illust-translate-y-start))
      rotate(var(--anim-illust-rotate-start));
  }
  70% {
    opacity: 1;
    transform: translateY(var(--anim-illust-translate-y-middle))
      rotate(var(--anim-illust-rotate-end));
  }
  85% {
    opacity: 1;
    transform: translateY(var(--anim-illust-translate-y-bounce))
      rotate(var(--anim-illust-rotate-end));
  }
  100% {
    opacity: 1;
    transform: translateY(var(--anim-illust-translate-y-end))
      rotate(var(--anim-illust-rotate-end));
  }
}

/* ---------------------------------
  Photo scale-in (data-anim="photo")
--------------------------------- */
[data-anim="photo"],
[data-anim-after="photo"]::after {
  --anim-duration: 0.8s;

  opacity: 0;
  transform: scale(var(--anim-photo-scale-start));

  transition: opacity var(--anim-duration) var(--anim-ease),
    transform var(--anim-duration) var(--anim-ease);
  transition-delay: var(--anim-delay);
}

[data-anim="photo"].is-inview,
[data-anim-after="photo"].is-inview::after {
  opacity: 1;
  transform: scale(var(--anim-photo-scale-end));
}

/* ---------------------------------
  Photo-2 (frame fade-in + inner zoom-out)
  - container: data-anim="photo-2"
  - inner: 最初の直接の <img> 子要素
--------------------------------- */
[data-anim="photo-2"],
[data-anim-after="photo-2"]::after {
  --anim-duration: 0.4s;

  opacity: 0;
  overflow: hidden;
  border-radius: var(--anim-photo-2-radius);

  transition: opacity var(--anim-duration) var(--anim-ease);
  transition-delay: var(--anim-delay);
}

[data-anim="photo-2"].is-inview,
[data-anim-after="photo-2"].is-inview::after {
  opacity: 1;
}

[data-anim="photo-2"] > img {
  display: block;
  width: 100%;
  height: auto;

  transform: scale(var(--anim-photo-2-inner-scale-start));
  transform-origin: center;

  transition: transform var(--anim-duration) var(--anim-ease);
  transition-delay: var(--anim-delay);

  will-change: transform;
}

[data-anim="photo-2"].is-inview > img {
  transform: scale(var(--anim-photo-2-inner-scale-end));
}

/* ---------------------------------
  Label (data-anim="label")
--------------------------------- */
[data-anim="label"],
[data-anim-after="label"]::after {
  --anim-duration: 0.4s;

  opacity: 0;
  transform: translateY(var(--anim-label-translate-y-start));

  transition: opacity var(--anim-duration) var(--anim-ease),
    transform var(--anim-duration) var(--anim-ease);
  transition-delay: var(--anim-delay);
}

[data-anim="label"].is-inview,
[data-anim-after="label"].is-inview::after {
  opacity: 1;
  transform: translateY(var(--anim-label-translate-y-end));
}

/* ------------------------------ */
/*     Card Animations             */
/* ------------------------------ */

/* カードの共通設定 */
[data-anim-card-label],
[data-anim-card-image],
[data-anim-card-btn] {
  opacity: 0;
  transition: opacity var(--anim-card-duration) var(--anim-card-ease),
    transform var(--anim-card-duration) var(--anim-card-ease);
  transition-delay: var(--anim-card-delay);
}

/* ラベルのアニメーション（初期位置）*/
[data-anim-card-label] {
  transform: scale(var(--anim-card-label-scale-start, 0.8));
}

/* カードのラベルのアニメーション（発火時） */
[data-anim-card-label].is-inview {
  opacity: 1;
  transform: scale(var(--anim-card-label-scale-end, 1));
}

/* 画像のアニメーション（初期位置）*/
[data-anim-card-image] {
  overflow: hidden;
}

/* カードの画像の中身のアニメーション（初期位置） */
[data-anim-card-image-inner] {
  display: block;
  transform: scale(var(--anim-card-image-inner-scale-start));
  transform-origin: center;

  transition: transform var(--anim-card-duration) var(--anim-card-ease);
  transition-delay: var(--anim-card-delay);
}

/* カードの画像の中身のアニメーション（発火時） */
[data-anim-card-image].is-inview [data-anim-card-image-inner] {
  transform: scale(var(--anim-card-image-inner-scale-end));
}

/* ボタンのアニメーション（初期位置）*/
[data-anim-card-btn] {
  transform: translateY(20px);
}

/* カードのボタンのアニメーション（発火時） */
[data-anim-card-btn].is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* 画像のアニメーション（発火時） */
[data-anim-card-image].is-inview {
  opacity: 1;
}

/* ---------------------------------
  Reduced motion
--------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* 全般 */
  [data-anim] {
    transition: none !important;
    animation: none !important;

    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  /* photo-2 inner */
  [data-anim="photo-2"] > img {
    transform: none !important;
  }

  /* data-anim-after の ::after 要素 */
  [data-anim-after]::after {
    transition: none !important;
    animation: none !important;

    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  /* Card (既存) */
  [data-anim-card],
  [data-anim-card-label],
  [data-anim-card-image],
  [data-anim-card-btn],
  [data-anim-card-image-inner] {
    transition: none !important;
    animation: none !important;

    opacity: 1 !important;
    transform: none !important;
  }
}

/* ========================================
  サイト固有のアニメーション設定
  ======================================== */

/* first-view-text-box 専用のアニメーション設定 */
/* アニメーション中も translateY(-50%) を維持 */
.first-view-text-box[data-anim="text"] {
  transform: translate3d(0, var(--anim-text-translate-y-start), 0)
    translateY(-50%);
}

.first-view-text-box[data-anim="text"].is-inview {
  transform: translate3d(0, var(--anim-text-translate-y-end), 0)
    translateY(-50%);
}

/* メディアクエリ内でも適用（768px以上でtranslateY(-50%)が有効な場合） */
@media print, screen and (min-width: 768px) {
  .first-view-text-box[data-anim="text"] {
    transform: translate3d(0, var(--anim-text-translate-y-start), 0)
      translateY(-50%);
  }

  .first-view-text-box[data-anim="text"].is-inview {
    transform: translate3d(0, var(--anim-text-translate-y-end), 0)
      translateY(-50%);
  }
}