/* TOP FV（2026リニューアル）
   Figma: PC 350:3606（1440×810）／ SP 350:3878（375×720）／ 表・裏 967:8378 ／ 動き 969:900
   数値は Figma の px を rem（PC 1440・SP 375 基準の可変 rem）に直したもの。動きの値は js/top-fv.js */

.p-fv {
  position: relative;
  overflow: hidden;
  background: #f4f3ef;
  color: #1e2855;
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.p-fv img { max-width: none; }
.p-fv__inner { position: relative; height: 43.125rem; }

/* ---------- 左：コピーとボタン ---------- */
.p-fv__text { position: absolute; left: 6.875rem; top: 15rem; width: 31.875rem; }
.p-fv__ttl { margin: 0; font-size: 2rem; font-weight: 500; line-height: 3.625rem; letter-spacing: 0; }
.p-fv__ttl-line { display: block; white-space: nowrap; }
/* Figma 350:3609/350:3611：H1下端から社名まで10。 */
.p-fv__company { margin: 0.625rem 0 0; font-family: Overpass, sans-serif; font-size: 1rem; line-height: 3.125rem; letter-spacing: .05em; color: #aaa; }
.p-fv__btns { display: flex; gap: 1rem; margin-top: 1.8125rem; }
.p-fv__btn.c-btn {
  justify-content: center;
  gap: 1.375rem;
  width: 13.75rem;
  min-width: 0;
  height: 4rem;
  padding: 0 1.5rem;
  border: 0.125rem solid #1e78eb;
  border-radius: 3.125rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  letter-spacing: .1em;
}
.p-fv__btn.c-btn::after { width: 0.8125rem; height: 0.64581rem; transform: scaleX(-1); }
.p-fv__btn--doc.c-btn { background: #fff; color: #1e78eb; }
.p-fv__btn--doc.c-btn::after { background-image: url("../images/common/cta/arrow-blue.svg"); }
.p-fv__btn--contact.c-btn { background: #1e78eb; color: #fff; }
.p-fv__btn--contact.c-btn::after { background-image: url("../images/common/cta/arrow-white.svg"); }
@media (hover: hover) {
  .p-fv__btn.c-btn:hover { opacity: .8; }
}

/* ---------- 右：カードの束 ---------- */
.p-fv__visual { position: absolute; left: 39.25rem; top: 8.4375rem; width: 45.75rem; height: 31.125rem; }
.p-fv__deck { /* 後ろのグレーのカード（表・裏とも残す。めくりの間だけ揺れる） */
  position: absolute;
  left: 5.5875rem;
  top: 4.59375rem;
  width: 36.25rem;
  height: 25rem;
  border-radius: 1.875rem;
  background: #e0e1e1;
  transform: rotate(5deg);
  transform-origin: center;
  overflow: hidden;
}
.p-fv__deck::after { content: ""; position: absolute; inset: 0; background: url("../images/top/fv/deck-texture.webp") 0 0 / 64rem 64rem; opacity: .3; }
.p-fv__base { position: absolute; left: 3.4375rem; top: 6.25rem; width: 36.25rem; height: 24.375rem; border-radius: 1.875rem; background: #fff; }
.p-fv__deco { position: absolute; pointer-events: none; }
.p-fv__deco--tr { left: 30.0625rem; top: 0; width: 10.125rem; height: 9.25rem; z-index: 6; }
.p-fv__deco--bl { left: 0; top: 22.6875rem; width: 10.875rem; height: 7.9375rem; z-index: 6; }

.p-fv__slider { position: absolute; left: 4.6875rem; top: 7.5rem; width: 33.75rem; height: 21.875rem; z-index: 3; }

/* 縦のドット（5社）。今の社は青い点＋青い輪 */
.p-fv__dots { position: absolute; left: 44.6875rem; top: 12.3125rem; display: flex; flex-direction: column; gap: 0.625rem; }
.p-fv__dot {
  position: relative;
  width: 1rem;
  height: 1rem;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.p-fv__dot::before { content: ""; position: absolute; left: 0.3125rem; top: 0.3125rem; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: #d9d9d9; transition: background-color .3s; }
.p-fv__dot::after { content: ""; position: absolute; inset: 0; border: 1px solid #1e78eb; border-radius: 50%; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s; }
.p-fv__dot[aria-selected="true"]::before { background: #1e78eb; }
.p-fv__dot[aria-selected="true"]::after { opacity: 1; transform: scale(1); }
.p-fv__dot:focus-visible { outline: 0.125rem solid #1e78eb; outline-offset: 0.125rem; border-radius: 50%; }

/* ---------- カード（表＝Instagramの画面／裏＝クライアントの声） ---------- */
.fv-card { position: absolute; inset: 0; color: #1e2855; isolation: isolate; border-radius: 1.25rem; }
.fv-card[hidden] { display: block !important; }
/* 子要素のinline visibilityでも非表示カードが復活しないようにする。 */
.fv-card[hidden], .fv-card[hidden] * { visibility: hidden !important; }
.clip { position: absolute; inset: 0; overflow: hidden; background: #fff; border: 1px solid #c8c8c8; border-radius: inherit; transform-origin: center; z-index: 2; }
.card-bar { position: absolute; inset: 0 0 auto; height: 2.5rem; background: #fff; border-bottom: 1px solid #c8c8c8; z-index: 4; }
.brand { position: absolute; left: 1.25rem; top: 0.3125rem; width: 31.25rem; height: 1.875rem; display: flex; align-items: center; justify-content: space-between; }
.logo-slot { position: relative; width: 7.5rem; height: 1.875rem; }
.logo-img { position: absolute; left: 0.625rem; top: 0.6875rem; width: 6.25rem; height: 0.6875rem; }
.logo-avatar { position: absolute; left: 2.875rem; top: 1px; width: 1.75rem; height: 1.75rem; border-radius: 50%; object-fit: contain; }
.fv-card .client { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding-right: 0.5625rem; font-family: Overpass, "Zen Kaku Gothic New", sans-serif; font-size: 0.625rem; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.fv-card .client-label { font-size: 0.6875rem; }

.page { position: absolute; inset: 0; background: #fff; z-index: 2; }
.page-shade { position: absolute; inset: 0; background: #1e2855; opacity: 0; pointer-events: none; z-index: 30; }

.phone-wrap { position: absolute; left: 1.25rem; top: 2.75rem; width: 12.75rem; height: 19.125rem; overflow: hidden; }
.phone { position: absolute; left: 0.26625rem; top: 1.02rem; width: 11.90625rem; height: 24.29875rem; border: 0.29169rem solid #c8c8c8; border-radius: 1.45875rem; background: #fff; overflow: hidden; }
.phone-shot { position: absolute; left: 0.23375rem; top: 0; width: 11.5rem; height: auto; display: block; }

.posts { position: absolute; inset: 0; pointer-events: none; }
.post { position: absolute; left: 15.625rem; top: 3.375rem; width: 10.75rem; height: 17rem; border-radius: 0.625rem; background: #fff; overflow: hidden; transform-origin: center; }
.post-front { z-index: 2; box-shadow: 0 0.625rem 1.5rem rgba(30, 40, 85, .14); }
.post-back { z-index: 1; box-shadow: 0 0.5rem 1.125rem rgba(30, 40, 85, .10); }
.ig-img { position: absolute; left: 0; top: 0; right: 0; bottom: 2.125rem; overflow: hidden; background: #fff; }
.ig-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ig-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2.125rem; display: flex; align-items: center; gap: 0.5625rem; padding: 0 0.625rem; color: #1e2855; border-top: 1px solid #eef0f3; background: #fff; }
.ig-ic { display: block; width: 0.9375rem; height: 0.9375rem; transform-origin: center; }
.ig-ic svg { display: block; width: 100%; height: 100%; }
.ig-like.liked { color: #ff3040; }
.ig-like.liked path { fill: currentColor; }
.ig-save { margin-left: auto; }

.swap { position: absolute; left: 30.375rem; top: 18.75rem; width: 2.5rem; height: 2.5rem; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; z-index: 20; transform-origin: center; }
.swap img { display: block; width: 100%; height: 100%; }
.swap-ring { position: absolute; inset: 0; border-radius: 50%; border: 0.125rem solid #1e78eb; opacity: 0; pointer-events: none; }
.swap:focus-visible { outline: 0.125rem solid #1e78eb; outline-offset: 0.1875rem; border-radius: 50%; }

.flip-card { position: absolute; inset: 0; z-index: 5; overflow: hidden; background: #fff; border: 1px solid #c8c8c8; border-radius: inherit; transform-origin: center; backface-visibility: hidden; box-shadow: 0 1.125rem 2.5rem rgba(30, 40, 85, .20); visibility: hidden; }
.flip-card::after { content: ""; position: absolute; inset: 0; background: #1e2855; opacity: var(--shade, 0); pointer-events: none; }
.flip-card .card-bar { z-index: 1; }
.flip-photo { position: absolute; left: 0; right: 0; top: 2.5rem; bottom: 0; overflow: hidden; }
.back-photo { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 40% 45%; }
.flip-photo::after { /* 写真下部を黒0%→60%のグラデーションにする（10/11確定） */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
  pointer-events: none;
}
.comments { position: absolute; left: 1.875rem; bottom: 1.3125rem; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; margin: 0; text-align: left; color: #fff; }
.comments .c-main { display: block; font-size: 1.25rem; font-weight: 700; line-height: 1.4; letter-spacing: .04em; white-space: nowrap; text-shadow: 0 1px 0.75rem rgba(0, 0, 0, .25); }
.comments .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-left: -.5em; } /* 「をぶら下げる */
.comments .ln-in { display: block; }
.comments .c-sub { display: block; margin-top: 0.1875rem; font-size: 0.6875rem; font-weight: 500; line-height: 1.55; letter-spacing: .05em; opacity: .85; text-shadow: 0 1px 0.75rem rgba(0, 0, 0, .25); }
.flip-photo .swap-back { left: 30.375rem; top: 16.25rem; }

/* ---------- SP（Figma 350:3878・375幅） ---------- */
@media screen and (max-width: 768px) {
  .p-fv__inner { height: 37.5rem; }
  .p-fv__text { left: 2.125rem; top: 26.1875rem; width: 19.9375rem; }
  .p-fv__ttl { font-size: 1.25rem; line-height: 2.25rem; letter-spacing: .05em; }
  .p-fv__company { display: none; }
  .p-fv__btns { gap: 0.75rem; margin-top: 1.25rem; padding-left: 0.53125rem; }
  .p-fv__btn.c-btn { width: 9.0625rem; height: 2.875rem; gap: 0.875rem; padding: 0 1rem; border-width: 1px; font-size: 1rem; line-height: 1.625rem; letter-spacing: .05em; }
  .p-fv__btn.c-btn::after { width: 0.75rem; height: 0.5625rem; }

  .p-fv__visual { left: 0; top: 0; width: 23.4375rem; height: 25.625rem; }
  .p-fv__deck { left: 3.4rem; top: 5.3125rem; width: 21.25rem; height: 15rem; border-radius: 1.1rem; transform: rotate(5deg); }
  .p-fv__base { left: 1.0625rem; top: 7.0625rem; width: 21.25rem; height: 15rem; border-radius: 1.1rem; }
  .p-fv__deco--tr { left: 17.625rem; top: 4rem; width: 5rem; height: 4.5625rem; }
  .p-fv__deco--bl { left: -3px; top: 18.4375rem; width: 5rem; height: 4.4625rem; }
  .p-fv__slider { left: 1.6875rem; top: 7.6875rem; width: 20rem; height: 13.75rem; }
  .p-fv__dots { left: 8.125rem; top: 23.3125rem; flex-direction: row; }

  .fv-card { border-radius: 0.75rem; }
  .clip, .flip-card { border-width: .6px; }
  .card-bar { height: 1.875rem; border-bottom-width: .6px; }
  .brand { left: 0.625rem; top: 0.29313rem; width: 18.75rem; height: 1.40625rem; }
  .logo-slot { width: 4.5rem; height: 1.125rem; margin-top: 0.28125rem; }
  .logo-img { left: 0.3125rem; top: 0.375rem; width: 3.75rem; height: 0.5rem; }
  .logo-avatar { left: 1.625rem; top: -1px; width: 1.25rem; height: 1.25rem; }
  .fv-card .client { gap: 0.2975rem; padding-right: 0.335rem; font-size: 0.625rem; }
  .fv-card .client-label { font-size: 0.625rem; }

  .phone-wrap { left: 0.75rem; top: 2.5rem; width: 7.5rem; height: 11.25rem; }
  .phone { left: 0.15625rem; top: 0.17813rem; width: 7.20625rem; height: 14.70625rem; border-width: 0.17688rem; border-radius: 0.88313rem; }
  .phone-shot { left: -.11px; top: .15px; width: 7.23375rem; }

  .post { left: 9.25rem; top: 2.3125rem; width: 6.375rem; height: 10.0625rem; border-radius: 0.375rem; }
  .ig-img { bottom: 1.25rem; }
  .ig-bar { height: 1.25rem; gap: 0.3125rem; padding: 0 0.375rem; }
  .ig-ic { width: 0.5625rem; height: 0.5625rem; }

  .swap { left: 17.5rem; top: 11.25rem; width: 2rem; height: 2rem; }
  .flip-photo { top: 1.875rem; }
  .flip-photo .swap-back { left: 17.5rem; top: 9.375rem; }
  .flip-card { box-shadow: 0 0.625rem 1.5rem rgba(30, 40, 85, .20); }
  .comments { left: 1.1125rem; bottom: 0.875rem; }
  .comments .c-main { font-size: 0.75rem; }
  .comments .c-sub { margin-top: 1px; font-size: 0.4125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .p-fv__dot::before, .p-fv__dot::after { transition: none; }
}

/* 企業ロゴの帯（Figma 350:3623：2段・白地） */
.p-logo-rows { background: #fff; }
/* 10/13谷：ロゴの左右の間隔を広げた分、上下にも白い余白を足す（PC 上14・段の間6・下16＝帯156px）。FVの高さの計算（下の --logo-band-h）と合わせる */
:root { --logo-band-h: 9.75rem; }
@media screen and (min-width: 769px) {
  .p-logo-rows { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.875rem 0 1rem; }
}
@media screen and (max-width: 768px) {
  .p-logo-rows { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 0 0.625rem; }
}
.p-logo-slider__wrapper.--row1 .p-logo-slider { animation-delay: -37.5s; }
.p-logo-slider__wrapper.--row1 .p-logo-slider.--js-even { animation-delay: -12.5s; }
.p-logo-slider__item img { width: 6.75rem; height: 3.75rem; object-fit: contain; }

/* FVのハートと吹き出し（10/10谷「動きがあるといい」）。絵から切り出して重ね、ハートは数秒おきに「いいね」の鼓動、吹き出しの点は入力中のように順に跳ねる */
.p-fv__heart, .p-fv__bubble { position: absolute; z-index: 7; pointer-events: none; }
.p-fv__heart { left: 0; top: 23.0625rem; width: 2.8961rem; height: 2.8961rem; display: grid; place-items: center; }
.p-fv__heart img { width: 2.5rem; height: 2.5rem; transform: rotate(-10deg); animation: fv-heart-beat 4.2s ease-in-out infinite; }
@keyframes fv-heart-beat {
  0%, 62%, 100% { transform: rotate(-10deg) scale(1); }
  68% { transform: rotate(-10deg) scale(1.22); }
  74% { transform: rotate(-10deg) scale(.94); }
  80% { transform: rotate(-10deg) scale(1.08); }
  86% { transform: rotate(-10deg) scale(1); }
}
.p-fv__bubble { left: 37.9375rem; top: 0; width: 1.875rem; height: 1.875rem; }
.p-fv__bubble img { display: block; width: 100%; height: 100%; }
.p-fv__bubble i { position: absolute; width: 7.5%; height: 7.5%; border-radius: 50%; background: #2f4170; animation: fv-typing 1.4s ease-in-out infinite; }
.p-fv__bubble i:nth-of-type(1) { left: 35.7%; top: 45.6%; }
.p-fv__bubble i:nth-of-type(2) { left: 53.2%; top: 42.5%; animation-delay: .18s; }
.p-fv__bubble i:nth-of-type(3) { left: 70.7%; top: 39.4%; animation-delay: .36s; }
@keyframes fv-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-60%); opacity: 1; } }
@media screen and (max-width: 768px) {
  .p-fv__heart { left: -3px; top: 18.6rem; width: 1.3316rem; height: 1.3316rem; }
  .p-fv__heart img { width: 1.15rem; height: 1.15rem; }
  .p-fv__bubble { left: 21.5156rem; top: 4rem; width: .9259rem; height: .9259rem; }
}
@media (prefers-reduced-motion: reduce) {
  .p-fv__heart img, .p-fv__bubble i { animation: none; }
}
/* 左下の人物を少し左へ（10/10谷）。ハートも一緒に動かす */
@media screen and (min-width: 769px) {
  .p-fv__deco--bl { left: -1.5rem; }
  .p-fv__heart { left: -1.5rem; }
}
/* 10/10谷「FVの下が中途半端」：PCはFV＋企業ロゴ帯（--logo-band-h）で画面の高さちょうどにする。FVの中身は上下中央。
   画面が低い（〜810）ときは今のまま、極端に高い画面では広がりすぎないよう上限を置く */
@media screen and (min-width: 769px) {
  .p-fv { display: flex; flex-direction: column; justify-content: center; min-height: min(calc(100svh - var(--logo-band-h)), 56rem); }
  .p-fv__inner { width: 100%; flex: none; }
}
@media screen and (max-width: 768px) {
  .p-fv__heart { left: 0.125rem; }
}

/* 10/11谷「FVの人物まわりにもう少し動き」：左下の人物はスマホを見て頷くように上下、右上の人物は差し出すように揺れる */
@keyframes fv-bob { 0%,100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -0.375rem; rotate: -1.5deg; } }
@keyframes fv-lean { 0%,100% { rotate: 0deg; } 40% { rotate: 2.5deg; } 70% { rotate: -1deg; } }
.p-fv__deco--bl { transform-origin: 60% 100%; animation: fv-bob 3.4s ease-in-out infinite; }
.p-fv__deco--tr { transform-origin: 70% 90%; animation: fv-lean 4s ease-in-out infinite; }
.p-fv__heart { animation: fv-bob 3.4s ease-in-out infinite; }
/* 下が窮屈：FVの中身を少し上へ（ロゴ帯との間を広げる） */
@media screen and (min-width: 769px) {
  .p-fv { padding-bottom: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .p-fv__deco--bl, .p-fv__deco--tr, .p-fv__heart { animation: none; }
}
/* 10/11谷：人物は固定（揺らさない）。動くのはハートの鼓動と吹き出しの「…」だけ。カード一式を少し大きく */
.p-fv__deco--bl, .p-fv__deco--tr, .p-fv__heart { animation: none !important; }
@media screen and (min-width: 769px) {
  .p-fv__visual { transform: scale(1.06); transform-origin: 40% 50%; }
}

/* CMSで長さが変わるお客様の声は、戻るボタンに重ならない幅で折り返す。 */
.p-fv .comments { right: 3.5rem; }
.p-fv .comments .c-main { white-space: normal; overflow-wrap: anywhere; }
.p-fv .logo-img { object-fit: contain; }
/* 裏面では左下の人物とハートを左へ24px移動しながら消す（10/11確定）。 */
.p-fv__deco--bl, .p-fv__heart { transition: transform .4s ease, opacity .4s ease; }
.p-fv.is-flipped .p-fv__deco--bl, .p-fv.is-flipped .p-fv__heart { transform: translateX(-1.5rem); opacity: 0; }
.p-fv--empty .p-fv__inner { height: 28rem; }
.p-fv--empty .p-fv__text { left: 50%; top: 10rem; transform: translateX(-50%); }
@media screen and (max-width: 768px) {
  .p-fv .comments { right: 2.75rem; }
  .p-fv--empty .p-fv__inner { height: 24rem; }
  .p-fv--empty .p-fv__text { top: 8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .p-fv__deco--bl, .p-fv__heart { transition: none; }
}

/* 10/13谷「ずれてる」：Figmaから書き出したプロフィール画面は余白なしなので、スマホ枠の内側いっぱいに合わせる（旧素材は左に余白を持たせていた） */
.p-fv .phone-shot { left: 0; top: 0; width: 100%; }

/* 今のドットの輪はタイマー（10/13谷）：線が時計回りに伸び、1周したら次の社へ切り替わる。--p（0〜1）は top-fv.js が描画ごとに入れる */
.p-fv__dot::after {
  border: 0;
  background: conic-gradient(#1e78eb calc(var(--p, 0) * 360deg), rgba(30, 120, 235, .16) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
}

/* カード左上の横長ロゴ（10/13谷「リゾートトラスト以外変」）：丸いアイコンをやめ、各社のロゴを高さ24pxの枠に左寄せで収める */
.p-fv .logo-img { top: 0.1875rem; height: 1.5rem; object-fit: contain; object-position: left center; }
@media screen and (max-width: 768px) {
  .p-fv .logo-img { top: 0.0625rem; height: 1rem; }
}

/* 裏面（お客様の声）を見ている間は、左下の人物が消えて、カードの左端の裏から覗き込む人物に入れ替わる（10/13谷）。
   大きさ・頭の位置・下端を元の人物にそろえ（下端より下は切る）、体の右端（まっすぐ切れている線）をカードの内側（写真の枠）の左端に合わせて、手が写真の枠にかかる。SPはカードの左に余白がないため出さない */
.p-fv__deco--peek { position: absolute; left: -0.25rem; top: 24.65rem; width: 6.525rem; height: 5.975rem; object-fit: cover; object-position: top; z-index: 6; opacity: 0; transform: translateX(-1rem); transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .3, 1); pointer-events: none; }
.p-fv.is-flipped .p-fv__deco--peek { opacity: 1; transform: none; transition: opacity .18s ease .9s, transform .32s cubic-bezier(.2, .9, .3, 1.15) .9s; } /* カードが着地しきる直前（0.9秒）まで待ち、速い動きで出す。早く出すと傾いたカードの下から体が三角に見える（10/13谷） */ /* カードが裏返りきってから出す（途中は傾いたカードが体に重なり、左肩が欠けて見えるため・10/13谷） */
@media screen and (max-width: 768px) { .p-fv__deco--peek { display: none; } }
@media (prefers-reduced-motion: reduce) { .p-fv__deco--peek { transition: none; transform: none; } }

/* 裏面ではハートの代わりに電球（ひらめき）が白い丸で出る（10/13谷「💡みたいなのも欲しい」）。覗き込む人物が出たあとにポンと出て、数秒おきにピカッと光って小さく揺れる（10/13谷「かくっとする・向きが変・もう少し動き」） */
.p-fv__idea { position: absolute; z-index: 7; left: 0.238rem; top: 23.3rem; width: 2.42rem; height: 2.42rem; display: grid; place-items: center; border-radius: 50%; background: #fff; pointer-events: none; opacity: 0; transform: scale(.4); transition: opacity .25s ease, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.p-fv__idea svg { position: relative; width: 1.7rem; height: 1.7rem; transform-origin: 50% 88%; animation: fv-idea-swing 3.6s ease-in-out infinite; will-change: transform; }
.p-fv__idea::before { content: ""; position: absolute; inset: 0.25rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 102, .55), rgba(255, 214, 102, 0) 70%); opacity: 0; animation: fv-idea-glow 3.6s ease-in-out infinite; }
@keyframes fv-idea-swing { 0%, 58%, 100% { transform: rotate(0); } 64% { transform: rotate(-10deg); } 72% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } 88% { transform: rotate(0); } }
@keyframes fv-idea-glow { 0%, 56%, 100% { opacity: 0; } 66% { opacity: 1; } 86% { opacity: .6; } }
.p-fv.is-flipped .p-fv__idea { opacity: 1; transform: none; transition-delay: 1.1s; }
.p-fv__idea-rays { animation: fv-idea-rays 3.6s ease-in-out infinite; }
@keyframes fv-idea-rays { 0%, 56%, 100% { opacity: .25; } 64% { opacity: 1; } 88% { opacity: .9; } }
@media screen and (min-width: 769px) { .p-fv__idea { left: -1.262rem; } } /* ハートの白い丸（直径2.42rem）と同じ中心・大きさ */
@media screen and (max-width: 768px) { .p-fv__idea { display: none; } }
@media (prefers-reduced-motion: reduce) { .p-fv__idea { transition: none; transform: none; } .p-fv__idea svg, .p-fv__idea::before { animation: none; } .p-fv__idea-rays { animation: none; opacity: 1; } }

/* 覗き込む人物の重ね順（10/13谷）：体はカード（白い台紙）の下、手はカードの上。白い台紙に重ね順を与えて体をその下に入れる */
.p-fv__base { z-index: 2; }
.p-fv__deco--peek { z-index: 2; } /* 白い台紙の上、カード（写真の枠・白い縁）の下 */
.p-fv__deco--peek.p-fv__deco--peek-hand { z-index: 6; clip-path: inset(33% 0 51% 70%); } /* 手だけカードの上 */


/* 10/13谷「デスクトップを変えたらフレキシビリティがない」：remは1440幅で上限（16px）になるため、それより広い画面ではFVの中身を1440の箱にして中央に置く（ヘッダーと左右の位置がそろう） */
@media screen and (min-width: 1441px) {
  .p-fv__inner { max-width: 90rem; margin-inline: auto; }
}