@charset "UTF-8";

    .shop_id .input-container {
      text-align: left;
    }
    .shop_id .input-container input {
      width: 100%    !important;
      border: 1px solid #000000        !important;
    }

    /* サジェストリスト（ul）のスタイル */
    .suggest-list {
      position: absolute;
      top: 100%;
      /* 入力欄の真下に配置 */
      left: 0;
      width: 100%;
      max-height: 200px;
      /* 候補が多い場合はスクロールさせる */
      overflow-y: auto;
      margin: 0px 0 0 0;
      padding: 0;
      list-style: none;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      /* 他の要素より手前に表示 */
    }

    /* 候補アイテム（li）のスタイル */
    .suggest-list li {
      padding: 0px 12px;
      font-size: 14px;
      color: #333;
      cursor: pointer;
      white-space: nowrap;
      /* 文字の折り返しを防ぐ */
      overflow: hidden;
      text-overflow: ellipsis;
      /* 長すぎる会社名は「…」にする */
    }

    /* 候補アイテムにマウスを乗せたとき（ホバー時） */
    .suggest-list li:hover {
      background-color: #f8f9fa;
      /* 薄いグレー */
      color: #007bff;
      /* 文字を青色に */
    }

    .suggest-select {
       display: none;
    }
    .input-container {
      position: relative;
    }

    .shop-selection {
        margin-bottom: 16px;
    }
    .shop-selection-label {
        font-weight: 500;
        width: 100%;
        text-align: left;
        display: block;
    }

    /* ボタン風のラベルデザイン（未チェック時：オレンジ背景・白文字） */
    .shop-selection-checkboxs {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 5px 20px;
      margin: 4px;
      font-weight: bold;
      color: #ffffff; /* 白文字 */
      background-color: #ff9800; /* オレンジ背景 */
      border: 2px solid #ff9800; /* オレンジ枠線 */
      border-radius: 25px; /* しっかりした角丸 */
      cursor: pointer;
      user-select: none;
      transition: all 0.3s ease; /* アニメーションを滑らかに */
    }
    .shop_categories .shop-selection-checkboxs {
      padding: 5px 12px;
    }

    /* 元のチェックボックスを非表示にする */
    .shop-selection-checkboxs input[type="checkbox"] {
      display: none;
    }

    /* ホバー時の挙動（少し明るくする） */
    .shop-selection-checkboxs:hover {
      background-color: #ffa726;
      border-color: #ffa726;
    }

    /* チェックされた時のデザイン（反転：白背景・オレンジ文字） */
    /* :has()擬似クラスを使い、内部のinputがチェックされたらlabel自体のスタイルを変える */
    .shop-selection-checkboxs:has(input[type="checkbox"]:checked) {
      color: #ff9800; /* オレンジ文字 */
      background-color: #ffffff; /* 白背景 */
      border-color: #ff9800; /* オレンジ枠線は残す */
    }

     .get-ticket-form .p-form_btn_item:after {
        content: none;
     }