/* =====================================================================
 * 動き（2026-11 に追加。js は同じフォルダの motion.js。ビルドなしで直接書いている）
 * 会社のサイトなので、ほかのサイトより控えめに：ページの切り替えは短いフェードだけ、スクロールで出る動きも小さく短く。
 * クラスは motion.js が付ける（nk-js がないとき＝JS が動かないときは何も隠さない）
 * ===================================================================== */

/* スマホでタップしたときの四角い枠を消す */
html {
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------- ページの切り替え
 * 白い幕を短くフェード。待ちの印は出さず、読み込みに時間がかかるときだけ、上の端に細い青い線が流れる */
#nk-veil {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
#nk-veil span {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 2px;
  background: #3a8cc4;
  opacity: 0;
}
html.nk-veil #nk-veil,
html.nk-leave #nk-veil {
  opacity: 1;
  pointer-events: auto;
}
html.nk-leave #nk-veil {
  transition-duration: 0.25s;
}
html.nk-veil #nk-veil span,
html.nk-leave #nk-veil span {
  animation: nk-bar 1.4s ease-in-out infinite;
  animation-delay: 0.6s;
}
@keyframes nk-bar {
  0% { opacity: 1; transform: translateX(-100%); }
  100% { opacity: 1; transform: translateX(340%); }
}

/* ---------------------------------------------------------------- スクロールで出る：少しだけ浮かぶ */
html.nk-js .nk-up {
  opacity: 0;
  transform: translateY(12px);
}
html.nk-js .nk-up.is-shown {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease-out, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------- ホバー：事業内容の写真がわずかに寄る */
main.frontpage .services > a .thumb {
  overflow: hidden;
}
main.frontpage .services > a .thumb img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  main.frontpage .services > a:hover .thumb img {
    transform: scale(1.03);
  }
}

/* ---------------------------------------------------------------- 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  #nk-veil { display: none; }
}