/* 半星表示用のCSS */
    .half-star {
      position: relative;
      display: inline-block;
    }
    .half-star::before {
      content: '★';
      position: absolute;
      left: 0;
      width: 50%;
      overflow: hidden;
      color: inherit;
    }
    .half-star::after {
      content: '☆';
      color: inherit;
    }
    
    /* プログレスバーのアニメーション */
    .progress-bar {
      transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* モバイルでダイアログの閉じるボタンのアウトラインを削除 */
    dialog button[type="button"]:focus {
      outline: none;
    }
    
    /* カードホバーエフェクト */
    .coffee-card {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .coffee-card:hover {
      transform: translateY(-4px);
    }
    /* 画像表示エリアのスタイル */
    .data-coffee-images {
      position: relative;
      width: 100%;
    }
    .data-coffee-images img {
      display: block;
      max-width: 100%;
      height: auto;
    }
    /* グラデーション背景 */
    .gradient-bg {
      background: linear-gradient(135deg, #f5ede7 0%, #faf6f3 100%);
    }
    
    /* フェードインアニメーション */
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .animate-fadeIn {
      animation: fadeIn 0.3s ease-out;
    }
    
    /* FABパルスアニメーション */
    @keyframes pulse-custom {
      0% {
        box-shadow: 0 0 0 0 rgba(166, 124, 82, 0.7);
        transform: scale(1);
      }
      70% {
        box-shadow: 0 0 0 15px rgba(166, 124, 82, 0);
        transform: scale(1.05);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(166, 124, 82, 0);
        transform: scale(1);
      }
    }
    .animate-pulse-custom {
      animation: pulse-custom 2s infinite;
    }
    /* タイポグラフィ用ユーティリティ */
    .text-balance {
      text-wrap: balance;
    }
    .text-pretty {
      text-wrap: pretty;
    }