/* ヘッダー右上の検索ボタン */
.header-search-button {
    position: fixed;
    top: 8px;
    right: 52px;
    width: 40px;
    height: 40px;
    border-radius: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    cursor: pointer;
    transition: all 0.3s ease;
    background: no-repeat;
    background-color: #FFF;
    border: 1px solid;
  }

  .header-search-button:hover {
    transform: scale(1.05);
  }

  .header-search-button i {
    color: white;
    font-size: 18px;
  }

  /* 検索パネルのスタイル */
  .search-button {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 50px;
      height: 50px;
      background-color: #007bff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      z-index: 100;
      cursor: pointer;
    }

    .search-button i {
      color: white;
      font-size: 24px;
    }

    .search-panel {
      position: fixed;
      top: 0;
      right: -100%;
      width: 100%;
      height: 100%;
      background-color: white;
      z-index: 1000;
      transition: right 0.6s ease;
      box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
      overflow-y: auto;
    }

    .search-panel.active {
      right: 0;
      z-index: 10000;

    }

    .search-header {
      /* display: flex; を削除 */
      align-items: center;
      padding: 15px;
      border-bottom: 1px solid #eee;
      position: sticky; /* stickyのままにするか、relativeにするか確認が必要ですが、まずはstickyのままで試します */
      /* position: relative; を追加 */
      position: relative;
      top: 0;
      background-color: white;
      z-index: 10;
    }

    .search-back {
      margin-right: 15px;
      cursor: pointer;
      position: absolute;
      top: 50%;
      left: 20px;
      transform: translateY(-50%);
      z-index: 11;
    }

    .search-back i {
      font-size: 20px;
      color: #333;
    }

    .search-input-container {
      flex: 1;
      position: relative;
    }

    .search-input-container .search-input {
      width: 100%;
      padding: 10px 60px 10px 40px;
      border: 1px solid #ddd;
      font-size: 16px;
    }

    .search-clear {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      color: #999;
      display: none;
      z-index: 12; /* 戻るボタンより上に配置 */
      background-color: white;
      padding: 5px;
      border-radius: 50%;
    }

    .search-results {
      padding: 15px;
    }

    .search-result-item {
      display: flex;
      padding: 15px;
      border-bottom: 1px solid #eee;
      cursor: pointer;
    }

    .search-result-item:hover {
      background-color: #f9f9f9;
    }

    .search-result-image {
      width: 80px;
      height: 80px;
      object-fit: cover;
      margin-right: 15px;
      border-radius: 5px;
    }

    .search-result-info {
      flex: 1;
    }

    .search-result-name {
      font-weight: bold;
      margin-bottom: 5px;
    }

    .search-result-price {
      color: #333;
      margin-bottom: 5px;
    }

    .search-result-description {
      font-size: 14px;
      color: #666;
    }

    .no-results {
      text-align: center;
      padding: 30px;
      color: #666;
    }

    /* 既存のスタイルとの互換性のために追加 */
    .search-item {
      padding: 10px;
      border-bottom: 1px solid #eee;
      cursor: pointer;
      display: flex;
      align-items: center;
    }

    .search-item:hover {
      background: #f5f5f5;
    }

    .search-item-image {
      width: 50px;
      height: 50px;
      margin-right: 10px;
      object-fit: cover;
    }

    .search-item-details {
      flex: 1;
    }

    .search-item-name {
      font-weight: bold;
      margin-bottom: 5px;
    }

    .search-item-price {
      color: #666;
    }

    .search-no-results {
      padding: 20px;
      text-align: center;
      color: #666;
    }

    /* 検索ハイライト機能のスタイル */
    .search-highlight {
      background-color: #fff59f;
      color: #333;
      padding: 2px 4px;
      border-radius: 3px;
    }

    /* 検索結果のコメント部分の前後省略記号のスタイル */
    .search-result-description {
      line-height: 1.4;
      word-wrap: break-word;
    }

    /* 検索結果のマッチ情報表示 */
    .search-match-info {
      font-size: 12px;
      color: #999;
      margin-top: 5px;
      font-style: italic;
    }

    .search-input::placeholder {
      color: #a1a1a1; /* 赤色 */
    }

    /* 売り切れ商品のマスキングスタイル */
    .search-result-item.sold-out-mask {
      position: relative;
      opacity: 1; /* 透明度を上げて見やすくする */
      pointer-events: none; /* クリックを無効化 */
      cursor: not-allowed; /* 禁止カーソルを表示 */
    }

    .search-result-item.sold-out-mask::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.4); /* 透明度を下げて文字を見やすくする */
      z-index: 1;
      pointer-events: none;
    }

    /* sold-out-maskのhover効果を無効化 */
    .search-result-item.sold-out-mask:hover {
      background-color: inherit;
      transform: none;
    }

    .search-result-item.sold-out-mask .search-result-image {
      opacity: 0.5;
    }

    /* 検索結果に一覧と同じ購入上限メッセージを適用（detail.php:446-451行目と同じ） */
    .search-result-item.person_sold_out {
      position: relative;
    }

    /* 検索結果の個別商品マスク */
    .search-result-item {
      position: relative;
    }

    .search-result-mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.8);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      z-index: 10;
      pointer-events: all;
      border-radius: 4px;
      text-align: center;
      padding: 8px;
      cursor: not-allowed;
    }

    /* 売り切れ状態メッセージのスタイル（detail.php:442-451と同じ） */
    .search-result-item.sold_out {
      position: relative;
    }

    /* マスク時に商品名をマスクの下に隠す */
    .search-result-name.masked {
      z-index: 1;
    }

    .search-result-item.person_sold_out.sold_out.sold-out-mask:after,
    .search-result-item.sold_out.sold-out-mask:after {
      z-index: 10;
    }

    /* 売り切れ状態メッセージのスタイル */
    .search-result-item.sold_out {
      position: relative;
    }

    .search-result-item.sold_out:after {
      z-index: 1;
      visibility: visible;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 14px;
      white-space: nowrap;
    }

    /* 予約必須日数メッセージのスタイル（detail.php:455-469と同じ） */
    .search-result-item.days_in_advance.sold_out:after {
      z-index: 1;
      visibility: visible;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 14px;
      white-space: nowrap;
    }

    .search-result-item.days_in_advance1.sold_out:after {
      z-index: 1;
      visibility: visible;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 14px;
      white-space: nowrap;
    }

    .search-result-item.days_in_advance2.sold_out:after {
      z-index: 1;
      visibility: visible;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 14px;
      white-space: nowrap;
    }

    .search-result-item.days_in_advance3.sold_out:after {
      z-index: 1;
      visibility: visible;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 14px;
      white-space: nowrap;
    }

    .search-result-item.days_in_advance4.sold_out:after {
      z-index: 1;
      visibility: visible;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 14px;
      white-space: nowrap;
    }

    .search-result-item.days_in_advance5.sold_out:after {
      z-index: 1;
      visibility: visible;
      top: 50%;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 14px;
      white-space: nowrap;
    }

    .search-result-item.days_in_advance6.sold_out:after {
      z-index: 1;
      visibility: visible;
      top: 50%;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 14px;
      white-space: nowrap;
    }

    .search-result-item.days_in_advance7.sold_out:after {
      z-index: 1;
      visibility: visible;
      top: 50%;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 14px;
      white-space: nowrap;
    }

    /* その他の売り切れ状態メッセージのスタイル */
    .status-message {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 4px;
      padding: 6px 12px;
      font-size: 13px;
      color: white;
      z-index: 10;
      white-space: nowrap;
    }