/* コラム一覧の動き（2026リニューアル・10/10谷依頼「FVのカードみたいに、うるさすぎない動き」）
   方針
   - TOP FVのカードと同じ語彙（ふわっと配られる・少し傾いて着地する・止まった後はほぼ静か）にそろえる
   - 動くのは最初の1回と、ホバーしたときだけ。常に動くのは背景の英字（80秒で一周）と人物のわずかな上下（6秒・3px）
   - transform・opacity・clip-path だけを動かす。位置の指定（top・left・margin）には触らない
   - 初期状態は JS が html に .js-cm を付けたときだけ隠す（JSが動かない環境では普通に表示）
   - 「動きを減らす」設定では一切動かさない */

:root { --cm-ease: cubic-bezier(.16, 1, .3, 1); }

/* ---------- PICK UP帯：入場 ---------- */
.js-cm .p-column-pickup__carousel,
.js-cm .p-column-pickup__illust,
.js-cm .p-column-pickup__tagline-pill {
  transition: translate .56s var(--cm-ease), rotate .56s var(--cm-ease), opacity .56s var(--cm-ease), clip-path .6s var(--cm-ease);
}
/* カードはFVと同じく、少し下・少し左に傾いた所から配られて着地する */
.js-cm .p-column-pickup:not(.is-cm-in) .p-column-pickup__carousel { translate: 0 1.5rem; rotate: -2deg; opacity: 0; }
.js-cm .p-column-pickup__carousel { transition-delay: .15s; }
/* 人物は下からひょこっと出る（カードより少し後） */
.js-cm .p-column-pickup:not(.is-cm-in) .p-column-pickup__illust { translate: 0 1rem; opacity: 0; }
.js-cm .p-column-pickup__illust.--left { transition-delay: .35s; }
.js-cm .p-column-pickup__illust.--right { transition-delay: .45s; }
/* メディア名の帯は左から右へ現れる */
.js-cm .p-column-pickup:not(.is-cm-in) .p-column-pickup__tagline-pill { clip-path: inset(0 100% 0 0 round .5rem); }
.js-cm .p-column-pickup__tagline-pill { clip-path: inset(0 0 0 0 round .5rem); transition-delay: .6s; }

/* ---------- PICK UP帯：止まった後 ---------- */
/* 背景の英字はごくゆっくり流れる（80秒で1組分。読ませる文字ではないので気にならない速さ）。動かすのは js/column-motion.js */
.js-cm .p-column-pickup__watermark { width: max-content; }
/* 人物は呼吸する程度に上下する（左右で周期をずらす） */
@keyframes cm-float { 50% { translate: 0 -0.1875rem; } }
.js-cm .p-column-pickup.is-cm-idle .p-column-pickup__illust { transition: none; animation: cm-float 6s ease-in-out infinite; }
.js-cm .p-column-pickup.is-cm-idle .p-column-pickup__illust.--right { animation-delay: -3s; }

/* カードにホバー：少し持ち上がり、写真がわずかに寄る */
.p-column-pickup__card { transition: transform .4s ease, opacity .4s ease, translate .3s var(--cm-ease), box-shadow .3s var(--cm-ease); } /* transform・opacity はカルーセルの切り替え（common-archive.css）の分を残す */
.p-column-pickup__card-img-wrapper img { transition: scale .5s var(--cm-ease); }
@media (hover: hover) {
  .p-column-pickup__card:hover { translate: 0 -0.25rem; box-shadow: 0 0.875rem 1.75rem rgba(30, 40, 85, .14); }
  .p-column-pickup__card:hover .p-column-pickup__card-img-wrapper img { scale: 1.03; }
}

/* ---------- 記事カード（お役立ちコラム） ---------- */
/* 画面に入ったとき、下から順に配られる（同じ行は80msずつずらす） */
.js-cm .p-column-archive__article {
  transition: translate .52s var(--cm-ease), opacity .52s var(--cm-ease);
  transition-delay: calc(var(--cm-i, 0) * 80ms);
}
.js-cm .p-column-archive__article:not(.is-cm-in) { translate: 0 1.25rem; opacity: 0; }
.p-column-archive__article .p-archive__article-img { transition: scale .5s var(--cm-ease); }
@media (hover: hover) {
  .p-column-archive__article:hover { translate: 0 -0.25rem; transition-delay: 0s; }
  .p-column-archive__article:hover .p-archive__article-img { scale: 1.04; }
  .p-column-archive__article:hover .p-archive__article-ttl { color: var(--color-accent, #1e78eb); }
}
.p-column-archive__article .p-archive__article-ttl { transition: color .2s; }
/* 旧テーマのリンクのホバー（半透明になる）は、持ち上がる動きと重なって薄く見えるので、カードでは止める */
.p-column-archive__article .p-archive__article-link:hover { opacity: 1; }

/* 「動きを減らす」設定：入場・常時の動きを止め、すぐ最終状態にする */
@media (prefers-reduced-motion: reduce) {
  .js-cm .p-column-pickup__carousel,
  .js-cm .p-column-pickup__illust,
  .js-cm .p-column-pickup__tagline-pill,
  .js-cm .p-column-archive__article { translate: none !important; rotate: none !important; opacity: 1 !important; clip-path: none !important; transition: none !important; }
  .js-cm .p-column-pickup__watermark,
  .js-cm .p-column-pickup__illust { animation: none !important; }
}

/* 人物のまわりの小さな動き（10/10谷）。女性：入力中の吹き出し、男性：ときどき光るきらめき。PCのみ */
.p-column-pickup__think, .p-column-pickup__spark { display: none; }
@media screen and (min-width: 769px) {
  .p-column-pickup__think, .p-column-pickup__spark { display: block; position: absolute; z-index: 2; pointer-events: none; }
  .p-column-pickup__think { left: 12.75rem; top: 29.25rem; width: 2.5rem; height: 2.5rem; opacity: 0; transition: opacity .4s ease .9s; }
  .is-cm-in .p-column-pickup__think { opacity: 1; }
  .p-column-pickup__think img { display: block; width: 100%; height: 100%; }
  .p-column-pickup__think i { position: absolute; width: 7.5%; height: 7.5%; border-radius: 50%; background: #2f4170; animation: fv-typing-c 1.4s ease-in-out infinite; }
  .p-column-pickup__think i:nth-of-type(1) { left: 35.7%; top: 45.6%; }
  .p-column-pickup__think i:nth-of-type(2) { left: 53.2%; top: 42.5%; animation-delay: .18s; }
  .p-column-pickup__think i:nth-of-type(3) { left: 70.7%; top: 39.4%; animation-delay: .36s; }
  @keyframes fv-typing-c { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-60%); opacity: 1; } }
  .p-column-pickup__spark { left: 65rem; top: 34.75rem; width: 1.75rem; height: 1.75rem; }
  .p-column-pickup__spark i { position: absolute; inset: 0; background: #ffd34d; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: 0; transform: scale(.4) rotate(-20deg); animation: cm-spark 4.8s ease-in-out 1.6s infinite; }
  .p-column-pickup__spark i:nth-of-type(2) { inset: auto auto -0.25rem -0.625rem; width: 0.75rem; height: 0.75rem; background: #1e78eb; animation-delay: 1.75s; }
  @keyframes cm-spark { 0%, 70%, 100% { opacity: 0; transform: scale(.4) rotate(-20deg); } 76% { opacity: 1; transform: scale(1.15) rotate(8deg); } 84% { opacity: 1; transform: scale(1) rotate(0deg); } 92% { opacity: 0; transform: scale(.8) rotate(10deg); } }
}
@media (prefers-reduced-motion: reduce) {
  .p-column-pickup__think i, .p-column-pickup__spark i { animation: none; }
  .p-column-pickup__spark { display: none; }
}

/* 10/11谷「もう少し常に動く・ダイナミックに」：人物はゆらゆら揺れ（女性は上下＋小さく傾く、男性は手を差し出すように左右へ傾く）、背景の英字は速めに流す */
@keyframes cm-sway-l { 0%,100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -0.5rem; rotate: -2.5deg; } }
@keyframes cm-sway-r { 0%,100% { rotate: 0deg; } 30% { rotate: -4deg; } 60% { rotate: 1.5deg; } }
.js-cm .p-column-pickup.is-cm-idle .p-column-pickup__illust { transform-origin: 50% 100%; }
.js-cm .p-column-pickup.is-cm-idle .p-column-pickup__illust.--left { animation: cm-sway-l 3.6s ease-in-out infinite; }
.js-cm .p-column-pickup.is-cm-idle .p-column-pickup__illust.--right { animation: cm-sway-r 3.2s ease-in-out infinite; animation-delay: 0s; }
.p-column-pickup__watermark { font-size: 6.25rem; }

/* 10/11谷「ふわふわではなく、イラストの中が動いてほしい」：全体の揺れをやめ、絵の中の動きにする
   ・2人ともまばたき（肌色のまぶたが一瞬閉じる・左右で周期をずらす）
   ・女性：タブレットにペンで書き込む線が1本ずつ引かれ、消えてまた書く
   ・男性：手元のグラフの棒が順に伸びる */
.js-cm .p-column-pickup.is-cm-idle .p-column-pickup__illust { animation: none !important; }
.p-column-pickup__illust { display: block; }
.p-column-pickup__illust > img { display: block; width: 100%; height: 100%; }
.p-column-pickup__illust .cm-blink { position: absolute; width: 3.4%; height: 3.4%; margin: -1.7% 0 0 -1.7%; border-radius: 50%; background: #fccecb; transform: scaleY(0); transform-origin: 50% 0; animation: cm-blink 4.6s infinite; }
.p-column-pickup__illust.--right .cm-blink { animation-delay: 1.9s; background: #fdd2ce; }
@keyframes cm-blink { 0%, 92%, 100% { transform: scaleY(0); } 95% { transform: scaleY(1.15); } }
@keyframes cm-write { 0% { stroke-dashoffset: 100; opacity: .55; } 25%, 75% { stroke-dashoffset: 0; opacity: .55; } 90%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.cm-chart { position: absolute; left: 62.2%; top: 63.4%; width: 16.4%; height: 12.8%; background: #ededed; transform: rotate(-3deg); display: flex; align-items: flex-end; gap: 7%; padding: 0 3% 2% 3%; }
.cm-chart b { flex: 1; background: #74c7a4; border-radius: 1px; transform-origin: 50% 100%; animation: cm-bar 3.6s cubic-bezier(.16, 1, .3, 1) infinite; }
.cm-chart b:nth-child(1) { height: 38%; }
.cm-chart b:nth-child(2) { height: 62%; animation-delay: .2s; }
.cm-chart b:nth-child(3) { height: 92%; animation-delay: .4s; }
@keyframes cm-bar { 0%, 8% { transform: scaleY(.15); } 35%, 82% { transform: scaleY(1); } 100% { transform: scaleY(.15); } }
@media (prefers-reduced-motion: reduce) {
  .p-column-pickup__illust .cm-blink, .cm-scribble path, .cm-chart b { animation: none; }
  .cm-scribble path { stroke-dashoffset: 0; }
}