@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif+JP:wght@200..900&family=M+PLUS+Rounded+1c:wght@400;500;700;800&family=Sawarabi+Gothic&family=Kosugi+Maru&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400;500;700;800&family=Quicksand:wght@400;500;600;700&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&family=Nunito:wght@400;500;600;700;800&display=swap'); */
@import "tailwindcss";
/* @plugin '@tailwindcss/typography';
@plugin "@tailwindcss/forms"; */

/* Lexxy Editor and Content Styles */
@import "./lexxy-dark-theme.css";
@import "./lexxy-content.css";

@theme {
  /* 色の定義 */
  --color-primary: #10b981;
  --color-primary-light: #6ee7b7;
  --color-primary-dark: #047857;

  --color-accent: #14b8a6;
  --color-accent-dark: #0d9488;

  /* フォントの定義 */
  --font-sans: "Noto Sans JP", sans-serif;
  --font-serif: "Noto Serif JP", sans-serif;
  /* --font-sans: "Quicksand", "M PLUS Rounded 1c", sans-serif; */
  /* --font-sans: "Nunito", "Zen Maru Gothic", sans-serif; */
  /* 追加フォント */
  --font-mplus-rounded: "M PLUS Rounded 1c", sans-serif;
  --font-sawarabi: "Sawarabi Gothic", sans-serif;
  --font-kosugi: "Kosugi Maru", sans-serif;

  /* エフェクトの定義 */
  --shadow-glow-accent: 0 0 20px 0px rgba(20, 184, 166, 0.5);
}

@layer base {
  body {
    @apply bg-gray-900 text-gray-200 font-sans;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply text-white;
  }
}

@layer components {
  /* すりガラス調パネル */
  .glass-card {
    @apply bg-gray-800/50 backdrop-blur-lg rounded-2xl border border-gray-700 shadow-lg;
    @apply transition-all duration-300;

    &:hover {
      /* 枠線もアクセントカラーに変化させる */
      border-color: rgba(20, 184, 166, 0.5);
      /* ご提示のbox-shadowをteal色に変更 */
      box-shadow: 0 0 30px rgba(20, 184, 166, 0.25), 0 0 10px rgba(20, 184, 166, 0.1);
    }
  }

  /* 大きめのガラスパネル */
  .glass-panel {
    @apply bg-gray-800/40 backdrop-blur-xl rounded-3xl border border-gray-700/50 shadow-2xl;
  }

  /* 管理者サイドバー用のガラススタイル */
  .admin-sidebar {
    @apply bg-gray-800/80 backdrop-blur-lg border-r border-gray-700/50;
  }

  /* 管理者メニューアイテム */
  .admin-menu-item {
    @apply flex items-center gap-x-3 rounded-lg px-4 py-3 text-gray-300 transition-all duration-200;
    @apply hover:bg-accent/10 hover:text-accent hover:border-l-4 hover:border-accent;
  }

  .admin-menu-item.active {
    @apply bg-accent/20 text-accent border-l-4 border-accent;
  }
  
  /* === ボタンの基本スタイル === */
  .btn {
    @apply inline-flex items-center justify-center font-bold rounded-full transition-all duration-300;
    @apply focus:outline-none focus:ring-4;
    --tw-ring-color: rgba(20, 184, 166, 0.5);
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    text-decoration: none;
  }
  
  /* プライマリボタン（グロウ効果付き） */

  .btn-primary-glow {
    /* 基本のレイアウト、文字、角丸などを設定 */
    @apply inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-bold rounded-full text-white;
    @apply transition-all duration-300 transform hover:scale-105;

    /* 背景色をテーマの「濃い緑」に設定 */
    background-color: var(--color-primary-dark);

    /* フォーカス時のリング色をアクセントカラーに設定 */
    @apply focus:outline-none focus:ring-4;
    --tw-ring-color: rgba(20, 184, 166, 0.5);

    /* アクセントカラーのRGB(20, 184, 166)を使い、teal色のグロウ効果を追加 */
    box-shadow: 0 0 15px rgba(20, 184, 166, 0.5), 0 0 5px rgba(20, 184, 166, 0.7);
  }

  .btn-primary-glow:hover {
    /* ホバー時は少し明るいtealに変更 */
    background-color: var(--color-primary);

    /* ホバー時にグロウを少し強くする */
    box-shadow: 0 0 25px rgba(20, 184, 166, 0.7), 0 0 10px rgba(20, 184, 166, 0.9);
  }

  /* セカンダリボタン（ガラス調） */
  .btn-secondary-glass {
    @apply px-6 py-2 text-sm text-white border border-white/30 bg-white/10;
    @apply hover:bg-white/20 hover:border-white/50;
  }
  
  /* プライマリボタン（アクセントカラー） */
  .btn-primary {
    @apply bg-accent text-gray-900 shadow-lg;
    @apply hover:bg-accent-dark hover:shadow-glow-accent hover:scale-105;
  }
  
  /* セカンダリボタン（アウトライン） */
  .btn-secondary {
    @apply border-2 border-accent text-accent;
    @apply hover:bg-accent hover:text-gray-900 hover:shadow-glow-accent;
  }

  /* 必須バッジ（グロウ効果付き） */
  .badge-required {
    @apply inline-flex items-center justify-center px-2 py-1 text-xs font-normal text-white rounded-full;
    background-color: #dc2626; /* red-600 */
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.6), 0 0 5px rgba(220, 38, 38, 0.8);
  }

  .scrolled-header {
    @apply bg-gray-900/80 backdrop-blur-lg shadow-lg;
  }

  /* プライバシーポリシー等の文章用スタイル */
  .prose-enhanced {
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: rgb(209, 213, 219);
  }

  .prose-enhanced h2 {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: rgb(255, 255, 255);
    border-bottom: 2px solid rgb(20, 184, 166);
    box-shadow: 0 2px 8px 0px rgba(20, 184, 166, 0.3);
  }

  .prose-enhanced h2:first-of-type {
    margin-top: 2rem;
  }

  .prose-enhanced p {
    margin-bottom: 1.5rem;
    color: rgb(209, 213, 219);
    line-height: 1.8;
  }

  .prose-enhanced ol,
  .prose-enhanced ul {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
  }

  .prose-enhanced li {
    margin-bottom: 0.75rem;
    color: rgb(209, 213, 219);
    line-height: 1.8;
  }

  .prose-enhanced a {
    color: rgb(20, 184, 166);
    text-decoration: underline;
    transition: color 0.2s;
  }

  .prose-enhanced a:hover {
    color: rgb(13, 148, 136);
  }

  .prose-enhanced ol {
    list-style-type: decimal;
    list-style-position: outside;
  }

  .prose-enhanced ul {
    list-style-type: disc;
    list-style-position: outside;
  }

  .prose-enhanced br {
    margin-bottom: 0.5rem;
  }

  .prose-enhanced .text-right {
    text-align: right;
  }

  /* Kaminari Pagination - Liquid Glass Theme */
  .pagination {
    @apply flex items-center justify-center gap-2;
  }

  .pagination .page,
  .pagination .first,
  .pagination .prev,
  .pagination .next,
  .pagination .last,
  .pagination .gap {
    @apply inline-flex items-center justify-center min-w-10 h-10 px-3 rounded-lg transition-all duration-200;
  }

  .pagination .page a,
  .pagination .first a,
  .pagination .prev a,
  .pagination .next a,
  .pagination .last a {
    @apply flex items-center justify-center w-full h-full text-gray-300 font-semibold;
    background-color: rgba(55, 65, 81, 0.25); /* enhanced transparency */
    backdrop-filter: blur(15px);
    border: 1px solid rgba(75, 85, 99, 0.4);
  }

  .pagination .page a:hover,
  .pagination .first a:hover,
  .pagination .prev a:hover,
  .pagination .next a:hover,
  .pagination .last a:hover {
    background-color: rgba(75, 85, 99, 0.4);
    border-color: rgba(20, 184, 166, 0.8);
    color: rgb(243, 244, 246);
    box-shadow: 0 0 20px rgba(20, 184, 166, 0.4);
  }

  .pagination .page.current {
    @apply text-gray-900 font-bold;
    background-color: rgba(20, 184, 166, 0.9);
    border: 1px solid rgb(20, 184, 166);
    box-shadow: 0 0 25px rgba(20, 184, 166, 0.6);
  }

  .pagination .prev.disabled,
  .pagination .next.disabled,
  .pagination .first.disabled,
  .pagination .last.disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  .pagination .prev.disabled a,
  .pagination .next.disabled a,
  .pagination .first.disabled a,
  .pagination .last.disabled a {
    @apply pointer-events-none;
    background-color: rgba(55, 65, 81, 0.15);
    border-color: rgba(55, 65, 81, 0.3);
  }

  .pagination .gap {
    @apply text-gray-500;
  }
}

/* Rails特有のスタイル */
div.field_with_errors > label {
  @apply text-red-500;
}
div.field_with_errors > :is(input, textarea, select) {
  @apply border-red-500;
  @apply focus:border-red-500 focus:ring-red-500;
}