/* =========================================================
   ディアーズ フロントページ アニメーション
   ========================================================= */

@media (prefers-reduced-motion: no-preference){
  /* ---- 導入タイトル：少し遅れてふわっと表示 ---- */
  .dears-intro-title{
    opacity: 0;
    transform: translateY(12px);
    animation: dears-intro-title-in 1.15s cubic-bezier(.22, 1, .36, 1) .55s forwards;
  }

  @keyframes dears-intro-title-in{
    to{
      opacity: 1;
      transform: none;
    }
  }

  /* ---- ホームケアプレゼント：タイトル ---- */
  .dgift-head .dgift-heading-sub,
  .dgift-head .dgift-heading-main{
    opacity: 0;
    transform: translateY(10px);
    animation: dears-intro-title-in .95s cubic-bezier(.22, 1, .36, 1) forwards;
  }

  .dgift-head .dgift-heading-sub{
    animation-delay: .35s;
  }

  .dgift-head .dgift-heading-main{
    animation-delay: .55s;
  }

  .dgift-ribbon{
    opacity: 0;
    animation: dears-intro-title-in .7s ease .15s forwards;
  }

  /* ---- スクロール表示 ---- */
  .dears-reveal{
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity .65s ease,
      transform .65s ease;
    transition-delay: var(--dears-reveal-delay, 0ms);
    will-change: opacity, transform;
  }

  .dears-reveal.is-visible{
    opacity: 1;
    transform: none;
  }

  /* ---- 施術事例：カードは短く速く ---- */
  .case-card.dears-reveal{
    transform: translateY(14px);
    transition:
      opacity .32s ease,
      transform .32s ease;
    transition-delay: var(--dears-reveal-delay, 0ms);
  }

  /* ---- ３つのこだわり：左から順に下から上へフェードイン ---- */
  .dears-kodawari-title.dears-reveal{
    transform: translateY(28px);
    transition:
      opacity 1s cubic-bezier(.22, 1, .36, 1),
      transform 1s cubic-bezier(.22, 1, .36, 1);
  }

  .dears-kodawari-col.dears-reveal{
    opacity: 0;
    transform: translateY(40px);
    transition:
      opacity 1.05s cubic-bezier(.22, 1, .36, 1),
      transform 1.05s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--dears-reveal-delay, 0ms);
  }

  .dears-kodawari-col.dears-reveal.is-visible{
    opacity: 1;
    transform: none;
  }

  /* ---- クイックナビ：ページ読み込み時 ---- */
  .quick-nav-item.dears-reveal-load{
    opacity: 0;
    transform: translateY(10px);
    animation: dears-nav-in .55s ease forwards;
    animation-delay: calc(var(--dears-reveal-delay, 0ms) + .15s);
  }

  @keyframes dears-nav-in{
    to{
      opacity: 1;
      transform: none;
    }
  }

  /* ---- メニュー：ゴールド枠のフェードイン ---- */
  .menu-section::before{
    opacity: 0;
    transition: opacity .9s ease .25s;
  }

  .menu-section.dears-frame-visible::before{
    opacity: 1;
  }

  /* ---- フローティング診断ボタン ---- */
  .floating-shindan{
    animation: dears-float 4s ease-in-out infinite;
  }

  @keyframes dears-float{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-7px); }
  }

  .floating-shindan:hover{
    animation: none;
  }

  /* ---- 画像ホバー ---- */
  .dears-kodawari-img img,
  .promise-img img,
  .dflow-photo img,
  .dears-value-icon img,
  .case-card img{
    transition: transform .45s ease;
  }

  .dears-kodawari-img:hover img,
  .promise-img:hover img,
  .dflow-photo:hover img,
  .dears-value-icon:hover img,
  .case-card:hover img{
    transform: scale(1.03);
  }

  /* ---- CTAボタン ---- */
  .dears-section-cta .color-button02-big a,
  .dears-closing .color-button02-big a{
    transition:
      opacity .22s ease,
      transform .22s ease,
      box-shadow .22s ease;
  }

  .dears-section-cta .color-button02-big a:hover,
  .dears-closing .color-button02-big a:hover,
  .dears-front .color-button02-big a:hover{
    transform: translateY(-2px);
    background: var(--dears-btn-gradient-hover);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.24),
      0 6px 18px rgba(122, 30, 61, 0.28);
  }

  /* ---- FAQアコーディオン ---- */
  .jin-ac-box02{
    transition: box-shadow .25s ease;
  }

  .jin-ac-box02.open{
    box-shadow: 0 6px 20px rgba(91,74,80,.08);
  }
}

@media (prefers-reduced-motion: reduce){
  .dears-reveal{
    opacity: 1;
    transform: none;
  }

  .dears-kodawari-col.dears-reveal{
    opacity: 1;
    transform: none;
  }

  .dears-intro-title{
    opacity: 1;
    transform: none;
    animation: none;
  }

  .dgift-ribbon,
  .dgift-head .dgift-heading-sub,
  .dgift-head .dgift-heading-main{
    opacity: 1;
    transform: none;
    animation: none;
  }
}