/* 
 * New Home Page Custom Styles
 * プライムデンタルネット 新トップページ用スタイルシート
 * 
 * 重要: このスタイルは .new-home-template クラスを持つページにのみ適用されます
 */

/* 基本リセット - new-home-template ページのみに適用 */
.new-home-template * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* カスタムアニメーション */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blob {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out;
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

/* スムーズスクロール - new-home-template ページのみ */
.new-home-template html {
  scroll-behavior: smooth;
}

/* フォント設定 */
body.new-home-template {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.font-serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

/* ナビゲーション スクロール時のスタイル */
#main-nav.scrolled {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

#main-nav.scrolled .nav-logo {
  color: #0f172a;
}

#main-nav.scrolled .nav-link {
  color: #475569;
}

#main-nav.scrolled .nav-btn {
  background-color: #0f172a;
  color: white;
}

/* モバイルメニュー表示時のアイコン切り替え */
#mobile-menu-toggle .menu-icon {
  display: block;
}

#mobile-menu-toggle .close-icon {
  display: none;
}

#mobile-menu-toggle.active .menu-icon {
  display: none;
}

#mobile-menu-toggle.active .close-icon {
  display: block;
}

/* カードホバー効果の強化 */
.group:hover .group-hover\:text-teal-600 {
  color: #0d9488;
}

.group:hover .group-hover\:bg-teal-100 {
  background-color: #ccfbf1;
}

.group:hover .group-hover\:text-teal-700 {
  color: #0f766e;
}

/* ボタンスタイルの補完 */
button:focus-visible,
a:focus-visible {
  outline: 2px solid #0d9488;
  outline-offset: 2px;
}

/* グレースケール効果 */
.grayscale {
  filter: grayscale(100%);
}

.grayscale:hover {
  filter: grayscale(0%);
}

/* ブラーフィルター */
.filter.blur-3xl {
  filter: blur(64px);
}

/* Mix blend mode */
.mix-blend-multiply {
  mix-blend-mode: multiply;
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Backdrop blur サポート */
@supports (backdrop-filter: blur(12px)) {
  .backdrop-blur-sm {
    backdrop-filter: blur(4px);
  }
  
  .backdrop-blur-md {
    backdrop-filter: blur(12px);
  }
}

@supports not (backdrop-filter: blur(12px)) {
  .backdrop-blur-sm,
  .backdrop-blur-md {
    background-color: rgba(255, 255, 255, 0.95);
  }
}

/* ホバー時のトランスフォーム効果 */
.transform {
  transform: translateZ(0);
}

.hover\:-translate-y-1:hover {
  transform: translateY(-0.25rem);
}

.group-hover\:translate-x-1 {
  transition: transform 0.2s;
}

.group:hover .group-hover\:translate-x-1 {
  transform: translateX(0.25rem);
}

/* カスタムスクロールバー (Webkit browsers) - new-home-template ページのみ */
.new-home-template ::-webkit-scrollbar {
  width: 10px;
}

.new-home-template ::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.new-home-template ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 5px;
}

.new-home-template ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* セレクション カラー - new-home-template ページのみ */
.new-home-template ::selection {
  background-color: #99f6e4;
  color: #134e4a;
}

/* アクセシビリティ: フォーカス時のアウトライン強化 - new-home-template ページのみ */
.new-home-template a:focus,
.new-home-template button:focus {
  outline: 2px solid #0d9488;
  outline-offset: 2px;
}

/* プリント時のスタイル調整 - new-home-template ページのみ */
@media print {
  .new-home-template nav,
  .new-home-template footer,
  .new-home-template .no-print {
    display: none;
  }
}

/* アニメーション無効設定を尊重 - new-home-template ページのみ */
@media (prefers-reduced-motion: reduce) {
  .new-home-template *,
  .new-home-template *::before,
  .new-home-template *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}