@charset "UTF-8";

/* ========================================
   press.css
   スマホでボタンを押した瞬間の反応（G-3・跡田さん選択=案1「沈む」）

   ・カード型は 3px 沈む（PCのホバー「-4px 浮く」の逆向き）
   ・ボタン型は 95% に縮む
   ・0.12 秒。押している間だけで、離すと戻る

   ★ 読み込み順: このファイルは pages/*.css の「後」に読む（head.php）。
     ホバー（例 .know-card-link:hover）と詳細度が同じため、
     後に読まないと押した状態が負ける。順序を入れ替えないこと。

   ★ 状態は press.js が付ける .is-pressed で表す。
     :active を使わないのは iOS Safari で出ないことがあるため。
     マウス環境のホバーは一切変えていない。

   ★ transition は transform だけを足す書き方にしている。
     l-header-entry / l-footer-entry / learning-jobs-btn は元から
     opacity のトランジションを持っており、shorthand で上書きすると
     ホバー時のふわっとした変化が消えるため、意図的に併記している。
======================================== */

.is-pressed {
  -webkit-tap-highlight-color: transparent;
}

/* ---- カード型: 沈む ----
   通常時に影を持たない作りなので、影は足さず位置だけ下げる。
   （ホバーは -4px 浮いて影が出る。押すとその逆向きに動く） */
.know-card-link,
.know-nav-link {
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.know-card-link.is-pressed,
.know-nav-link.is-pressed {
  transform: translateY(3px);
  box-shadow: none;
}

/* ---- ボタン型: 縮む（元から transition が無いもの） ---- */
.index-btn,
.index-viewmore,
.index-environment-cta,
.company-btn,
.job-overview-card-more,
.l-footer-top,
.recruit-jobs-btn,
.recruit-types-btn {
  transition: transform 0.12s ease;
}
/* ---- ボタン型: 元から opacity のトランジションを持つもの ---- */
.l-header-entry,
.l-header-nav-entry,
.l-header-drawer-entry,
.l-footer-entry,
.learning-jobs-btn {
  transition: opacity 0.2s ease, transform 0.12s ease;
}
/* ---- ボタン型: 元から transform 0.15s を持つもの（速さを尊重） ---- */
.interview-index-card-link {
  transition: transform 0.15s ease;
}

.index-btn.is-pressed,
.index-viewmore.is-pressed,
.index-environment-cta.is-pressed,
.company-btn.is-pressed,
.job-overview-card-more.is-pressed,
.l-header-entry.is-pressed,
.l-header-nav-entry.is-pressed,
.l-header-drawer-entry.is-pressed,
.l-footer-entry.is-pressed,
.l-footer-top.is-pressed,
.recruit-jobs-btn.is-pressed,
.recruit-types-btn.is-pressed,
.learning-jobs-btn.is-pressed,
.interview-index-card-link.is-pressed {
  transform: scale(0.95);
}

/* 端末側で「動きを減らす」を有効にしている利用者には出さない */
@media (prefers-reduced-motion: reduce) {
  .is-pressed {
    transform: none !important;
    box-shadow: revert !important;
  }
}