/* ------------------------------------
       全体のスタイル調整
    ------------------------------------ */
    .reviews-page-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 15px;
      box-sizing: border-box;
      font-family: sans-serif;
      color: #333;
    }

    .page-title {
      font-size: 1.8rem;
      text-align: center;
      margin-bottom: 30px;
      font-weight: bold;
    }

    /* ------------------------------------
       カテゴリ別絞り込みフィルター（タブ構造）
    ------------------------------------ */
    .filter-wrapper {
      margin-bottom: 40px;
    }

    /* 1段目：カテゴリタブ */
    .category-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      border-bottom: 2px solid #e0e0e0;
      padding-bottom: 10px;
      margin-bottom: 15px;
    }

    .category-tab {
      background: none;
      border: solid 1px #007bff;
      font-size: 0.7rem;
      font-weight: bold;
      padding: 8px 16px;
      cursor: pointer;
      color: #666;
      border-radius: 20px;
      transition: all 0.2s ease;
    }

    .category-tab:hover {
      background-color: #f0f0f0;
      color: #333;
    }

    .category-tab.active {
      background-color: #007bff;
      color: #fff;
    }

/* スマホタップ時のグレーハイライトを透明化 */
.category-tab,
.subtag-btn {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* 2. PC以外のデバイス（スマホ・タブレット）では hover による背景変更を無効化 */
@media (hover: hover) {
  .category-tab:hover {
    background-color: #f0f0f0;
    color: #333;
  }
  .subtag-btn:hover {
    background-color: #e9ecef;
  }
}
/* ------------------------------------
   2段目：サブタグ（個別タグ）のサイズ固定・調整
------------------------------------ */
.subtag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  min-height: 48px; /* 1行分の適切な最小高さを確保 */
  transition: all 0.3s ease; /* サイズ変化をスムーズにする */
}

/* サブタグが存在しない（空の）時は上下マージンと高さを消してスキップする */
.subtag-container:empty {
  min-height: 0;
  margin: 0;
}
    .subtag-btn {
      background-color: #f8f9fa;
      border: 1px solid #ced4da;
      border-radius: 20px;
      padding: 5px 14px;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      color: #495057;
    }

    .subtag-btn:hover {
      background-color: #e9ecef;
    }

    .subtag-btn.active {
      background-color: #6c757d;
      color: #fff;
      border-color: #6c757d;
    }

    /* ------------------------------------
       レビューグリッド (PC: 3列, SP: 2列)
    ------------------------------------ */
    .reviews-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    @media (max-width: 768px) {
      .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }
    }

    @media (max-width: 480px) {
      .reviews-grid {
        gap: 10px;
      }
    }

    /* ------------------------------------
       レビューカード
    ------------------------------------ */
    .review-card {
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
    }


    .review-card.is-hidden {
      display: none !important;
    }

    .review-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .user-avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .user-avatar svg {
      width: 24px;
      height: 24px;
    }

    .gender-female { background-color: #ffe4e8; color: #e91e63; }
    .gender-male { background-color: #e3f2fd; color: #2196f3; }
    .gender-other { background-color: #f0f0f0; color: #757575; }

    .review-meta {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .review-user-tags {
      display: flex;
      gap: 6px;
      align-items: center;
      font-size: 0.8rem;
    }

    .user-age-badge {
      background: #f0f0f0;
      padding: 2px 6px;
      border-radius: 4px;
      color: #666;
    }

    .user-gender-text {
      color: #666;
    }

    .review-rating {
      color: #ffb400;
      font-size: 0.95rem;
      letter-spacing: 1px;
    }

    .review-title {
      font-size: 1rem;
      font-weight: bold;
      margin: 0 0 10px 0;
      line-height: 1.4;
      color: #222;
    }

    /* コメントボックス */
    .review-comment-box {
      position: relative;
      margin-bottom: 12px;
      flex-grow: 1;
    }

    .review-comment-content {
      max-height: 85px;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .review-comment-box.expanded .review-comment-content {
      max-height: 2000px; /* 十分な高さ */
    }

    .review-comment {
      margin: 0;
      font-size: 0.88rem;
      line-height: 1.6;
      color: #444;
      word-break: break-word;
    }

    .read-more-btn {
      background: none;
      border: none;
      color: #007bff;
      font-size: 0.8rem;
      padding: 4px 0 0 0;
      cursor: pointer;
      display: inline-block;
      margin-top: 5px;
    }

    .m-l5 { margin-left: 5px; }

    /* タグ一覧 */
    .review-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: auto;
      padding-top: 8px;
      border-top: 1px dashed #eee;
    }

/*
    .review-tag {
      font-size: 0.78rem;
      color: #007bff;
      text-decoration: none;
      background: #f0f7ff;
      padding: 3px 8px;
      border-radius: 4px;
    }
*/
/*    a.review-tag:hover {
      text-decoration: underline;
      background: #e1f0ff;
    }
*/

    /* ------------------------------------
       「もっと見る」ボタン領域
    ------------------------------------ */
    .more-btn-container {
      text-align: center;
      margin-top: 40px;
    }

    .load-more-btn {
      background-color: #333;
      color: #fff;
      border: none;
      padding: 14px 40px;
      border-radius: 30px;
      font-size: 1rem;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .load-more-btn:hover {
      background-color: #555;
    }

    .no-reviews-msg {
      text-align: center;
      color: #777;
      padding: 40px 0;
      display: none;
    }