@charset "UTF-8";
/* ============================================================
   動き（2026年10月 追加・本人が「動きの見本帳」から A・B・C・E を選択）

   A … トップの「なんか楽しそう」が、1文字ずつぴょこっと跳ねる
   B … ひまわりマークが、ゆらゆら揺れる（ロゴ等は触るとくるっと回る）
   C … カードや写真が、画面に入ってきたときにふわっと浮かぶ
   E … ボタンを触ると、ぷにっと弾む

   動きは transform ではなく translate / rotate / scale を使っています。
   もとのデザインで傾けてある写真（transform）などと、ぶつからないようにするためです。
   端末で「動きを減らす」設定をしている人には、すべて止めて表示します（いちばん下）。
   ============================================================ */

/* ── A：「なんか楽しそう」がぴょこっと跳ねる ── */
.hero-catch .hop-ch{display:inline-block;animation:nana-hop 3.4s ease-in-out infinite;}
@keyframes nana-hop{
  0%,60%,100%{translate:0 0}
  66%{translate:0 -.42em}
  72%{translate:0 0}
  76%{translate:0 -.12em}
  80%{translate:0 0}
}

/* ── B：ひまわりマークがゆらゆら ── */
svg.nana-sway{transform-origin:50% 60%;animation:nana-sway 3.6s ease-in-out infinite;}
@keyframes nana-sway{0%,100%{rotate:-8deg}50%{rotate:8deg}}
/* ロゴ・見出し・キーワードのひまわりは、触るとくるっと回る */
.sf,.why-sf{transition:transform .9s cubic-bezier(.3,1.4,.5,1);}
.brand:hover .sf,.sf:hover,.why-card:hover .why-sf{transform:rotate(180deg) scale(1.1);}

/* ── C：画面に入ってきたら、ふわっと浮かぶ ──
   html に nana-reveal が付いたとき（＝動きの仕組みが動いたとき）だけ隠すので、
   仕組みが動かない場合でも中身は必ず表示されます。 */
html.nana-reveal .nana-rise{opacity:0;translate:0 26px;}
html.nana-reveal .nana-rise.is-in{opacity:1;translate:0 0;
  transition:opacity .7s ease,translate .85s cubic-bezier(.2,.8,.2,1);transition-delay:var(--rise-delay,0s);}

/* ── E：ボタンがぷにっと弾む ── */
.btn-fill,.btn-line,.btn-ghost,.btn-sun,.lg-buy-btn,.fc-cta,.rt-btn,.room-talk-cta,.fam-hero-cta,.ct-sns a,.nana-tap{
  transition:scale .12s ease;}
.btn-fill:hover,.btn-line:hover,.btn-ghost:hover,.btn-sun:hover,.lg-buy-btn:hover,.fc-cta:hover,
.rt-btn:hover,.room-talk-cta:hover,.fam-hero-cta:hover,.ct-sns a:hover{animation:nana-puni .5s cubic-bezier(.3,1.6,.5,1);}
.btn-fill:active,.btn-line:active,.btn-ghost:active,.btn-sun:active,.lg-buy-btn:active,.fc-cta:active,
.rt-btn:active,.room-talk-cta:active,.fam-hero-cta:active,.ct-sns a:active{scale:.94;}
@keyframes nana-puni{0%{scale:1}30%{scale:1.08 .92}55%{scale:.96 1.05}100%{scale:1}}
/* 大きなカード型のボタンは、控えめに */
.route:hover,.price-row:hover,.plan:hover,.sns-item:not(.sns-soon):hover{animation:nana-puni-soft .5s cubic-bezier(.3,1.6,.5,1);}
.route:active,.price-row:active,.plan:active,.sns-item:not(.sns-soon):active{scale:.98;}
@keyframes nana-puni-soft{0%{scale:1}30%{scale:1.02 .98}55%{scale:.99 1.01}100%{scale:1}}

/* ── 動きを減らす設定の人には、止めて表示 ── */
@media (prefers-reduced-motion:reduce){
  .hero-catch .hop-ch,svg.nana-sway{animation:none;}
  .sf,.why-sf{transition:none;}
  .brand:hover .sf,.sf:hover,.why-card:hover .why-sf{transform:none;}
  html.nana-reveal .nana-rise{opacity:1;translate:none;transition:none;}
  *:hover,*:active{animation:none !important;scale:none !important;}
}