/* =====================================================
   Scroll Animation
   使用方法：
   <div data-animate="fade">
   <div data-animate="left">
===================================================== */

/* ------------------------------
   初期状態（非表示）
------------------------------ */
[data-animate] {
  opacity: 0;
  transform: translate(var(--x, 0), var(--y, 0));
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
  will-change: opacity, transform;
}

/* ------------------------------
   表示状態
------------------------------ */
[data-animate].is-show {
  opacity: 1;
  transform: translate(0, 0);
}

/* ------------------------------
   方向指定
------------------------------ */
[data-animate="fade"]   { --x: 0; --y: 0; }
[data-animate="left"]   { --x: -80px; }
[data-animate="right"]  { --x: 80px; }
[data-animate="up"]     { --y: -80px; }
[data-animate="bottom"] { --y: 80px; }

/* ------------------------------
   遅延
------------------------------ */
[data-animate] {
  transition-delay: var(--delay, 0s);
}

/* ------------------------------
   スマホでは少し軽く
------------------------------ */
@media (max-width: 768px) {
  [data-animate] {
    transition-duration: 0.6s;
  }
}

/* ------------------------------
   動きを減らしたいユーザー配慮
------------------------------ */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* 固定ページ・投稿ページでは親は表示（子要素自動アニメなし） */
.page [data-animate],
.single [data-animate] {
  opacity: 1;
  transform: none;
}


/* =====================================================
   セクションタイトル アニメーション
   文字が1文字ずつ上から落ちてくる + ラインが左から伸びる
===================================================== */

.section-title-wrap {
  display: inline-block;
}

.section-title__chars {
  display: flex;
  gap: 2px;
  overflow: hidden;
}

.section-title__char {
  display: inline-block;
  font-size: 4vw;
  font-weight: 700;
  color: #000;
  letter-spacing: 0.02em;
  transform: translateY(-60px);
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease;
}

.section-title__char:first-child {
  color: #94645B;
}

.section-title__line {
  display: block;
  height: 2px;
  background: #94645B;
  width: 0;
  margin-top: 8px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-title__sub {
  display: block;
  font-size: 13px;
  font-family: sans-serif;
  font-weight: 700;
  color: #94645B;
  letter-spacing: 0.1em;
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.section-title__char.is-show {
  transform: translateY(0);
  opacity: 1;
}
.section-title__line.is-show {
  width: 100%;
}
.section-title__sub.is-show {
  opacity: 1;
}

@media (max-width: 1024px) {
  .section-title__char {
    font-size: 2.5vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-title__char,
  .section-title__line,
  .section-title__sub {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100%;
  }
}


/* =====================================================
   NEWSリスト 1行ずつスライドイン
===================================================== */
.news--box li[data-animate] {
  opacity: 0;
  transform: translateX(80px);
  transition:
    opacity 1.0s ease,
    transform 1.0s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s;
}

.news--box li[data-animate].is-show {
  opacity: 1;
  transform: translateX(0);
}


/* =====================================================
   SHOPLISTの画像 角丸アニメーション
===================================================== */
.shoplist--box .item[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.shoplist--box .item[data-animate].is-show {
  opacity: 1;
  transform: translateY(0);
}

.shoplist--box .item[data-animate] img {
  border-radius: 0;
  transition: border-radius 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.shoplist--box .item[data-animate].is-show img {
  border-radius: 0 300px 0 0;
}

.shoplist--box .item[data-animate]:nth-child(2) {
  transition-delay: 0.25s;
}
.shoplist--box .item[data-animate]:nth-child(2) img {
  transition-delay: 0.55s;
}


/* =====================================================
   フッターバナー 左右からスライドイン
===================================================== */
.footer--banner .item {
  opacity: 0;
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer--banner .item:first-child {
  transform: translateX(-50px);
}

.footer--banner .item:last-child {
  transform: translateX(50px);
  transition-delay: 0.15s;
}

.footer--banner .item.is-show {
  opacity: 1;
  transform: translateX(0);
}

@media screen and (max-width: 1024px) {
  .footer--banner .item:first-child {
    transform: translateY(30px);
  }
  .footer--banner .item:last-child {
    transform: translateY(30px);
  }
  .footer--banner .item.is-show {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer--banner .item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}