/* ==========================================================
   トップページ アニメーション（2026-10-19 追加）
   仕様：こころ整体院_アニメーション指示書（2026-10-16・PC版）
   スマホ版（.layout-mobile）にも同じ動きを付けている（10/19 追加）
   クラスは anim.js が付ける
   ========================================================== */

/* A 上下カクカク：0.8秒ごとに「下」⇔「少し上（高さの15%）」 */
.anim-hop { animation: anim-hop 1.6s steps(1) infinite; }

/* B ときどきピョン：約5秒に1回、少し跳ねて傾き、約0.45秒で戻る */
.anim-otter { transform-origin: 50% 100%; animation: anim-otter 4.9s steps(1) infinite; }

/* C 星の傾き：左右15度ずつ、0.8秒ごとに切り替え（横の線は静止） */
.anim-star { transform-origin: 69.7% 64.4%; animation: anim-star 1.6s steps(1) infinite; } /* 星の中心で傾ける */

/* D 見出しを1文字ずつ表示（画面に60%入ったら・1文字0.6秒・間隔0.09秒・1回だけ） */
.anim-js .anim-hd .anim-ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: calc(var(--i) * 0.09s);
}
.anim-js .anim-hd.is-in .anim-ch { opacity: 1; transform: none; }

/* E 横ループ（PC）：見本と同じ流れる速さに合わせた秒数（本番は1周の枚数が見本と違うため）
   声 約40px/秒・施術写真 約40px/秒・COCORO 約70px/秒・グループ会社 約40px/秒
   スマホは元の秒数のまま */
.layout-desktop .marquee-videos   { --marquee-duration: 32s; }
.layout-desktop .marquee-photos   { --marquee-duration: 76s; }
.layout-desktop .marquee-words    { --marquee-duration: 51s; }
.layout-desktop .marquee-holdings { --marquee-duration: 128s; }
.marquee-words { z-index: 2; pointer-events: none; } /* COCORO は人物の上に重ねる */

/* F 下からシュポッ（画面に40%入ったら・0.7秒・1回だけ） */
.anim-js .anim-pop { opacity: 0; transform: translateY(35%) scale(0.92); transform-origin: 50% 100%; }
.anim-js .anim-pop.is-in { animation: anim-pop 0.7s cubic-bezier(.2,.9,.3,1.4) forwards; animation-delay: var(--pop-delay, 0s); }

/* G 1人ずつ左右反転：1.2秒ごとに切り替え */
.anim-flip { animation: anim-flip 2.4s steps(1) infinite; }

/* 足した素材の置き場所（％は元の画像の箱に対する位置） */
.anim-stretch { position: absolute; display: block; height: auto; max-width: none; }
.anim-stretch-1 { left: 0.3906%;  top: 16.8945%; width: 45.3125%; }
.anim-stretch-2 { left: 26.5625%; top: 8.3008%;  width: 45.8984%; }
.anim-stretch-3 { left: 56.7708%; top: 22.1680%; width: 43.75%; }
.anim-senior-lines { position: absolute; left: 80.5%; top: 5.5%; width: 7.8%; height: auto; display: block; }
/* PC の WHO WE HELP は、上司のCSSが ::after で緑の3本線を出しているので、それを上下カクカク（A）させる */
.layout-desktop .audience-men::after { animation: anim-hop 1.6s steps(1) infinite; }

/* スマホ・タブレット（1199px以下）：セクションごとの「横にはみ出した部分を切る」指定をやめる。
   iPhone の Safari では、この指定のせいでセクションの上にはみ出した写真（料金・こんな方が来院 など）の
   上側が切れたり、表示が点滅したりするため。横のはみ出しは body の指定で切れている（この幅で右にはみ出す要素は無いことを確認済み） */
@media (max-width: 1199px) {
  .responsive-section:not(#hero) { overflow: visible; }
}

@keyframes anim-hop   { 0% { transform: translateY(0); } 50% { transform: translateY(-15%); } }
@keyframes anim-otter {
  0%    { transform: none; }
  90.8% { transform: translate(-2%, -4%) rotate(-2deg); }
  100%  { transform: translate(-2%, -4%) rotate(-2deg); }
}
@keyframes anim-star  { 0% { transform: rotate(-15deg); } 50% { transform: rotate(15deg); } }
@keyframes anim-pop {
  0%   { opacity: 0; transform: translateY(35%) scale(0.92); }
  40%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes anim-flip  { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }

@media (prefers-reduced-motion: reduce) {
  .anim-js .anim-hd .anim-ch { opacity: 1; transform: none; transition: none; }
  .anim-js .anim-pop { opacity: 1; transform: none; animation: none !important; }
  .anim-hop, .anim-otter, .anim-star, .anim-flip, .layout-desktop .audience-men::after { animation: none; }
}