@charset "UTF-8";
@import "reset.css";/* ResetCSS */
@import "layout.css";/* CSS for authors*/

/* === Button hover & active effects === */

/* a要素を変形の基点にするより、画像自体を変形する方が分かりやすい */
.button a {
  display: inline-block;
  -webkit-tap-highlight-color: transparent; /* モバイルの青ハイライト抑制 */
}

/* 画像のふるまい（アニメーション） */
.button a img {
  transition: transform 0.15s ease, opacity 0.15s ease;
  transform-origin: center center;
  will-change: transform, opacity;
}

/* マウス等“ホバー可能”な端末だけにホバー/フォーカスの視覚効果を適用 */
@media (hover: hover) and (pointer: fine) {
/* ホバー／キーボードフォーカス：少し薄く、小さく */
.button a:hover img,
.button a:focus-visible img {
	opacity: 0.85;
	transform: scale(0.98);
 }
}

/* クリック中（押下中）：さらに薄く、さらに小さく */
.button a:active img {
  opacity: 0.75;
  transform: scale(0.96);
}

/* アニメーションが苦手なユーザー配慮 */
@media (prefers-reduced-motion: reduce) {
  .button a img {
    transition: none;
  }
}