/* モバイルタッチフィードバック用CSS */

/* ナビゲーション要素の完全除外（最優先）*/
nav,
nav *,
.no-touch-feedback,
.no-touch-feedback *,
#mobile-menu-button,
#mobile-menu,
#mobile-menu *,
header nav,
header nav * {
  /* タッチフィードバックを完全に無効化 */
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  pointer-events: auto !important;
  /* iOS Safari のタップ時ハイライトも抑止 */
  -webkit-tap-highlight-color: transparent !important;
}

/* ナビ/除外領域ではリップル擬似要素を完全に抑止 */
nav .touch-feedback::before,
nav .touch-feedback-primary::before,
nav .touch-feedback-secondary::before,
nav .touch-feedback-danger::before,
nav .touch-feedback-icon::before,
nav .touch-feedback-link::before,
.no-touch-feedback .touch-feedback::before,
.no-touch-feedback .touch-feedback-primary::before,
.no-touch-feedback .touch-feedback-secondary::before,
.no-touch-feedback .touch-feedback-danger::before,
.no-touch-feedback .touch-feedback-icon::before,
.no-touch-feedback .touch-feedback-link::before {
  display: none !important;
  content: none !important;
}

nav:active,
nav *:active,
.no-touch-feedback:active,
.no-touch-feedback *:active,
#mobile-menu-button:active,
#mobile-menu:active,
#mobile-menu *:active,
header nav:active,
header nav *:active {
  /* アクティブ状態でも変化させない */
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* ベースのタッチフィードバック */
.touch-feedback:not(nav):not(nav *):not(.no-touch-feedback):not(.no-touch-feedback *) {
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  transition: transform 0.2s ease, box-shadow 0.28s ease, filter 0.24s ease;
  -webkit-tap-highlight-color: transparent;
  --touch-feedback-overlay: rgba(255, 255, 255, 0.18);
  --touch-feedback-shadow: rgba(15, 23, 42, 0.14);
}

/* アクティブ状態（タッチ時）のフィードバック */
.touch-feedback:not(nav):not(nav *):not(.no-touch-feedback):not(.no-touch-feedback *):active,
.touch-feedback.is-touch-active {
  transform: scale(0.96);
  filter: brightness(0.88);
  box-shadow: 0 8px 18px var(--touch-feedback-shadow);
}

/* リップルエフェクト */
.touch-feedback::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s, opacity 0.6s;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.touch-feedback.ripple::before {
  width: 300px;
  height: 300px;
  opacity: 1;
}

/* 押下時の視覚オーバーレイ */
.touch-feedback::after,
.touch-feedback-primary::after,
.touch-feedback-secondary::after,
.touch-feedback-danger::after,
.touch-feedback-card::after,
.touch-feedback-icon::after,
.touch-feedback-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--touch-feedback-overlay, rgba(255, 255, 255, 0.18));
  opacity: 0;
  transform: scale(1);
  transition: opacity 0.18s ease, transform 0.26s ease;
  pointer-events: none;
  z-index: 1;
}

.touch-feedback.is-touch-active::after,
.touch-feedback:active::after,
.touch-feedback-primary.is-touch-active::after,
.touch-feedback-primary:active::after,
.touch-feedback-secondary.is-touch-active::after,
.touch-feedback-secondary:active::after,
.touch-feedback-danger.is-touch-active::after,
.touch-feedback-danger:active::after,
.touch-feedback-card.is-touch-active::after,
.touch-feedback-card:active::after,
.touch-feedback-icon.is-touch-active::after,
.touch-feedback-icon:active::after,
.touch-feedback-link.is-touch-active::after,
.touch-feedback-link:active::after {
  opacity: 1;
}

/* プライマリボタン用タッチフィードバック */
.touch-feedback-primary {
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  transition: transform 0.22s ease, box-shadow 0.32s ease, filter 0.24s ease;
  -webkit-tap-highlight-color: transparent;
  --touch-feedback-overlay: rgba(255, 255, 255, 0.25);
  --touch-feedback-shadow: rgba(37, 99, 235, 0.35);
}

.touch-feedback-primary:active,
.touch-feedback-primary.is-touch-active {
  transform: scale(0.98) translateY(1px);
  box-shadow: 0 12px 28px var(--touch-feedback-shadow);
  filter: brightness(0.95);
}

.touch-feedback-primary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s, opacity 0.5s;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.touch-feedback-primary.ripple::before {
  width: 280px;
  height: 280px;
  opacity: 1;
}

/* セカンダリボタン用タッチフィードバック */
.touch-feedback-secondary {
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  transition: transform 0.2s ease, box-shadow 0.28s ease, background-color 0.22s ease, filter 0.22s ease;
  -webkit-tap-highlight-color: transparent;
  --touch-feedback-overlay: rgba(15, 23, 42, 0.14);
  --touch-feedback-shadow: rgba(15, 23, 42, 0.2);
}

.touch-feedback-secondary:active,
.touch-feedback-secondary.is-touch-active {
  transform: scale(0.97);
  background-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 8px 18px var(--touch-feedback-shadow);
}

.touch-feedback-secondary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s, opacity 0.5s;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.touch-feedback-secondary.ripple::before {
  width: 250px;
  height: 250px;
  opacity: 1;
}

/* 危険なアクション用タッチフィードバック */
.touch-feedback-danger {
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  transition: transform 0.22s ease, box-shadow 0.32s ease, filter 0.26s ease;
  -webkit-tap-highlight-color: transparent;
  --touch-feedback-overlay: rgba(255, 255, 255, 0.24);
  --touch-feedback-shadow: rgba(220, 38, 38, 0.45);
}

.touch-feedback-danger:active,
.touch-feedback-danger.is-touch-active {
  transform: scale(0.98) translateY(1px);
  filter: brightness(0.92);
  box-shadow: 0 12px 28px var(--touch-feedback-shadow);
}

.touch-feedback-danger::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s, opacity 0.5s;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.touch-feedback-danger.ripple::before {
  width: 280px;
  height: 280px;
  opacity: 1;
}

/* カード要素用タッチフィードバック */
.touch-feedback-card {
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  transition: transform 0.22s ease, box-shadow 0.32s ease, filter 0.26s ease;
  -webkit-tap-highlight-color: transparent;
  --touch-feedback-overlay: rgba(15, 23, 42, 0.12);
  --touch-feedback-shadow: rgba(15, 23, 42, 0.2);
}

.touch-feedback-card:active,
.touch-feedback-card.is-touch-active {
  transform: scale(0.985);
  box-shadow: 0 10px 24px var(--touch-feedback-shadow);
}

/* アイコンボタン用タッチフィードバック */
.touch-feedback-icon {
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  transition: transform 0.2s ease, box-shadow 0.28s ease, background-color 0.22s ease, filter 0.22s ease;
  -webkit-tap-highlight-color: transparent;
  border-radius: 50%;
  --touch-feedback-overlay: rgba(15, 23, 42, 0.18);
  --touch-feedback-shadow: rgba(15, 23, 42, 0.22);
}

.touch-feedback-icon:active,
.touch-feedback-icon.is-touch-active {
  transform: scale(0.9);
  background-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.08);
}

.touch-feedback-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s, opacity 0.4s;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.touch-feedback-icon.ripple::before {
  width: 100px;
  height: 100px;
  opacity: 1;
}

/* リンク用タッチフィードバック */
.touch-feedback-link {
  position: relative;
  touch-action: manipulation;
  user-select: none;
  transition: color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  --touch-feedback-overlay: rgba(15, 23, 42, 0.12);
  --touch-feedback-shadow: rgba(15, 23, 42, 0.14);
}

.touch-feedback-link:active,
.touch-feedback-link.is-touch-active {
  opacity: 0.78;
  transform: translateY(1px);
}

/* ダークモード対応 */
.dark .touch-feedback,
.dark .touch-feedback-secondary,
.dark .touch-feedback-link,
.dark .touch-feedback-card,
.dark .touch-feedback-icon {
  --touch-feedback-overlay: rgba(255, 255, 255, 0.14);
  --touch-feedback-shadow: rgba(15, 23, 42, 0.4);
}

.dark .touch-feedback-primary {
  --touch-feedback-overlay: rgba(255, 255, 255, 0.22);
  --touch-feedback-shadow: rgba(96, 165, 250, 0.55);
}

.dark .touch-feedback-danger {
  --touch-feedback-overlay: rgba(255, 255, 255, 0.24);
  --touch-feedback-shadow: rgba(248, 113, 113, 0.55);
}

.dark .touch-feedback::before {
  background: rgba(255, 255, 255, 0.2);
}

.dark .touch-feedback-primary::before {
  background: rgba(255, 255, 255, 0.3);
}

.dark .touch-feedback-secondary::before {
  background: rgba(255, 255, 255, 0.15);
}

.dark .touch-feedback-secondary:active,
.dark .touch-feedback-secondary.is-touch-active {
  background-color: rgba(255, 255, 255, 0.05);
}

.dark .touch-feedback-icon:active,
.dark .touch-feedback-icon.is-touch-active {
  background-color: rgba(255, 255, 255, 0.1);
}

.dark .touch-feedback-icon::before {
  background: rgba(255, 255, 255, 0.2);
}

/* フィードバック強度を示すマーカークラス（視覚効果の調整用） */
.haptic-light {
  position: relative;
}

.haptic-medium {
  position: relative;
}

.haptic-heavy {
  position: relative;
}

/* ナビゲーション要素の除外ルール（ハンバーガーメニュー等のオーバーレイ表示を保護） */
.no-touch-feedback,
nav .touch-feedback,
.navbar .touch-feedback,
#hamburger-menu,
#mobile-menu-toggle,
#mobile-menu-button,
[data-mobile-menu],
nav button.touch-feedback,
.navbar button.touch-feedback,
nav,
header nav,
.navbar {
  overflow: visible !important;
  transform: none !important;
}

.no-touch-feedback:active,
nav .touch-feedback:active,
.navbar .touch-feedback:active,
#hamburger-menu:active,
#mobile-menu-toggle:active,
#mobile-menu-button:active,
[data-mobile-menu]:active,
nav button.touch-feedback:active,
.navbar button.touch-feedback:active,
nav:active,
header nav:active,
.navbar:active {
  overflow: visible !important;
  transform: none !important;
  /* 視覚変化を完全に無効化 */
  filter: none !important;
}

/* アクセシビリティ: reduce-motionが有効な場合は控えめなエフェクト */
@media (prefers-reduced-motion: reduce) {
  .touch-feedback,
  .touch-feedback-primary,
  .touch-feedback-secondary,
  .touch-feedback-danger,
  .touch-feedback-card,
  .touch-feedback-icon,
  .touch-feedback-link {
    transition: opacity 0.1s ease-in-out;
  }

  .touch-feedback:active,
  .touch-feedback.is-touch-active,
  .touch-feedback-primary:active,
  .touch-feedback-primary.is-touch-active,
  .touch-feedback-secondary:active,
  .touch-feedback-secondary.is-touch-active,
  .touch-feedback-danger:active,
  .touch-feedback-danger.is-touch-active,
  .touch-feedback-card:active,
  .touch-feedback-card.is-touch-active,
  .touch-feedback-icon:active,
  .touch-feedback-icon.is-touch-active,
  .touch-feedback-link:active,
  .touch-feedback-link.is-touch-active {
    transform: none;
    opacity: 0.8;
  }

  .touch-feedback::before,
  .touch-feedback-primary::before,
  .touch-feedback-secondary::before,
  .touch-feedback-danger::before,
  .touch-feedback-icon::before {
    display: none;
  }

  .touch-feedback::after,
  .touch-feedback-primary::after,
  .touch-feedback-secondary::after,
  .touch-feedback-danger::after,
  .touch-feedback-card::after,
  .touch-feedback-icon::after,
  .touch-feedback-link::after {
    transition: opacity 0.1s ease-in-out;
  }
}

/* モバイルメニューの重なり順と可視性を保証（ナビの副作用回避） */
#mobile-menu {
  position: relative;
  z-index: 50;
  overflow: visible;
}