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

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

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

/* 画像のふるまい（アニメーション） */
.button1 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) {
/* ホバー／キーボードフォーカス：少し薄く、小さく */
.button1 a:hover img,
.button1 a:focus-visible img,
.button2 a:hover img,
.button2 a:focus-visible img {
	opacity: 0.85;
	transform: scale(0.98);
 }
}

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

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

html {
  scroll-behavior: smooth;
}

/* アンカー位置のずれ対策：固定ヘッダー相当の余白を確保 */
#target {
  scroll-margin-top: 80px; /* ヘッダーの高さに合わせて調整 */
}