/* あっとホームページ制作：表示アニメーション。motion.js が html に .mo を付けたときだけ効く（JSが無ければ今まで通り全部見える）。 */
@media (prefers-reduced-motion:no-preference){
  /* 画面に入ったら、下からふわっと出る */
  html.mo [data-appear]:not(.mo-in),
  html.mo .mo-rv:not(.mo-in){opacity:0!important;transform:translateY(32px)!important}
  html.mo [data-appear],
  html.mo .mo-rv{transition:opacity .9s cubic-bezier(.2,.8,.2,1) var(--mo-d,0s),transform .9s cubic-bezier(.2,.8,.2,1) var(--mo-d,0s)!important}
  html.mo .mo-in{opacity:1!important;transform:none!important}

  /* 一覧の中身（料金カード・基本サービス・サービス項目など）は順番に出る */
  html.mo .mo-item{opacity:0}
  html.mo .mo-in .mo-item,html.mo .mo-item.mo-in{animation:mo-up .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--mo-i,0) * 90ms + .15s)}
  @keyframes mo-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

  /* トップの大見出し：1行ずつ出る */
  html.mo .mo-hero h1>*{animation:mo-up 1s cubic-bezier(.2,.8,.2,1) both}
  html.mo .mo-hero h1>*:nth-child(2){animation-delay:.15s}
  html.mo .mo-hero h1>*:nth-child(3){animation-delay:.3s}
  html.mo .mo-hero h1+p{animation:mo-up 1s .45s cubic-bezier(.2,.8,.2,1) both}
  html.mo .mo-hero h1~a{animation:mo-up 1s .6s cubic-bezier(.2,.8,.2,1) both}

  /* トップの写真はゆっくり寄っていく */
  html.mo .mo-kb>.image__bg-container{overflow:hidden}
  html.mo .mo-kb>.image__bg-container::before{animation:mo-kb 20s ease-in-out infinite alternate}
  @keyframes mo-kb{from{transform:scale(1)}to{transform:scale(1.08)}}

  /* ボタンとカードは、触ると少し浮く */
  html.mo a.box[href]{transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
  html.mo a.box[href]:hover{transform:translateY(-3px);filter:brightness(1.04)}
  html.mo .mo-lift{transition:transform .3s ease,box-shadow .3s ease}
  html.mo .mo-lift:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(0,0,0,.08)}
}